티스토리 뷰
css에서 display 속성은 무슨 역할을 할까요?
모든 엘리먼트는 사각형의 형태를 가지고 있다고 이전 시간에 배운 것이 기억나시나요? display속성은 그 사각형이 어떻게 작동될지를 정해주는 속성입니다. <div>태그와 <span>태그를 비교할 때 <div>태그는 display의 속성값이 block이고, <span>태그는 inline이라고 설명한 적이 있습니다.
위의 링크를 누르시고 그때 설명했던 그림을 보시면 block과 inline이 공간을 어떻게 차지하는지 바로 확인할 수 있습니다. 그리고 그때 배우지 못했던 속성값들을 좀 더 살펴보도록 하겠습니다. display이 값에 none이라는 값을 준다면 해당 엘리먼트는 사라집니다.
<head> <title>예시 7번</title> <style> div{ border: 1px solid black; } #two{ display: none; } </style> </head> <body> <div id="one">div-1</div> <div id="two">div-2</div> <div id="three">div-3</div> </body>
위의 소스코드를 <html>태그 사이에 넣어주세요. 그리고 실행하시면 분명 <body>태그 사이에는 3개의 <div>태그가 있지만 2개만 표시되는 것을 볼 수 있습니다.
#two에 있는 display 속성을 지우거나 block으로 값을 바꾸면 다시 2번째 <div>가 나타나는 것을 볼 수 있습니다.(지울 경우에도 나타나는 이유는 <div>태그는 display값이 block인게 기본값이라서 그렇습니다.)
정리하자면, display: none;이 적용된 엘리먼트는 눈에 보이지 않게 됩니다. 그리고 display가 선언되지 않았다면 그 엘리먼트의 기본값이 적용됩니다.
block과 inline, none을 배웠으니 이제 flex에 대해서 배울시간입니다.
플렉스박스란 무엇일까요?
짧은 시간에 너무 많은 것들을 배워서 이해가 안되실 수도 있지만 천천히 이해하시면 됩니다. 플렉스박스도 아주 간단하게 생각하시면 됩니다. 말 그대로 유연한 박스입니다. 배치를 유연하게 할 수 있어서 엘리먼트들을 정렬하거나 레이아웃을 잡을 때에도 아주 유용하게 쓸 수 있는 속성입니다.
flex를 배우기 전에 알아야 할 몇가지를 설명하도록 하겠습니다.
우선 부모 엘리먼트와 자식 엘리먼트가 있어야하며, 부모 엘리먼트에 flex를 선언하는 것입니다.
<ul> <li>1번</li> <li>2번</li> <li>3번</li> </ul>
위의 소스코드를 보시면 <ul>태그와 <li>태그가 부모 자식 관계에 있습니다. 위의 소스코드에서는 <ul>태그에 flex를 선언하면 그 태그의 자식관계에 있는 <li>태그 세 개에 영향을 끼칠 수 있습니다.
ul{ display:flex; }
위의 소스코드를 복사해서 <style>태그에 붙여넣으시면 플렉스 선언이 됩니다.
아시겠나요. 부모와 자식 엘리먼트가 있어야 하며 부모 엘리먼트에 flex를 선언합니다.
그리고 또 알아야 하실 건 앞으로 플렉스가 선언된 부모 엘리먼트를 컨테이너(container)라고 부르고 자식 엘리먼트를 아이템(items)이라고 부를것이라는 겁니다.
<ul>태그가 컨테이너, <li>태그들이 아이템이 됩니다.
컨테이너와 아이템이라는 용어는 자주 사용하니 잊어버리시면 안됩니다.
그리고 마지막으로 플렉스는 계속해서 중첩사용이 가능하다는 것입니다.
<div class="containerOne"> <div>div-1</div> <div>div-2</div> <div class="containerTwo"> <div>div-3-1</div> <div>div-3-2</div> </div> <div>
<div>태그가 여러개 있습니다. .container에 flex를 선언한다면 그 태그의 자식으로 있는 3개의 <div>태그에 flex효과들을 줄 수 있습니다. 그리고 .containerTwo에 또 flex를 선언한다면 그 밑에 있는 2개의 <div>태그에도 flex효과들을 줄 수 있습니다. flexbox는 중첩해서 계속 적용시킬 수 있습니다.
flex박스는 자기가 헷갈리지만 않는다면 계속 중첩해 사용할 수 있습니다.
다음 시간에는 컨테이너에 무슨 효과가 있는지 알아보도록 하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| flex의 아이템 (0) | 2018.01.07 |
|---|---|
| flex의 컨테이너 (0) | 2017.12.31 |
| 마진(margin) - 테두리(border) - 패딩(padding) 이란? (0) | 2017.12.27 |
| 자주 사용하는 css의 속성들 (0) | 2017.12.25 |
| 캐스캐이딩의 개념과 css 사용하기 (0) | 2017.12.24 |