요소 특성 변경 display
요소가 가지고 있는 inline, block 등 기본 성격을 변경할 수 있다.
<display>
- inline : 요소의 성격을 inline으로 변경
- block : 요소의 성격을 block으로 변경
- inline-block : 요소의 성격을 inline-block으로 변경. 인라인과 블록의 성격을 모두 가지며 인라인처럼 띄어쓰기, 줄바꿈 인식. line-height 값, width/height 값을 가질 수 있다.
- * 가로 중앙 정렬의 경우 인라인, 블록 적용 방식이 다 가능하나 띄어쓰기가 있는 경우 인라인 방식으로 정렬하는 것이 더 편하다. 'text-align:center'
- 상속되지 않으며 해당 요소에만 적용.
요소 숨김 visibility, opacity
<visibility>
- visible : 컨텐츠가 보임 *기본값
- hidden : 브라우저 영역은 남으나 컨텐츠만 숨김.
<opacity>
- 불투명도 조절. 자식에게 영향을 주며, 0~1까지의 값을 부여 가능하다.
요소의 실제 크기 측정
블록 요소의 실제 크기
- 블록 요소의 가로 크기 = width + margin-left,right + padding-left,right + border-left,right
- 블록 요소의 세로 크기 = height + margin-top,bottom + padding-top,bottom + border-top,bottom
- * outline의 경우 보여지는 크기는 커보일 수 있으나 실제 컨텐츠 크기에 영향을 끼치지 않으므로 계산에 포함 x
요소의 크기 계산 방식 box-sizing
<box-sizing: content-box, border-box>
- 요소의 크기 계산 방식을 설정하는 태그로 상속되지 않는다
- content-box : 기본값으로 width + margin + padding + margin 을 모두 계산한다.
- border-box : width,height의 값에 padding과 border의 값이 포함된다. 즉 width / height+margin 값만 계산한다.
'CSS' 카테고리의 다른 글
| [CSS] position (0) | 2022.10.21 |
|---|---|
| [CSS] 테이블 스타일 table-style (0) | 2022.10.19 |
| [CSS] 넘치는 컨텐츠 제어 <overflow> <overflow-x, y> (0) | 2022.10.14 |
| [CSS] 테두리(border), 패딩(padding), 마진(margin) (0) | 2022.10.13 |
| [CSS] 가로 세로 영역 제어 width, height (0) | 2022.10.12 |