네트워크 뿌수기 - 웹페이지를 만들고 꾸민다

웹페이지는 HTML 파일로 만들어진다.

 

HTML 파일의 HT는 HyperText의 머릿글자입니다. 복수의 문서를 연결해 서로 참조할 수 있는 문서를 뜻하죠.

 

ML은 MarkUp Language의 줄임말로, 마크업 언어입니다. 마크업 언어란 문서의 구조를 명확히 표현하기 위한 언어입니다. 마크업 언어를 이용해 문서의 제목이나 헤드라인, 단락, 리스트, 다른 문서 인용 등의 구조를 명확히 함으로써, 컴푸터로 문장 구조 분석을 간편하게 할 수 있습니다.

 

외관을 지정하는 HTML 태그

 

HTML에서는 문서구조나 링크, 문자크기나 폰트 등의 외관을 지정하고자 HTML 태그를 이용합니다. 시작태그 <>, 종료태그</>로 요소를 감싸죠. 요소를 감싸는 것을 "마크업"이라고 합니다. 태그는 '표지'라는 의미입니다. '이 부분은 이런 내용이에요.' 라고 알려주는 것이죠.

이 경우, '아아아아아아' 가 title 요소가 됩니다. 이 문서의 제목(title)은 '아아아아아아'라고 마크업했으므로, 웹브라우저의 창이나 탭 부분에 '아아아아아아'가 표시됩니다.

 

웹페이지의 외관도 중요하다

 

사용자에게 전달하고자 하는 내용을 잘 전달하려면 웹페이지가 어떻게 보이는가도 중요합니다. 예를 들어, 문장 속에 중요한 부분은 색을 바꾸거나 굵게 하는 등 보기 좋게 꾸미면 내용 전달이 쉬워집니다. 현재는 폰트 등 문서의 전체적인 디자인을 "스타일 시트"로 따로 정의하는 것이 일반적입니다.

 

스타일 시트

 

스타일 시트란 문서의 레이아웃이나 문자의 폰트와 색 등 웹페이지의 디자인을 정의하는 방법입니다. 이를 위해 CSS라고 불리는 언어가 있습니다.(Cascading Style Sheets) 스타일 시트는 HTML 파일 안에 작성할 수도 있지만, HTML파일과는 별도로 스타일 시트 파일을 작성합니다.

 

HTML 파일 자체에는 문서의 헤드라인이나 단락 등 구조와 그 내용만 기술해두고, 디자인은 스타일 시트를 읽어오는 식으로 문서의 구조와 디자인을 분리시킵니다.

 

---

Point

 

• HTML 파일을 작성하기 위해 HTML을 이용한다.
• HTML 태그로 문서의 구조나 링크, 외관을 결정할 수 있다.
• 스타일 시트로 웹페이지의 디자인을 지정할 수 있다.
• 스타일 시트를 이용하면 웹페이지의 디자인을 간편하게 변경할 수 있다.