07. CSS display 속성

○ display 속성

    - 해당 요소가 화면에 어떻게 보일지를 지정

    - display : none;            해당 요소를 화면에 출력하지 않음

    - display : block;           해당 요소를 블록 레벨로 지정

    - display : inline;           해당 요소를 인라인 레벨로 지정 (margin, float 적용X)

    - display : inline-block;   인라인 레벨요소이면서 블록 레벨 속성을 갖도록 지정 (margin, float 적용O)

<h2>display: none:</h2>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
    <p class="ex1">HELLO WORLD!</p> 
    Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    </div>

<h2>display: inline:</h2>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
    <p class="ex2">HELLO WORLD!</p> 
    Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

<h2>display: block:</h2>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
    <p class="ex3">HELLO WORLD!</p> 
    Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    </div>

<h2>display: inline-block:</h2>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
    <p class="ex4">HELLO WORLD!</p> 
    Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    </div>

HELLO WORLD! 에 display속성이 각각 적용된 모습 (채워진 텍스트는 로렘 입숨)

    - Lorem inpsum(로렘 입숨) : 실제 내용이 들어가기 전 내용이 채워진 모습을 보기 위한  표준 채우기 텍스트

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

○ visibility 속성

    - 문서를 변화시키지 않고 요소를 보이거나 숨김

    - visibility : hidden;   해당 요소를 화면에서 숨김 (display : none; 과 비슷한 효과)

    - visibility : visible;    해당 요소를 화면에 출력

 

○ overflow 속성

    - 영역 넓이를 벗어나는 내용의 출력방법 지정

    - overflow : hidden;  영역의 넓이를 벗어나는 내용은 화면 상에서 사라짐

    - overflow : scroll;    내용이 영역 넓이를 벗어나면 스크롤이 생김