프레임 워크/html&css

[CSS] 블록 요소와 인라인 요소, 그리고 px, vw, vh 단위에 대한 정리

하루이2222 2024. 7. 8. 16:04

요소의 두 가지 성격: 블록(Block)과 인라인(Inline)

모든 HTML 요소는 저마다의 기본 표시 방식을 가지며, 크게 블록과 인라인으로 나뉜다.

블록 요소 (Block Elements) 🧱

블록 요소는 마치 벽돌처럼 공간을 쌓아나가는 방식으로 배치된다.

  • 특징: 항상 새로운 줄에서 시작하며, 주어진 공간의 가로 너비 전체를 차지한다.
  • 크기 조절: width, height, margin, padding 속성을 사용하여 너비, 높이, 여백을 자유롭게 조절할 수 있다.
  • 예시: <div>, <p>, <h1>~<h6>, <ul>, <li>

인라인 요소 (Inline Elements) ✍️

인라인 요소는 문장 안의 단어처럼, 흐름에 따라 배치된다.

  • 특징: 새로운 줄에서 시작하지 않고, 자신의 콘텐츠만큼만 공간을 차지하며 다른 인라인 요소와 같은 줄에 나란히 배치된다.
  • 크기 조절: widthheight 속성이 적용되지 않는다. marginpadding은 좌우 여백만 정상적으로 조절할 수 있다.
  • 예시: <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>

동작 원리

  1. .parent: width: 80%는 자신의 부모(여기서는 <body>)인 **뷰포트 너비의 80%**를 차지한다.
  2. .child: width: 50%는 자신의 부모인 **.parent 너비의 50%**를 차지한다. 결과적으로 뷰포트 전체 너비의 40% (80% * 50%) 크기를 갖게 된다.
  3. .grandchild: width: 100pxpx 단위이므로, 부모의 크기와 상관없이 항상 고정된 100px 너비를 유지한다.

'프레임 워크 > html&css' 카테고리의 다른 글

[CSS] relative,absolute 정리  (0) 2024.07.08
[CSS] FLEX 속성 정리  (0) 2024.07.08
[CSS] Box-sizing 정리  (0) 2024.07.08