CSS와 HTML의 개요와 기본구조 [미완]

개요
  「이 글은 실제 HTML과 CSS의 적용에 관해 알기쉽게 설명하는 것을 목적으로합니다. 따라서 불필요한 용어설명이나 세부사항은 언급하지 않습니다. 초보자가 이해할 수 있도록 하는데에 초점을 맞추기 때문에 때에따라서는 부정확한 내용이 있을 수 있습니다.」
  웹페이지를 만드는 것은 하나의 집을 짓는데에 비유할 수 있다. 건축가는 먼저 집이 들어설 터를 잡고 외벽을 세운다. 그 뒤에 방이 들어설 자리를 구상하여 각 방의 용도에따라 크기를 조절하며 뼈대를 세운다. 그런다음 용도에 맞게 벽지와 타일등을 선택하여 방을 꾸민다. 웹페이지도 이와 같이 생각 할 수 있다. 사용자는 먼저 웹페이지의 큰 틀이 될 컨테이너를 설정하고. 그 뒤에 컨테이너안에 집어넣을 여러 콘텐츠를 구상하여 각 콘텐츠의 용도에따라 크기를 조절하며 레이어를 구성한다. 그런다음 각 콘텐츠에 맞게 글씨체나 배경색등을 선택하여 레이어를 꾸민다.

여기서 뼈대를 세우는 과정이 HTML로 이루어지며 인테리어를 하는 과정이 CSS의 파트이다. HTML로 기본 뼈대를 설정하고 그 위에 CSS로 스타일을 입힌다고 생각하면 된다.

기본구조
  먼저 CSS로 특정스타일을 설정한 후 이름을 붙인다. 그런다음 HTML로 레이어를 구성하고 각 레이어에 맞게 CSS로 설정한 이름을 붙여준다. 이를테면 CSS로 다음과 같이 스타일을 설정한 후
배경스타일 - 물방울무늬
제목스타일 - 검은색 배경, 빨간색 글자, 큰 글씨
본문스타일 - 흰색 배경, 검은색 글자, 작은 글씨
HTML로 Container레이어와 그안에 포함되는 Header레이어와 Main-contents레이어를 생성한 뒤 다음과 같이 원하는 스타일을 지정해주면
Container - 배경스타일
Header - 제목스타일
Main-contents - 본문스타일
해당하는 레이어에 CSS로 설정한 값이 적용된다. HTML로도 스타일을 지정해 줄 수 있지만 이렇게 하는 이유는 같은 스타일의 레이어를 여러개 만들 경우 매번 해당하는 스타일을 지정하는 것 보다 CSS를 이용하는 것이 추후 수정