웹페이지를 보기 좋게 꾸민다

Sunhee·2024년 3월 10일

네트워크

목록 보기

27/40

해당 포스트는 영진닷컴,『그림으로 배우는 네트워크 NetWork 원리』, Gene 저·김성훈 역을 참고하여 작성하였습니다.

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

웹페이지를 보는 것은 인간입니다. 웹페이지를 보는 사용자에게 웹페이지에서 전달하고자 하는 내용을 잘 전달려면 어떻게 보이는지도 중요한 요소입니다. 예를 들어, 문장 속에 중요한 부분은 색을 바꾸거나 굵게 하는 등 보기 좋게 꾸미면 내용이 전달되기 쉬워집니다.

HTML 태그로 웹페이지의 외관을 지정할 수 있습니다. 예를 들어, HTML 태그의 font 요소는 문자의 폰트 종류와 크기를 지정할 수 있습니다. 다만, 일일이 폰트를 지정하는 작업은 매우 번거롭습니다.

웹사이트는 복수의 웹페이지(HTML 파일)로 구성되므로, 폰트를 변경할 때는 모든 웹페이지에서 변경해야만 합니다. 이런 작업은 매우 시간이 오래 걸립니다. 그래서, 현재는 폰트 등 문서의 전체적인 디자인을 스타일 시트로 따로 정의하는 것이 일반적입니다.

스타일 시트

스타일 시트란 문서의 레이아웃이나 문자의 폰트와 색 등 웹페이지의 디자인을 정의하는 방법입니다. 스타일 시트를 기술하기 위한 CSS(Cascading Style Sheets)라고 불리는 언어가 있습니다.
스타일 시트는 HTML 파일 안에 기술할 수도 있지만, 대게 HTML 파일과는 별도로 스타일 시트 파일을 작성합니다. HTML 파일 자체에는 문서의 헤드라인이나 단락등 구조와 그 내용만 기술해 두고, 디자인은 스타일 시트를 읽어오는 식으로 문서의 구조와 디자인을 분리시킵니다.

스타일 시트를 사용하면, 웹페이지의 디자인도 간단히 변경할 수 있게 됩니다. 웹페이지는 메인 콘텐츠 이외에 헤더와 푸터, 메뉴 등 여러 가지 콘텐츠로 구성되어 있습니다. 웹페이지를 구성하는 콘텐츠의 레이아웃을 변경하고 싶을 때에는 스타일 시트를 변경하기만 하면 됩니다.

Point

스타일 시트로 웹페이지의 디자인을 지정할 수 있다.
스타일 시트를 이용하면 웹페이지의 디자인을 간편하게 변경할 수 있다.

웹사이트의 주소

지금까지 설명한 것처럼 웹사이트는 HTML 파일로 작성한 웹페이지의 집합입니다. 그리고 웹사이트를 볼 때는 웹페이지의 HTML 파일을 다운로드해서 웹브라우저로 표시합니다. 웹사이트를 보기 위해서는 도대체 어느 웹페이지 파일을 보고 싶은지 지정해야만 합니다. 전송받고 싶은 웹페이지를 지정하는 것이 웹사이트의 주소입니다.

URL의 의미

웹사이트 주소는 주로 'http://'로 시작되는 문자열로, URL(Uniform Resource Locator)이라고 불립니다.

URL은 'http://www.n-study.com/network/index.html'처럼 기술합니다. 맨앞의 http는 스킴이라고 해서, 웹브라우저가 웹서버의 데이터에 접속하기 위한 프로토콜을 나타냅니다. 보통은 http이지만, https나 ftp 등을 이용하기도 합니다. 콜론(:) 뒤에는 파일이 있는 장소를 나타내고, //는 그 뒤로 이어지는 부분이 호스트명임을 나타냅니다. 웹서버에 접속할 때는 호스트명에서 IP 주소로 변환하는 DNS의 이름해석이 필요합니다.

호스트 뒤에는 포트 번호가 이어지지만, 대부분 생략합니다. 생략한 경우에는 지정된 스킴에서 프로토콜의 웰노운 포트를 사용합니다. 호스트명 뒷부분이 웹서버 어디에 목적으로 하는 파일이 있는지 나타내는 경로입니다.

이 URL은 'www.n-study.com'이라는 웹서버가 인터넷에 공개한 디렉터리 'network'안에 있는 'index.html'이라는 파일을 'HTTP'로 전송하도록 요청합니다.