요소의 두 가지 성격: 블록(Block)과 인라인(Inline)
모든 HTML 요소는 저마다의 기본 표시 방식을 가지며, 크게 블록과 인라인으로 나뉜다.
블록 요소 (Block Elements) 🧱
블록 요소는 마치 벽돌처럼 공간을 쌓아나가는 방식으로 배치된다.
- 특징: 항상 새로운 줄에서 시작하며, 주어진 공간의 가로 너비 전체를 차지한다.
- 크기 조절:
width,height,margin,padding속성을 사용하여 너비, 높이, 여백을 자유롭게 조절할 수 있다. - 예시:
<div>,<p>,<h1>~<h6>,<ul>,<li>
인라인 요소 (Inline Elements) ✍️
인라인 요소는 문장 안의 단어처럼, 흐름에 따라 배치된다.
- 특징: 새로운 줄에서 시작하지 않고, 자신의 콘텐츠만큼만 공간을 차지하며 다른 인라인 요소와 같은 줄에 나란히 배치된다.
- 크기 조절:
width와height속성이 적용되지 않는다.margin과padding은 좌우 여백만 정상적으로 조절할 수 있다. - 예시:
<span>,<a>,<strong>,<img>
크기를 결정하는 단위들 📏
CSS에서는 요소의 크기를 지정하기 위해 다양한 단위를 사용할 수 있다.
px (픽셀): 절대적인 고정 단위
px은 화면의 픽셀을 기준으로 하는 고정된 크기 단위이다. 화면 크기가 변해도 요소의 크기는 변하지 않기 때문에, 정밀한 크기 지정이 필요할 때 사용된다.
div {
width: 200px; /* 너비를 200픽셀로 고정 */
border: 1px solid black; /* 테두리 두께를 1픽셀로 고정 */
}vw, vh (뷰포트 단위): 유연한 반응형 단위
vw(Viewport Width)와 vh(Viewport Height)는 사용자의 브라우저 화면(뷰포트) 크기에 따라 변하는 상대적인 크기 단위이다. 반응형 웹 디자인에 매우 유용하다.
vw: 뷰포트 너비의 1%를 의미한다.50vw는 화면 너비의 절반이다.vh: 뷰포트 높이의 1%를 의미한다.100vh는 화면 높이 전체를 꽉 채운다.
.section {
width: 100vw; /* 화면 너비 전체를 사용 */
height: 50vh; /* 화면 높이의 절반을 사용 */
}상속과 상대적 크기: % 단위의 작동 방식 ⛓️
백분율(%) 단위 역시 상대 단위이지만, vw/vh와는 기준이 다르다. % 단위는 부모 요소를 기준으로 크기가 결정된다.
예제 코드
<style>
.parent {
width: 80%; /* 뷰포트 너비의 80% */
border: 2px solid blue;
}
.child {
width: 50%; /* 부모 너비(80%)의 50% */
border: 2px solid red;
}
.grandchild {
width: 100px; /* 고정값 100px */
border: 2px solid green;
}
</style>
<div class="parent">
Parent (80%)
<div class="child">
Child (Parent의 50%)
<div class="grandchild">
Grandchild (100px)
</div>
</div>
</div>동작 원리
- .parent:
width: 80%는 자신의 부모(여기서는<body>)인 **뷰포트 너비의 80%**를 차지한다. - .child:
width: 50%는 자신의 부모인 **.parent너비의 50%**를 차지한다. 결과적으로 뷰포트 전체 너비의 40% (80% * 50%) 크기를 갖게 된다. - .grandchild:
width: 100px는px단위이므로, 부모의 크기와 상관없이 항상 고정된 100px 너비를 유지한다.
'프레임 워크 > html&css' 카테고리의 다른 글
| [CSS] relative,absolute 정리 (0) | 2024.07.08 |
|---|---|
| [CSS] FLEX 속성 정리 (0) | 2024.07.08 |
| [CSS] Box-sizing 정리 (0) | 2024.07.08 |