CSS 레이아웃을 사용하려면 웹 사이트 레이아웃을 전체적으로 생각한 다음 조각을 가져 와서 정리해야합니다. CSS로 간단한 3 열 레이아웃을 만드는 법을 배워보십시오.
01 of 09
레이아웃 그리기
용지 또는 그래픽 프로그램 에서 레이아웃을 그릴 수 있습니다. 철사 프레임 또는 더 광범위한 디자인을 이미 염두에 둔 경우 사이트를 구성하는 기본 상자로 단순화하십시오. 이 기사와 함께 제공되는이 디자인에는 머리글과 바닥 글뿐만 아니라 주 컨텐츠 영역에 세 개의 열이 있습니다. 자세히 보면 세 열이 너비가 같지 않음을 알 수 있습니다.
레이아웃을 가져 오면 치수에 대한 생각을 시작할 수 있습니다. 이 예제 디자인은 다음 기본 치수를 갖습니다.
- 최대 너비가 900 픽셀 이하 여야합니다.
- 왼쪽에 20 px 거터
- 행과 열 사이에 10 픽셀
- 250px, 300px 및 300px 크기의 열
- 상단 행의 높이는 150 픽셀입니다.
- 하단 행의 높이는 100px입니다.
02 of 09
기본 HTML / CSS 작성 및 컨테이너 요소 만들기
이 페이지는 유효한 HTML 문서이므로 빈 HTML 컨테이너로 시작하십시오.
<제목> 제목없는 문서 < 제목>기본 CSS 스타일을 추가 하여 페이지 여백, 테두리 및 패딩 을 제로로 만듭니다. 새 문서에는 다른 표준 CSS 스타일 이 있지만 이러한 스타일은 깨끗한 레이아웃을 얻는 데 필요한 최소한의 스타일입니다. 문서 머리에 추가하십시오.