[CSS] 레이아웃과 포지셔닝 (float, position, display 등)

레이아웃과 포지셔닝은 CSS를 사용하여 웹 페이지의 요소들을 배치하는 방법을 제어하는 기술입니다. 웹 페이지의 레이아웃을 구성하는데는 여러가지 방법과 속성들이 존재하며, 주요한 레이아웃 기법과 포지셔닝 속성들을 소개하겠습니다.

---

1. 블록 레이아웃(Block Layout)과 인라인 레이아웃(Inline Layout)

블록 레이아웃은 HTML 요소들을 수직으로 배치하는 방식으로, 기본적인 레이아웃 방법입니다. 블록 레이아웃은 <div>, <p>, <h1> 등의 블록 요소들이 기본적으로 가지는 레이아웃 속성입니다. 각 요소는 새로운 라인에서 시작하며, 부모 요소의 가로 영역을 차지합니다.

인라인 레이아웃은 HTML 요소들을 수평으로 배치하는 방식으로, <span>, <a>, <strong> 등의 인라인 요소들이 기본적으로 가지는 레이아웃 속성입니다. 인라인 요소들은 라인 안에서 콘텐츠의 일부분으로 처리되며, 너비와 높이를 가질 수 없습니다.

/* 블록 레이아웃과 인라인 레이아웃 예제 */
div {
    /* 블록 레이아웃 요소 스타일링 */
    display: block;
}

span {
    /* 인라인 레이아웃 요소 스타일링 */
    display: inline;
}

---

2. 포지셔닝(Positioning)

포지셔닝은 HTML 요소들을 원하는 위치로 이동시키는 방법입니다. 주로 position 속성과 함께 사용됩니다. position 속성은 다음과 같은 값들을 가질 수 있습니다.

• static: 기본값으로, 요소들을 일반적인 블록 레이아웃에 따라 배치합니다.
• relative: 원래의 위치를 기준으로 상대적으로 이동시킵니다.
• absolute: 부모 요소 중에서 position: relative가 지정된 요소를 기준으로 이동시킵니다.
• fixed: 브라우저 창을 기준으로 이동시키며 스크롤에 상관없이 항상 같은 위치에 고정됩니다.

/* 포지셔닝 예제 */
div {
    position: relative;
    top: 50px;
    left: 100px;
}

p {
    position: absolute;
    top: 20px;
    right: 30px;
}

button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

---

3. 부유(Floating)

float 속성은 요소를 왼쪽 또는 오른쪽으로 부유시킵니다. 부유된 요소는 다른 블록 요소가 그 주위로 감싸지게 됩니다. 주로 텍스트 주위에 이미지를 부유시킬 때 사용합니다.

/* 부유(Floating) 예제 */
img {
    float: left;
}

/* 부유된 이미지 주위로 텍스트가 감싸집니다. */

---

레이아웃과 포지셔닝은 웹 페이지를 디자인하는데 매우 중요한 요소입니다. 블록 레이아웃과 인라인 레이아웃을 적절히 활용하여 요소들을 배치하고, 포지셔닝 속성을 이용하여 원하는 위치로 이동시킬 수 있습니다. 또한, 부유 속성을 활용하여 이미지와 텍스트의 배치를 조정할 수 있습니다. 웹 페이지의 디자인과 레이아웃을 더욱 다양하고 효과적으로 구성하고자 한다면 레이아웃과 포지셔닝을 숙지하는 것이 중요합니다. 계속해서 다양한 기법을 익혀가며 멋진 웹 페이지를 개발해보시기 바랍니다!