-
[부스트코스] Browser에서의 웹 개발부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 16:03
오늘은 크롬 브라우저 소스 코드를 보며 소스의 구성에 대해 알아보도록 하겠습니다.
전 시간에 말했듯이 크롬 브라우저는 개발자 도구를 제공하고 있는데요.
마우스 우클릭 > 개발자 도구를 통해서 확인할 수 있고 단축기 (Ctrl + Shift + I)를 통해서 볼 수 있습니다.
소스 코드를 살피어 보면 첫 부분에 <html>을 확인할 수 있습니다. 그리고 소스의 마지막 부분을 보면 </html>이라고 적혀있는데요. 이렇듯 html 태그를 통해 HTML 문서임을 확인할 수 있습니다.
또한 코드를 살피어보면 head, body 같은 것들을 통해 html이 계층적 구조로 이루어져 있음을 알 수 있습니다.
head 요소의 정의는 '문서의 메타데이터 집합'입니다. 메타 데이터는 웹 페이지에 직접적으로 보이지 않는 정보라고 이해하면 되는데요. 데이터를 설명해주는 데이터라고 생각하면 됩니다.
head 내 위치하는 요소로는 title, meta, link, style, script 요소가 있습니다.
각각 요소에 대해 더 자세하게 살피어보겠습니다.
- title
문서의 제목이나 이름을 나타냅니다. title 태그 내에는 텍스트만 넣을 수 있습니다.
브라우저 창 제목이나 페이지의 탭에 나타나게 되는 정보이며, 구글 같은 검색 엔진에서는 검색된 페이지의 이름으로 나타납니다. 때문에 title의 내용은 적절하고 명료해야 합니다.
- meta
head는 문서의 메타데이터 집합이라고 했는데요 정확히 메타 정보를 담는 부분이 meta 태그입니다.
메타 태그는 속성 값으로 정보를 나타냅니다.
위의 그림에서는 인코딩에 대한 정보를 나타내고 있네요. 브라우저가 이 메타 부분을 읽고 utf-8 방식으로 작성되었음을 알 수 있습니다.
또한, meta에는 페이지에 대한 상세 설명, 페이지에 대한 키워드 등을 설정하는 역할을 합니다.
- link, style
link 요소는 주로 CSS 파일을 연결할 때 사용하는 요소입니다.
style은 html문서에 css를 그대로 사용할 때 필요한 요소입니다.
- script
html문서와 자바스크립트 파일을 연결할 때 사용하는 요소입니다.
body 부분은 html 문서의 내용을 나타냅니다. 화면에 보이지 않는 head부분과 대조적으로 화면에 나타나는 부분을 담당합니다. 대표적인 태그들로 한 문단임을 나타내는 <p>, 줄 바꿈을 도와주는 <br>, 제목임을 나타내는 <h#>, 레이아웃을 나누어 주는 <div> 태그들이 있습니다.
태그들에 주의해서 소스코드를 확인해 보면,
html 문서에 CSS와 자바스크립트가 여기저기에 섞여 사용됨을 알 수 있습니다.
[출처: https://www.edwith.org/boostcourse-web/lecture/16664/]
'부스트코스 코딩일지 > 웹 프로그래밍 기초' 카테고리의 다른 글
[부스트코스] WAS (0) 2020.01.19 [부스트코스] 웹 서버 (0) 2020.01.19 [부스트코스] Browser의 동작 (0) 2020.01.17 [부스트코스] 웹 백 엔드 (0) 2020.01.17 [부스트코스] 웹 Front-End (0) 2020.01.16