[CSS] CSS의 박스 모델

✔️ 인라인 요소와 블록 요소

• 모든 HTML 요소는 inline, block, inline-block 중 하나의 display 속성을 갖습니다.
  • inline : 글자를 개별적으로 꾸미는 서식에 관련된 태그들
    • <span>, <a>, <br>, <q>, <b>, <strong>, <mark>, <sub>, <sup>, <label>, <map>, <cite>, <abbr>, <time> 등
  • block : 레이아웃(목록, 제목, 테이블, 시맨틱)에 관련된 태그들
    • <div>, <p>, <blockquote>, <ul>, <ol>, <li>, <dl>, <td>, <dd>, <table>, <tr>, <td>, <th>, <h1~h6>, <hr>, <main>, <nav>, <header>, <footer>, <section>, <article>, <aside>, <figure>, <figcaption>, <summary>, <details>, <address>, <form> 등
  • inline-block : 이미지를 비롯한 대부분의 폼 요소 태그들
    • <img>, <input>, <button>, <textarea>, <select>, <video>, <audio>, <iframe> 등

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ 요소의 크기

📌 크기의 단위

• % : 기본 크기를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다.
• px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 설정합니다.
• em : 해당 폰트의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다. (1배 = 1em = 100%)
• rem : 최상위 태그(보통 html 태그)의 폰트 크기로 상대적인 크기를 설정합니다.
• vw, vh : 뷰포트 너비와 높이의 1/100 단위로 상대적인 크기를 설정합니다.
• vmin, vmax : 뷰포트의 너비와 높이에 따라 최대, 최소값을 지정해 상대적인 크기를 설정합니다.
• ex, ch : font-family의 의존하는 em, rem과 달리 폰트의 특정 수치를 기반하여 상대적인 크기를  설정합니다.

 

📌 크기 조절

• height, width : 요소의 높이와 너비를 설정합니다. (기본 설정값은 auto)
• max-width, max-height : 요소가 가질 수 있는 최대 너비와 높이를 설정합니다. (기본 설정값은 none)
• min-width, min-height : 요소가 가질 수 있는 최소 너비와 높이를 설정합니다. (기본 설정값은 0)

 

✔️ 박스 모델

• 모든 HTML 요소는 박스모양으로 구성되며 패딩(padding), 테두리(border), 마진(margin), 내용(content)로 구분합니다.
  • padding : 내용과 테두리 사이의 간격입니다. 눈에 보이지 않습니다.
  • border : 내용과 패딩 주변을 감싸는 테두리입니다.
  • margin : 테두리와 이웃하는 요소 사이의 간격입니다. 눈에 보이지 않습니다.
  • content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

 

📌 box 속성

• box-sizing : 너비와 높이 값에 padding과 border 값을 포함시킬지를 결정합니다.
  • border-box : border와 padding을 고려해 컨텐츠 크기를 맞춥니다.
    • 너비 = border + padding + 콘텐츠 너비
    • 높이 = border + padding + 콘텐츠 높이
    • 예를들어, width 200px padding 10px border 10px로 정의한다면 컨텐츠의 크기는 160px이 됩니다.
  • content-box : border와 padding을 고려하지 않고 컨텐츠 크기를 맞춥니다.
    • 너비 = 콘텐츠 너비
    • 높이 = 콘텐츠 높이
    • 예를들어, width 200px padding 10px border 10px로 정의한다면 컨텐츠의 크기는 200px이 됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

• box-shadow : 박스 요소에 그림자를 줄 수 있습니다.

<!-- 단축 속성 -->
box-shadow: (inset 여부) [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 border 속성

• border-style : 테두리를 다양한 모양으로 설정할 수 있습니다.
  • dotted : 점선
  • dashed : 약간 긴 점선
  • solid : 실선
  • double : 이중 실선
  • groove : 3차원인 입체적인 선 (border-color 속성값에 영향 받음)
  • ridge : 3차원인 능선효과가 있는 선 (border-color 속성값에 영향 받음)
  • inset : 3차원인 내지로 끼운 선 (border-color 속성값에 영향 받음)
  • outset : 3차원인 외지로 끼운 선 (border-color 속성값에 영향 받음)
  • none : 테두리 없음
  • hidden : 테두리가 있지만 표현되지 않음
• border-위치-style : top, right, bottom, left 부분에 개별적으로 스타일을 적용할 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

• border-width : 테두리의 두께를 설정합니다.
  • px, em 등뿐만 아니라 thin, medium, thick 예약어도 사용할 수 있습니다.
• border-color : 테두리의 색상을 설정합니다.
  • transparent 속성을 사용해 선을 투명하게 나타낼 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

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

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 overflow 속성

• overflow : 컨텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때 처리법을 지정합니다.
  • visible : 넘친 컨텐츠를 그대로 노출합니다. (기본값)
  • hidden : 넘친 컨텐츠를 숨깁니다.
  • scroll : 스크롤을 만듭니다.
  • auto : 사용자 에이전트에 의해 결정됩니다.
• overflow-x 와 overflow-y 를 통해 각각 설정할 수 있습니다.
• 또한, overflow에 2개의 값을 줌으로써 x, y를 한 번에 설정할 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 단축 속성

• border
  • border: [width] [style] [color];
• border-width, margin, padding
  • 1개 입력 : [공통]
  • 2개 입력 : [세로] [가로]
  • 3개 입력 : [위] [가로] [아래]
  • 4개 입력 : [위] [오른쪽] [아래] [왼쪽]
• border-radius
  • 1개 입력 : [공통]
  • 2개 입력 : [왼쪽 위, 오른쪽 아래] [왼쪽 아래, 오른쪽 위]
  • 3개 입력 : [왼쪽 위] [오른쪽 위, 왼쪽 아래] [오른쪽 아래]
  • 4개 입력 : [왼쪽 위] [오른쪽 위] [오른쪽 아래] [왼쪽 아래]