간략한 요약
이 비디오에서는 웹 문서 레이아웃을 만드는 데 필수적인 두 가지 CSS 속성, 즉 float 속성과 position 속성에 대해 설명합니다. float 속성을 사용하여 요소를 왼쪽이나 오른쪽으로 정렬하고, clear 속성을 사용하여 float의 영향을 해제하는 방법을 보여줍니다. 또한 position 속성을 사용하여 웹 요소의 위치를 정밀하게 제어하는 방법, 특히 static, relative, fixed, absolute 값의 차이점을 설명합니다.
float속성과clear속성을 사용하여 레이아웃을 구성하는 방법position속성의 다양한 값(static,relative,fixed,absolute)을 이해하고 사용하는 방법position: absolute를 사용할 때 기준점을 설정하기 위해 부모 요소에position: relative를 적용해야 하는 이유
박스 모델과 디스플레이 속성
블록 레벨 요소를 인라인 레벨 요소로 변경하여 가로 내비게이션을 만드는 방법을 설명합니다. 순서 없는 목록을 사용하여 메뉴를 만들 때, 목록은 기본적으로 블록 레벨 요소이므로 각 항목이 한 줄에 하나씩 표시됩니다. 이를 가로 메뉴로 만들기 위해 display 속성을 사용합니다. display: inline-block을 적용하면, 요소는 인라인 요소처럼 가로로 배치되면서도 블록 레벨 요소의 속성을 유지하여 내용과 테두리 사이의 여백을 설정할 수 있습니다.
플로트 속성
float 속성은 웹 요소를 문서의 왼쪽이나 오른쪽으로 "띄워서" 배치하는 데 사용됩니다. 이 속성을 사용하면 요소가 다른 요소 옆에 배치될 수 있으며, 사이드바와 같은 레이아웃 요소를 만들 때 유용합니다. float: left는 요소를 왼쪽에, float: right는 요소를 오른쪽에 배치합니다. float 속성은 다른 요소에 영향을 줄 수 있으므로, clear 속성을 사용하여 float의 영향을 해제할 수 있습니다. clear: left는 왼쪽 float의 영향을, clear: right는 오른쪽 float의 영향을, clear: both는 양쪽 float의 영향을 모두 해제합니다.
3단 레이아웃 만들기
float 속성을 사용하여 간단한 3단 레이아웃을 만드는 방법을 소개합니다. 헤더, 사이드바, 콘텐츠, 푸터로 구성된 레이아웃에서, 왼쪽 사이드바와 콘텐츠는 float: left를 사용하여 왼쪽에 정렬하고, 오른쪽 사이드바는 float: right를 사용하여 오른쪽에 정렬합니다. 푸터는 clear: both를 사용하여 float의 영향을 해제하고, 헤더와 푸터는 전체 너비를 채우도록 설정합니다.
포지션 속성 소개
position 속성은 웹 요소가 문서 내에서 어떻게 배치되는지를 결정합니다. position 속성과 함께 left, right, top, bottom 속성을 사용하여 요소의 위치를 지정할 수 있습니다. left는 요소의 왼쪽 테두리가 브라우저 창의 왼쪽 테두리에서 얼마나 떨어져 있는지를 나타내고, top은 위쪽 테두리가 브라우저 창의 위쪽 테두리에서 얼마나 떨어져 있는지를 나타냅니다.
포지션 속성의 종류
position 속성의 네 가지 값인 static, relative, fixed, absolute에 대해 설명합니다. static은 기본값으로, 요소가 문서에 나열된 순서대로 배치됩니다. relative는 요소의 원래 위치를 기준으로 left, right, top, bottom 속성을 사용하여 위치를 조정합니다. fixed는 요소의 위치를 브라우저 창을 기준으로 고정하며, 스크롤해도 위치가 변하지 않습니다. absolute는 요소의 위치를 가장 가까운 position: relative가 지정된 부모 요소를 기준으로 지정합니다.
포지션 앱솔루트 사용 예제
position: absolute를 사용하는 예제를 통해, 기준점이 되는 부모 요소에 position: relative를 지정해야 하는 이유를 설명합니다. position: absolute가 지정된 요소는 기본적으로 문서의 body를 기준으로 위치가 결정되지만, 부모 요소에 position: relative가 지정되면 해당 부모 요소를 기준으로 위치가 결정됩니다.
