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

DAY 11

🔖 오늘 읽은 범위 :

⭐️01/19(월) 진도표 알림
✅공부 내용: 08 CSS 박스 모델(1)
✅ 쪽수: 240~261쪽

---

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

CSS 박스 모델

• 웹 문서의 내용을 박스 형태로 정의하는 방법.
• 마진, 테두리, 패딩 등등의 개념 ⇒ CSS 에서 자주 사용하는 것으로 잘 기억하자.

블록 레벨 요소와 인라인 레벨 요소

• 박스 모델 나열 방법이 달라지는 기준.
• 블록 레벨 요소
  • 태그를 사용해 요소를 넣을 때 혼자 한 줄을 차지하는 것.
  • 해당 요소 너비가 100% 임.
  • 양측에 다른 요소가 올 수 없음.
  • ex) <h1>, <div>, <p> 등등
• 인라인 레벨 요소
  • 한 줄을 차지 하지 않음.
  • 영역을 콘텐츠 만큼만 차지 함.
  • 나머지 공간에 다른 요소가 들어옴.
  • ex) <span>, <img>, <strong>

박스 모델의 기본 구성

• 블록 레벨 요소, 인라인 레벨 요소 모두 박스 형태.
• 스타일 시트에서 박스 형태인 요소를 박스 모델(box model) 요소라고 함.
• 구성 요소
  • 콘텐츠 영역
  • 패딩 : padding ; 박스와 콘텐츠 영역 사이의 여백.
  • 테두리 : border ; 박스의 테두리.
  • 마진 : margin ; 여러 박스 모델 사이의 여백.
  • 기타 등등.
• 패딩, 테두리, 마진 ⇒ 상하좌우 방향의 스타일을 따로 설정.
• 인라인 레벨 요소는 마진과 패딩이 정확하게 적용되지 않음.
• 웹 브라우저에서 각자 미리 지정한 기본 스타일 때문에 마진 여백이 할당됨.
• 보는 방법
  • 페이지를 열고 → 보려고 하는 요소에 마우스 오른쪽 버튼 클릭 → ‘검사’ 항목 선택 → 개발자 도구에서 ‘계산됨’ 탭 선택하면 박스 모델이 그림으로 표시 됨.

콘텐츠 영역 크기 지정 : width, height

• 너비는 width, 높이는 height
• 속성 값
  • 크기 : 크기 값을 px, em 단위로 지정하는 방식.
  • 백분율 : 부모 요소 기준으로 지정.
  • auto : 콘텐츠 크기 양에 따라 자동 결정. 기본값.

    .box1 {
      width: 400px; /* 너비 지정 */
      height: 100px; /* 고정 높이 지정 */
    }

    /* 웹 브라우저 창 크기에 따라 너비 크기가 달라짐. */
    .box2 {
      width: 70%; /* 부모 요소의 너비의 70% */
      height: 100px; /* 고정 높이 지정 */
    }

박스 모델 크기 계산 : box-sizing

• width, hegith 는 콘텐츠 영역 크기를 가리킴.
• 실제 박스 모델의 크기 = 콘텐츠 영역 크기 + 테두리 사이 여팩(패딩) + 테두리 두께
• 매번 패딩과 테두리 값을 계산해서 박스 모델 크기를 넣어야 한다는 건 너무 힘들다‼️⇒ box-sizing 의 필요성
• 속성값
  • border-box : 패딩과 테두리를 포함해서 너빗값을 지정.
  • content-box : 콘텐츠 영역만 너빗값을 지정. 기본값.border-box 를 할 경우, 패딩과 테두리를 포함하므로 컨텐츠 영역 크기는 다르게 나온다.

border-box 를 할 경우, 패딩과 테두리를 포함하므로 컨텐츠 영역 크기는 다르게 나온다.

• 요소 크기 계산을 쉽게 하기 위해서 box-sizing: border-box; 지정해 놓는 것이 좋다.

박스 모델에 그림자 효과 주기 : box-shadow

box-shadow: <수평거리> <수직거리> <흐림 정도> <번짐 정도> <색상> inset

• 수평 거리 : 그림자 가로 거리. 양수: 요소의 오른쪽, 음수: 요소의 왼쪽. 필수 속성.
• 수직 거리 : 그림자 세로 거리. 양수: 요소 아래쪽, 음수: 요소 위쪽. 필수 속성.
• 흐림 정도 : 진한 그림자 표시. 기본값 = 0, 값이 커지면 부드러운 그림자 표시. 음수값 없음.
• 번짐 정도 : 그림자 퍼짐 정도. 양수: 모든 방향으로 확대, 음수: 모든 방향으로 축소. 기본값 = 0.
• 색상 : 한 가지 지정 또는 공백으로 구분해서 여러 색상 지정. 기본값 = 검은색.
• inset : 그림자가 요소 안쪽으로 생김.

