[CSS] 2. CSS 박스모델 및 글자 관련 스타일

1. CSS 박스모델

2. 글자 관련 스타일

---

1. CSS 박스모델

1.1. 레이아웃(layout)이란?

레이아웃(layout)은 배치를 의미하며, 웹 문서에서 각 요소를 효율적으로 배치하기 위해 박스형태로 구성한다.

이를 CSS 박스 모델이라고 하는데 여기에는 실제 내용이 들어가는 컨텐츠 영역, 테두리, 여백으로 구성된다.

박스 모델은 블록 요소인지 인라인 요소인지에 따라 나열방법이 달라진다.

• block 요소 : 혼자 한줄을 차지하는 것 (해당 요소의 너비 100%)
  • div, h1, p 태그 등
• inline 요소 : 영역만큼만 영역 차지
  • span, img, strong 태그 등

1.2. 박스 모델의 기본 구성

(1) content영역: 요소의 내용이 작성되어지는 영역

• width/height 속성을 통해 content 영역의 사이즈를 지정한다.
  (px, em로 크기 지정 가능 / %로 브라우저 크기에 따라 지정 가능)

(2) padding 영역: content 영역과 border 영역의 사이

(3) border 영역: 요소의 테두리 영역

• content 영역보다 바깥 쪽에서 content를 감싸고 있다.

4) margin 영역: 다른 요소와의 간격을 나타내는 영역

1.3. display 속성

• block : 요소를 block요소로 만드는 속성
  • 한 줄 단위로 영역을 차지하므로 화면을 행으로 분할 (크기 조정 가능)
• inline : 요소를 inline요소로 만드는 속성
  • 컨텐츠 영역만큼만 차지하므로 화면을 열로 분할 (가로길이 지정 불가능)
• inline-block : inline의 수평분할 기능과 block요소의 크기 조정이 결합된 상태.(크기 조정 가능)
• none : 화면에 요소를 보여주지 않게 하는 속성 (팝업 등)
• flex : 요소에 정렬되는 방향이나 간격을 유연하게 처리하는 속성
• display : 속성값;

---

영역 순서대로 빨 주 노 초 파 순

(1) block : 요소를 블럭 요소로 변경

<span class="area1 block">1번째 영역</span><span class="area2 block">2번째 영역</span><span class="area3 block">3번째 영역</span><span class="area4 block">4번째 영역</span><span class="area5 block">5번째 영역</span>

.block { 
    border: 1px solid black;
    width: 80px;
    height: 10px;
    color: white;

    display: block;
}

inline 레벨 요소	display: block

|

(2) inline : 요소를 inline요소로 변경

<div>
	<div class="area1 inline" 1번째>1번째 영역</div>
	<div class="area2 inline" 2번째>2번째 영역</div>
	<div class="area3 inline" 3번째>3번째 영역</div>
	<div class="area4 inline" 4번째>4번째 영역</div>
	<div class="area5 inline" 5번째>5번째 영역</div>
</div>

.inline {
    display:inline;
}

block 레벨 요소	display: inline

(3) inline-block : inline의 수평분할 + 블럭의 크기 조정 가능 (마진 패딩 지정 가능)

<div class="area1 block inline-block">1번째 영역</div>
<div class="area2 block inline-block">2번째 영역</div>
<div class="area3 block inline-block">3번째 영역</div>
<div class="area4 block inline-block">4번째 영역</div>
<div class="area5 block inline-block">5번째 영역</div>

.inline-block {
    display: inline-block;
}

block 레벨 요소	display: inline-block

display 설정을 통한 화면 분할 예제

1. 상하 2분할 : block

<div id="container1">
        <div class="div-1"></div>
        <div class="div-1"></div>
    </div>

#container1 {
    border: 1px solid black;
    background-color: red;
    width: 100px;
    height: 200px;
    display: block;
}

#container1 > .div-1:first-of-type {
    height: 30%;
}

#container1 > .div-1:last-of-type {
    background-color: blue;
    height: 70%;
}

2. 좌우 2분할 : inline-block

<div id="container3">
	<div class="div-3"></div><div class="div-3"></div>
</div>

#container3 {
    border : 1px solid black;
    width: 150px;
    height: 150px;
}

.div-3 {
    width: 50%;
    height: 100%;
    display: inline-block;
}

#container3 > .div-3:first-child {
    background-color: beige;
    
}

#container3 > .div-3:last-child {
    background-color: brown;
}

상하 2분할	좌우 2분할

(4) none : 요소는 존재하지만 화면에는 보이지 않는다.

• none과 비슷한 속성들

종류	설명
display: none	html 상으로 요소는 존재하는데 출력화면에서는 보이지 않음 (영역 차지하지 않음)
visibility:hidden;	요소를 투명하게 변경 (영역은 차지)
opacity: n;	0~1 사이의 값으로 투명도 설정 (0은 visibility:hidden과 동일)

<div class="div-4">test</div>
<div class="div-4" id="none">test</div>
<div class="div-4">test</div>

#none {
    background-color: hotpink;

    /* display: none => html 상으로 요소는 존재하는데 출력화면에서는 보이지 않음
                        (영역도 차지하지 않음)  */
    /* display : none;  */

    /* 요소를 투명하게 변경
       (영역은 차지한다.) -> none과의 차이점  */
    /* visibility: hidden;  */

    /* 투명도 설정(0~1 사이의 값) 
       (opacity : 0 은 visibility: hidden과 동일) */
    opacity : 0;
}

display : none	visibility: hidden	opacity: 0

---

2. 글자 관련 스타일