[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 08 CSS 박스 모델(2)

DAY 12

🔖 오늘 읽은 범위 :

⭐️01/20(화) 진도표 알림
✅공부 내용: 08 CSS 박스 모델(2)
✅ 쪽수: 262~287쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

여백을 조절하는 속성

요소 주변의 여백 설정 : margin

• 마진(margin) : 요소 주변의 여백
• 박스 모델 4개 방향 적용.
• margin-<방향> 예약어로 특정 방향 지정.

/* 
    크기: 너비 또는 높이. px, em 단위.
    백분율: 박스모델을 포함한 부모 요소 기준으로 너비 또는 높이를 퍼센트로 지정.
    auto: display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정.
 */
margin: <크기> | <백분율> | auto

• margin 속성에서 속성 값을 여러 개 지정 가능. 값이 여러 개이면 top → right → bottom → left 순으로 적용(시계 방향).

#margin1 {
  margin:50px; /* 상하좌우 모두 적용 */
  background-color:#f99;
}
#margin2 {
  margin:30px, 50px; /* 위아래 30, 좌우 50 적용 */
  background-color:#9f9;
}
#margin3 {
  margin:30px 20px 50px; /* 위 30, 좌우 20, 아래 50 적용 */
  background-color:#99f;
}
#margin4 {
  margin:30px 50px 30px 50px; /* 위 30, 우 50, 아래 30, 좌 50 적용 */
  background-color:#ff9;
}
#margin5 {
  margin:40px 10px 30px 60px; /* 위 40, 우 10, 아래 30, 좌 60 적용 */
  background-color:#9ff;
}

margin 속성을 이용한 가운데 정렬하기

• 좌우 마진을 auto 로 하면 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 균등하게 계산해서 적용 됨.

<style>
  /* 마진을 사용해 수평으로 중앙 정렬하기 */
  div {
    width:200px;
    height:100px;
    border:1px solid #222;
    margin-left: auto;
    margin-right: auto;
  }
</style>

마진 중첩 이해하기

• 마진 중첩(margin overlap)
  • 마진 상쇄(margin collapse)
  • 세로로 배치 된 요소들의 마진이 서로 만나면 마진이 큰 쪽으로 겹쳐지는 문제.
  • 박스 모델에서 마진을 지정할 때 주의 해야 함.
• 여러 요소를 세로로 배치할 때, 위, 아래 마진이 서로 만날 때 큰 마진 값으로 합쳐지는 것 ⇒ 중간 마진이 지나치게 커지는 걸 방지하기 위한 것.
• 왼쪽 오른쪽 마진이 만날 경우에는 해당되지 않음.

콘텐츠와 테두리 사이의 여백 : padding

• 패딩 padding
  • 콘텐츠 영역과 테두리 사이의 여백
• 패딩 지정 방식은 마진과 거의 비슷함.

#padding1 {
    padding: 20px;
}
#padding2 {
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 80px;
}
#padding3 {
    padding: 20px 40px 60px 80px;
}

패딩과 마진으로 버튼 만들기

<style>
  /* 박스 모델에 버튼 스타일 지정하기 */
  button {
    padding: 10px 20px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 25px;
  }

  button:hover {
    background-color: #e0e0e0;
  }
</style>

웹 문서의 레이아웃 만들기

• 박스 모델의 두가지 특성을 필요할 때 바꿔서 사용할 수 있음.
  • 블록 레벨 특성
  • 인라인 레벨 특성

블록 레벨 ↔ 인라인 레벨 : 서로 바꾸는 display 속성

• 웹 요소를 화면에 어떤 모양으로 보여 줄지 지정하는 속성.

• 자주 사용하는 속성

  종류	설명
  block	블록 레벨 요소로 표시한다.
  inline	인라인 레벨 요소로 표시한다.
  inline-block	인라인 레벨처럼 나란히 배치. 하지만 블록 레벨처럼 너비와 높이 지정.
  none	화면에 표시하지 않음. ❌

• 목록을 사용해서 가로 네비게이션 만들기

    nav ul li {
      display: inline-block; /* inline-block 속성 적용 */
      width: 100px; /* 너비 지정 */
      height: 40px; /* 높이 지정 */
      line-height: 40px; /* 수직 가운데 정렬 */
      text-align: center; /* 가로 가운데 정렬 */
      margin: 10px; /* 바깥 여백 */
      border: 1px solid #222; /* 테두리 */
      background-color: #eee; /* 배경색 */
    }

  • 높이나 너비, 마진을 사용하면서도(블록 레벨), 가로로 나란히 배치하는 것(인라인 레벨).
  • inside-block 으로 처리함으로서 가능.
  • 내용이 바뀐 게 아니므로 마크업을 손대지 않고 CSS 에서 처리할 수 있다.

왼쪽이나 오른쪽으로 배치 : float 속성

• 단락의 좌,우측에 이미지를 나란히 표시해야 할 경우.
• <p> 태그는 블록 레벨이라서 한 줄로 이미지 배치가 안 됨.
• float 속성을 이용해서 배치하고, 텍스트로 둘러싸기.
• 속성 : left, right, none

