CSS 핵심 - display 속성 및 Size 단위 px, em, rem, % / CSS display 속성, rem 실습 (작정하고 장고 8일차)

12강 CSS 핵심 - display 속성 및 Size 단위 px, em, rem, %

DISPLAY Attribute

Block
Inline
Inline-block
None

이 속성은 HTML 요소를 어떻게 표시할지를 결정하는데 사용된다.

display: block

요소를 새로운 줄에서 시작하고 전체 너비를 차지하도록 만든다.

display: inline

요소를 문장 내에서 나란히 표시하며, 내용의 너비만큼 공간을 차지한다.

display: inline-block

인라인 요소처럼 새로운 줄에서 시작하지 않고, 내용의 너비와 높이를 지정하여 블록 요소처럼 표시된다.

display: none

해당 요소를 화면에서 숨기는 속성

*요소(Element)란 HTML 문서의 구성 단위 중 하나로, HTML 태그로 표현되는 것을 말한다.

Size Attribute

px
em
rem
%

반응형 웹사이트를 만들기 위해 크기의 변화를 알아야 한다.

px

고정된 크기 단위

em

상위 요소의 글꼴 크기에 상대적인 단위

rem

루트 요소(html)의 글꼴 크기에 상대적인 단위

%

상위 요소의 크기에 상대적인 크기

13강 CSS display 속성, rem 실습

     <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
        <h1>
            testing
        </h1>
     <div class="testing" style="display: block;">block</div>
     <div class="testing" style="display: inline;">inline</div>
     <div class="testing" style="display: None;">None</div>
     <div class="testing" style="display: inline-block;">inline-block </div>

    </div>

     <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
        <h1>
            testing
        </h1>
     <div class="testing" style="display: inline-block; width: 48px; height: 48px;">inline- block </div>
     <div class="testing" style="display: inline-block; width: 48px; height: 48px;">inline- block </div>
     <div class="testing" style="display: inline-block; width: 48px; height: 48px;">inline- block </div>
     <div class="testing" style="display: inline-block; width: 48px; height: 48px;">inline- block </div>

     <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; font-size: 2rem;">
        <h1>
            testing
        </h1>
     <div class="testing" style="display: inline-block; width: 48px; height: 48px;">block</div>
     <div class="testing" style="display: inline-block; width: 3em; height: 3em;">block</div>
     <div class="testing" style="display: inline-block; width: 3rem; height: 3rem;">block</div>
     <div class="testing" style="display: inline-block; width: 30%; height: 30%;">block</div>