웹 페이지 레이아웃 정리: 박스 모델, 마진, 패딩, 위치 속성 활용

박스 모델(Box Model)

HTML 요소는 기본적으로 박스 모델(Box Model)로 구성되며, 이는 요소의 크기와 배치를 관리하는 데 중요한 개념입니다. 박스 모델은 다음과 같은 구성 요소로 이루어집니다:

1. 콘텐츠 영역(Content): 실제 내용이 들어가는 영역입니다.
2. 패딩(Padding): 콘텐츠 영역과 테두리 사이의 여백입니다.
3. 테두리(Border): 요소의 경계선입니다.
4. 마진(Margin): 요소와 다른 요소 사이의 공간입니다.

---

속성들

1. 패딩(Padding):

• 콘텐츠 영역과 테두리 사이의 여백을 설정합니다.
• 예시:

  padding: 20px;

2. 테두리(Border):

• 요소의 경계선을 설정합니다.

• border-style: 테두리 스타일을 지정합니다 (solid, dotted, dashed 등). 네 방향에 각각 다른 값을 줄 수 있습니다.

• border-color: 테두리 색상을 지정합니다.

• border-radius: 테두리의 모서리를 둥글게 만들 수 있습니다.

  • 둥근 이미지를 만들려면 border-radius: 50%를 적용할 수 있습니다.

  border: 1px solid black;
  border-radius: 50%;

3. 마진(Margin):

• 요소와 다른 요소와의 간격을 조절할 때 사용됩니다.

• 마진 중첩 현상에 주의해야 합니다: 요소들이 세로로 배치될 경우, 상하 마진이 겹쳐지며 더 큰 값이 적용됩니다.

  margin: 10px auto; /* 좌우 중앙 배치 */

4. 크기 지정:

• width와 height: 요소의 너비와 높이를 픽셀(px) 또는 퍼센트(%)로 지정합니다.

  width: 200px;
  height: 100px;

• box-sizing: 콘텐츠 영역만 너비/높이를 지정할지, 패딩과 테두리까지 포함할지를 결정하는 속성.

  • 기본값은 content-box로, 콘텐츠 영역만 너비/높이를 지정합니다.
  • border-box를 사용하면 테두리와 패딩까지 포함하여 전체 너비를 계산합니다.

  box-sizing: border-box;

5. 그림자 설정:

• box-shadow: 요소에 그림자를 추가하여 입체감을 줄 수 있습니다.

  box-shadow: 2px 2px 5px gray;

---

레이아웃 및 배치

1. 메뉴 태그 (<nav>)

• 주로 내비게이션 메뉴를 만들 때 사용됩니다.

2. display 속성

• 요소의 배치 방식을 결정합니다.
• 블록 레벨 요소: 화면에서 전체 너비를 차지합니다 (<div>, <p>, <h1> 등).
• 인라인 레벨 요소: 내용의 너비만큼 차지하고, 옆에 다른 요소들이 올 수 있습니다 (<span>, <a> 등).

3. 중앙 정렬:

• 텍스트나 요소를 중앙에 배치하려면, margin: auto와 width 값을 설정합니다.

• 텍스트 중앙 정렬: line-height와 height 값을 같게 설정하면 텍스트가 수직 중앙 정렬됩니다.

  line-height: 50px;
  height: 50px;

4. float 속성

• float: 이미지를 왼쪽이나 오른쪽에 배치하고 옆에 텍스트를 배치하고 싶을 때 사용됩니다.

  float: left;

• clear: float의 영향을 받지 않게 하려면 clear 속성을 사용합니다.

  clear: both;

---

위치 지정 (Positioning)

1. position 속성

• static: 기본값. 요소는 일반적인 흐름에 따라 배치됩니다.
• relative: 요소를 자신의 원래 위치를 기준으로 상하좌우 이동할 수 있습니다.
• absolute: 부모 요소나 첫 번째 relative 요소를 기준으로 정확한 위치에 배치됩니다.
• fixed: 스크롤 시에도 고정된 위치에 배치됩니다 (예: 고정 메뉴).

2. 좌표 속성 (left, right, top, bottom)

• position이 relative, absolute, fixed일 때 사용됩니다.

• 요소의 위치를 지정합니다.

  position: absolute;
  top: 10px;
  left: 20px;

3. relative와 absolute의 관계

• absolute는 가장 가까운 relative 요소를 기준으로 위치가 정해지므로, absolute와 relative는 함께 사용됩니다.

  .container {
    position: relative;
  }
  
  .child {
    position: absolute;
    top: 10px;
    left: 10px;
  }

---

요약

• 박스 모델은 콘텐츠, 패딩, 테두리, 마진으로 구성되며, 각각의 속성을 사용하여 요소의 크기와 간격을 설정합니다.
• box-sizing을 통해 콘텐츠 영역만 너비를 지정할지, 테두리까지 포함할지 설정할 수 있습니다.
• position 속성과 좌표 속성을 사용하여 요소를 정확한 위치에 배치할 수 있습니다. relative와 absolute는 함께 사용하는 것이 중요합니다.
• 마진 중첩 현상에 유의하며, 요소 간 간격을 설정할 때 마진과 패딩을 적절히 활용합니다.