테두리 스타일 지정하기

• 테두리 스타일은 점선과 실선, 두께, 색상을 지정하고, 네 방향 각각 봐야 함.

박스 모델의 방향 살펴보기

• 4개의 방향 : 상하좌우
• 모두 동일하게 혹은 모두 다르게.
• top, right, bottom, left

테두리 스타일 지정 : border-style

• 기본값 : none
• 색상이나 두께를 정해도 스타일이 none 이라서 화면에 표시 되지 않으니 반드시 테두리 스타일 속성 값을 지정해야 함.

종류	설명
none	테두리가 없음. 기본값.
hidden	테두리를 감춘다. 표에서 border-collapse: collapse 일 경우 다른 테두리도 보이지 않는다.
solid	실선 표시
dotted	점선 표시
dashed	대쉬 직선 표시
double	이중선 표시. 이중선 사이 간격은 border-width 값
groove	창에 조각한 듯 표시. 입체 느낌.
inset	입체감 느낌. 안쪽으로 들어간 느낌.
outset	입체감 느낌. 바깥으로 튀어나는 느낌.
ridge	테두리가 튀어나온 돌출된 느낌.

 

테두리 두께 지정 : border-width

border-width: <크기> | thin | medium | thick

• 테두리 두께를 지정한다.
• px 크기를 직접 입력하거나, 예약어들 중에서 사용한다.
• 공백으로 구분해서 4가지 방향의 두께를 달리 지정 가능하다. 이 때 방향 순서는 top → right → bottom → left 이다.

테두리 색상 지정 : border-color

• 테두리 색상 지정을 4가지 방향에서 지정할 수 있다.
• 특정 테두리 방향에 색상을 지정하려면, ‘border-방향-color’ 로 특정 방향에 색상을 지정한다.
• .box1 { border-color: red; } .box2 { border-top-color: blue; border-left-color: red; }

테두리 스타일 묶어 지정하기 : border

• 스타일, 두께, 색상 속성을 모두 묶어서 표현.
• 4개 방향 각각 지정한다면? “border-방향” 형식으로 한다.
• 방향 모두 같은 스타일이라면? “border” 로 한다.

꼭짓점을 둥글게 만들기 : border-radius

border-radius: <크기> | <백분율>

• 크기 : 반지름 크기. px, em 단위로 수치 표시.
• 백분율 : 현재 요소의 크기를 기준으로 비율(%) 지정.
• 원 형태로 하려면? 너비나 높이의 50% 로 지정한다.

꼭짓점마다 따로 둥글게 처리하기

• 박스 모델에서 꼭짓점을 다르게 하려면 "border-<방향>-radius" 예약어를 사용하게 됨.
• 방향 키워드는 top-left, top-right, bottom-right, bottom-left (각각 좌상단, 우상단, 우하단, 좌하단)

.corner {
  border: 2px solid black;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

💡꼭짓점 타원형으로 만들기

/* 꼭짓점을 타원 형태로 만들기 */
border-radius: <가로 반지름> / <세로 반지름>;
/* 특정 꼭짓점만 타원 형태로 만들기 */
border-위치-radius: <가로 반지름> / <세로 반지름>;

/* example */
div {
  width:200px;
  height:100px;
  display:inline-block;
  margin:15px;
  background:#ffd800;
  border:2px solid #222;
}
/* 네 군데 꼭짓점을 똑같은 크기로 라운딩 */
.round1{
  border-radius : 50px/30px;
}
/* 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩 */
.round2{
  border-bottom-right-radius : 50% 30%;
}
/* 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩 */
.round3{
  border-top-left-radius: 50px 30px;
}
/* 값이  하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩  */
.round4{
  border-bottom-left-radius: 30px;
}

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

• 박스 모델; 한 줄 전체 영역이냐, 콘텐츠 영역만이냐!
• 마진, 패딩을 보면서 안드로이드 뷰 속성을 여기서 가져온 것 같다.

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

• https://www.w3schools.com/css/default.asp ⇒ CSS Tutorial 있음. 같이 보면 좋아~

---

🤟소감 3줄 요약

• 왜 이렇게 날씨가 춥냐고…
• 고구마는 맛있어 🍠
• 힘내자~