이 튜토리얼 시리즈는 초보자가 가장 간단한 지식부터 조금씩 배우고 발전하는 데 적합한 초급 튜토리얼입니다. 주로 예제에 중점을 두고 이론은 거의 없으므로 초보자가 빠르게 익히는 데 더 적합합니다. 아직 배우는 중이라 틀린 부분이나 누락된 부분이 있을 수 있으니 정정해주시길 바랍니다. 이 튜토리얼은 "CSS Website Layout Record"라는 책을 참조했으며, 저자에게 감사의 말씀을 전하고 싶습니다.
DIV+CSS를 잘 배우려면 먼저 HTML과 CSS에 대한 특정 지식이 있어야 합니다. 아직 이해하지 못했다면 이 강의를 먼저 듣고 이 튜토리얼을 공부하는 것이 좋습니다. 또한, 우리는 전통적인 테이블 레이아웃 사고 방식을 버려야 합니다. 그 이유는 이 튜토리얼을 공부하면서 천천히 깨닫게 될 것입니다. 준비가 되셨다면 시작해 보세요!
폭이 고정된 열 1개
폭이 고정된 열 1개는 기본의 기초이므로 이 섹션이 가장 먼저 시작하는 섹션입니다.
보기를 용이하게 하기 위해 레이아웃을 div의 배경색으로 연한 파란색으로 설정하고 border: 2px solid #A9C9E2;를 사용했습니다. 테두리를 하늘색으로 설정합니다. 배경색과 테두리의 속성은 이후 튜토리얼에서 설명하겠습니다.
고정 너비 레이아웃이므로 너비 속성을 300px, 높이 속성을 200px로 직접 설정하여 최종 효과를 확인하세요.