img {
  float: left; /* float 속성 적용 */
  margin-right: 50px; /* 오른쪽 여백 */
  margin-bottom: 10px; /* 아래 여백 */
}

float 속성을 사용해서 가로 배치하기

• float 속성을 사용해서 문서의 기본 흐름과 상관없이 자유롭게 배치 가능.
• 예전에는 웹 문서 전체 레이아웃을 float 속성으로 만들기도 했으나,
• 현재 플레스 박스 레이아웃, CSS 그리드 레이아웃 같은 문서 레이아웃 표준이 등장해서 잘 사용 안하기 시작함.
• 대부분 가로 메뉴는 <ul>, <li> 태그 + float: left; 속성 조합으로 가로 배치 함.

<style>
...
        #box1 {
            background: #ffd800;
            float: left; /* 왼쪽으로 떠 있게 */
        }

        #box2 {
            background: #0094ff;
            float: right; /* 오른쪽으로 떠 있게 */
        }
</style>

float 속성 해제 : clear 속성

• float 속성을 사용해 좌우 배치를 하면 → 그 이후에 넣는 다른 요소에도 동일한 속성이 전달 됨.
• 어느 순간 기본 흐름으로 바꾸기 위해서 사용하는 게 clear 속성.
• 속성 : left(left 해제), right(right 해제), both(모두 해제)

<style>
...
        .clear {
            clear: both;
            padding-top: 20px;
        }
</style>

<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia totam animi delectus nesciunt. Minus accusamus consequuntur inventore fugit culpa reiciendis dicta aliquam.</p>

display: inline-block vs float: left

💡display: inline-block 와 float: left 의 차이점

• 목록의 메뉴 항목을 가로 배치 할 경우, 둘 다 겉으로는 차이점이 없음.
• display: inline-block 은 가로로 배치하면서 마진과 패딩이 있음.
• float: left 는 요소에 기본 마진과 패딩이 없음. 그래서 필요하면 요소마다 지정해야 함.
• float 는 다른 요소에도 전달 되므로 사용 된 이후에 clear 속성으로 플로팅 해제를 해야 함.

웹 요소 위치 지정하기

• 원하는 위치에 이미지나 글씨를 넣는 게 쉽지 않음.
• position 속성을 사용해서 자유롭게 정할 수 있음.
• 자주 사용하지만 실수도 하기 쉬우니 꼼꼼하게 보자~

웹 요소 위치 정하기 : left, right, top, bottom

• 기준 위치 기준으로 요소의 위치를 지정.

    <style>
      *{
        margin:0;  /* 마진 초기화 */
        padding:0;  /* 패딩 초기화 */
      }
      p {
        width:300px;  /* 너비 - 300px */
        border:1px solid #ccc;  /* 테두리 - 1픽셀 회색 실선 */
        padding:10px;  /* 네방향 패딩 10px */
      }
      #pos1{
        position:absolute;  /* 포지셔닝 - absolute */
        left:50px;  /* 왼쪽에서 50px 떨어지게 */
        top:50px;   /* 위쪽에서 50px 떨어지게 */
      }
      #pos2 {
        position:absolute;  /* 포지셔닝 - absolute */
        right:100px;  /* 오른쪽에서 100px 떨어지게 */
        top:100px;  /* 위쪽에서 100px 떨어지게 */
      }
      #pos3 {
        position: absolute;  /* 포지셔닝 - absolute */
        left:100px;   /* 왼쪽에서 50px 떨어지게 */
        bottom:100px;  /* 아래쪽에서 100px 떨어지게 */
      }
    </style>

배치 방법 지정 : position 속성

• position 속성 값의 기준 위치 정의

  종류	설명
  static	문서의 흐름에 맞춰 배치한다. 기본값.
  relative	static 과 동일하나, 위치값을 지정할 수 있음.
  absolute	relative 값을 사용한 상위 요소 기준으로 위치 지정해서 배치.
  fixed	브라우저 창을 기준으로 위치 지정해서 배치.

• absolute 속성을 사용할 때 주의 할 점!!!

  • 부모 요소 중 relative 를 사용한 요소를 기준으로 위치를 결정함.
  • 없으면 상위 요소로 올라가서 찾아봄. 있을 때까지 상위 요소로 올라가서 찾아봄.
  • 어떤 요소에 absolute 속성을 사용하려면, 부모 요소에는 relative 라고 지정해야 원하는 대로 배치 할 수 있음.

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 여백, 레이아웃, 위치 등등 배치와 관련된 것들은 자주 사용하면서 접할 것 같다.
• 직접 이런 저런 속성 바꿔서 해보는 게 이해하기 쉽다.
• 정리한 것보다 더 많은 속성들이 존재함.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/position
• https://www.w3schools.com/cssref/pr_class_position.php

---

🤟소감 3줄 요약

• 요즘 너무 춥다. -14도.
• 피곤해…
• 속성들이 너무 많아서 다 알 필요보다는 책에서 주는 걸 받아 먹기로…히히