본문 바로가기

카테고리 없음

[ 11/2 Today I Learned ] 웹개발 종합반 1주차

웹에 대해서는 예전에 프로젝트를 해보고, 생활코딩, 인프런 등등을 통해

 

전체적으로 막연하게 알고있다고 생각한 내용들이었는데, 

 

웹개발 종합반을 통해

 

다시 들어보니, 개념이 명확히 정리되는 느낌이 들어 좋았다.

 

 

[ 웹 페이지의 3대요소 & 각 요소별 미리 짜놓은 라이브러리 ]

 

웹 페이지의 3대 요소는

 

HTML / CSS / JavaScript

 

HTML의 <head> </head> 태그 안에,


<style> </style> 태그를 통해, HTML을 꾸며주는 CSS 속성 or 외부 파일을 선언할 수 있다.

 

css를 직접 다루려면

 

[1] html 각 태그에 class = "식별자 이름"  를 달아준 뒤에,

 

[2] <style> </style> 태그 안에서,

 

<style>

 

.식별자 이름 {

     background-color : green ;

    속성 2 : 속성 2의 값 ;

    . . .

}

 

</style> 

 

이렇게 지목해서 꾸며주면 된다.

 

 

BootStrap 에 대해서도 배웠는데,

 

이는 미리 디자이너, 전문 프론트앤드 개발자들이 미리 작성해놓은

 

css 꾸러미 = css 에서의 라이브러리 라고 생각하면 된다.

 

 

html의 <head> </head> 태그 안에 아래와 같은 줄을 추가해주면

이 html 파일에서 bootstrap을 사용할 수 있다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

==================================

 

JavaScript 는

 

모든 웹 브라우저에서 표준으로 채택한, 웹 브라우저가 읽을 수 있는 프로그래밍 언어다.

 

만약, Python / Java / Ruby 등등의 언어들을 모두 웹 브라우저가 읽을 수 있게 하려 했다면

 

웹 브라우저의 개발 비용 및 호환성 문제부터 시작해서, 다양한 골칫거리가 생겼을 것이다.

 

그렇기에 웹 브라우저에서는 JavaScript를 사용한다! 는 표준을 설정한 것이다.

 

JavaScript는 여타 프로그래밍 언어와 구성요소는 비슷하므로, 따로 적지는 않겠다.

 

JavaScript를 통해 HTML을 동적으로 조작할 수 있다.

 

HTML 파일의 <head> </head> 태그 안에, <script> </script> 태그를 넣어서

 

그 안에 JavaScript를 통해 로직을 짤 수 있다.

 

하지만 역시 이 또한 "바퀴를 재발명하지 말라"라는 격언과 같이

 

미리 정의되어 있는 JavaScript 라이브러리가 있다, 그것이 jQuery 이다.

 

이것을 통해 쉽고 빠르게 HTML을 조작할 수 있다.