CSS에서 블록 요소와 인라인 요소, 그리고 px, vw, vh 단위에 대한 정리
블록 요소 (Block Elements)
- 특징: 블록 요소는 기본적으로 새로운 줄에서 시작하며, 가로 방향으로 전체 너비를 차지함.
- 예:
<div>,<h1> ~ <h6>,<p>,<ul>,<ol>,<li>등. - 스타일링: 블록 요소는
width,height,margin,padding속성을 사용해 크기와 위치를 조절할 수 있음.
인라인 요소 (Inline Elements)
- 특징: 인라인 요소는 새로운 줄에서 시작하지 않으며, 콘텐츠의 크기만큼만 공간을 차지, 다른 인라인 요소와 같은 줄에 나란히 배치됨.
- 예:
<span>,<a>,<strong>,<em>,<img>등. - 스타일링: 인라인 요소는
width와height속성을 사용할 수 없으며, 주로margin,padding의 좌우 값을 사용해 스타일링됨.
px (픽셀)
- 정의: 픽셀(px)은 화면에서의 고정된 단위를 나타내는데 디바이스의 해상도에 따라 물리적 크기가 다를 수 있지만, 논리적으로는 동일한 크기임.
- 사용 예: 요소의 정확한 크기를 지정하고자 할 때 사용.
div { width: 200px; height: 100px; }
vw (뷰포트 너비)
- 정의: 뷰포트 너비(Viewport Width)의 1%를 의미, 뷰포트는 브라우저 창의 크기를 의미하며,
100vw는 전체 너비를 차지하게됨. - 사용 예: 반응형 디자인을 할 때 유용.
div { width: 50vw; /* 뷰포트 너비의 50% */ }
vh (뷰포트 높이)
- 정의: 뷰포트 높이(Viewport Height)의 1%를 의미,
100vh는 전체 높이를 차지하게됨. - 사용 예: 브라우저 창의 높이에 따라 크기를 조정하고자 할 때 사용.
div { height: 50vh; /* 뷰포트 높이의 50% */ }
즉 블록 요소와 인라인 요소는 각각의 배치 방식과 특성이 다르며, px, vw, vh는 CSS에서 요소의 크기를 조절하는 데 사용되는 다양한 단위임,
블럭요소의 상속관계
예제 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록 요소 상속 관계</title>
<style>
.parent {
width: 80%; /* 부모 요소의 너비를 80%로 설정 */
border: 2px solid blue;
padding: 20px;
}
.child {
width: 50%; /* 자식 요소의 너비를 부모 요소의 50%로 설정 */
border: 2px solid red;
padding: 10px;
}
.grandchild {
width: 100px; /* 손자 요소의 너비를 고정 값 100px로 설정 */
border: 2px solid green;
}
</style>
</head>
<body>
<div class="parent">
부모 요소
<div class="child">
자식 요소
<div class="grandchild">
손자 요소
</div>
</div>
</div>
</body>
</html>과정 설명
부모 요소 설정 (
.parent)width: 80%설정: 부모 요소의 너비는 뷰포트(혹은 상위 컨테이너)의 80%로 설정.
자식 요소 설정 (
.child)width: 50%설정: 자식 요소의 너비는 부모 요소의 50%로 설정.- 부모 요소의 너비가 80%이므로, 자식 요소의 너비는 전체 뷰포트의 40% (80%의 50%)가 됨.
손자 요소 설정 (
.grandchild)width: 100px설정: 손자 요소의 너비는 고정된 100픽셀.
상속 관계 설명
- 부모 요소가 너비를 80%로 설정하면, 이 값은 자식 요소에게 영향을 미칙게됨, 자식 요소의
width: 50%는 부모 요소의 너비인 80%의 절반을 의미 따라서 자식 요소의 최종 너비는 뷰포트 너비의 40%가 됨. - 손자 요소는 고정된 100픽셀 너비를 가지므로 부모 요소나 자식 요소의 너비와는 상관없이 고정된 크기를 가짐.
이와 같은 상속 관계에서, 상위 요소의 width 설정은 자식 요소의 width가 퍼센트(%) 단위일 때 영향을 미치며, 자식 요소의 퍼센트 값은 상위 요소의 크기를 기준으로 계산됩니다. 반면, 픽셀(px) 단위의 width 설정은 상위 요소의 크기와 무관하게 고정된 크기를 유지합니다.
'html&css' 카테고리의 다른 글
| CSS_relative,absolute 정리 (0) | 2024.07.08 |
|---|---|
| CSS_FLEX 속성 정리 (0) | 2024.07.08 |
| CSS_Box-sizing 정리 (0) | 2024.07.08 |