CSS display
CSS display
CSS에서 display는 화면에서 요소들을 어떤 식으로 배치할 것인지 지정해주는 속성입니다.
여기서 요소란 HTML에서 작성되는 태그를 의미합니다.
예를 들어 요소란 '<div class="div"> 안녕하세요 </div>'
이런 구조를 요소라고 부르고 있습니다.
본론으로 돌아와 HTML을 공부하셨다면 아실 내용이지만
HTML은 기본적으로 적용되는 스타일이 있습니다.
굵기, 폰트 크기, 폰트, 테두리 등이 있는데
그중 inline 속성과 block 속성에 대한 내용이 있습니다.
먼저 inline 속성을 가진 태그들은
한 라인에 자신의 앞과 뒤에 있는 태그들을 배치할 수 있는 속성입니다.
대표적으로 span 태그가 있는데 span 태그를 사용하면 앞과 뒤에 있는 태그들이
같은 위치에 배치되는 특징이 있습니다.
다음은 block 속성인데 block 속성은 앞과 뒤에 있는
태그들이 다른 줄에 배치되는 속성입니다.
대표적으로 div 태그가 있는데 div 태그를 사용하면 앞과 뒤에 있는 태그들이
서로 다른 위치에 배치되는 특징이 있습니다.
이 내용이 중요한 이유는 CSS로 HTML에 스타일을 적용할 때
기본적으로 적용되는 값으로 곤란한 경우가 생길 수 있습니다.
그럴 때 display를 사용하면 기존에 가지고 있던 속성을 초기화시키고
원하는 위치에 배치할 수 있습니다.
대표적인 display의 속성 값으로 block, inline, inline-block, none, grid, flex가 있습니다.
오늘은 inline, block, inline-block, none 속성 값만 다루고
나머지 grid, flex 속성 값은 다음에 더 자세히 다뤄보겠습니다.
(1)
block
먼저 block 속성 값은 말 그대로 태그들이 block 속성을 가질 수 있게 만드는 속성 값입니다.
이 예시는 inline 속성을 가지고 있는 span 태그에
dispaly를 사용하여 block 속성을 적용하여
span 태그를 inline 속성이 아닌 block 속성으로 변경해 주는 예시입니다.
(2)
inline
inline 속성 값은 block 속성 값과 반대로 적용됩니다.
이 예시는 block 속성을 가지고 있는 div 태그에
dispaly를 사용하여 inline 속성을 적용하여
div 태그를 block 속성이 아닌 inline 속성으로 변경해 주는 예시입니다.
(3)
inline-block
inline-block 속성은 inline 속성과 block 속성을 합쳐놓은 속성이라고 할 수 있습니다.
기본적으로 inline 속성을 가지고 있지만 block 속성을 사용할 수 있는
하이브리드 속성이라고 할 수 있습니다.
자세히 설명드리면 inline 속성은 width 속성과 height 속성을 지정해도 적용되지 않는데
block 속성에서는 width 속성과 height 속성의 값을 지정할 수 있습니다.
inline-block 속성을 사용하면 inline 속성이지만 block의 속성에서 처럼
width 속성과 height 속성을 지정하여 사용할 수 있다는 특징이 있습니다.
(4)
none
오늘의 마지막은 none 속성 값으로
이 속성 값은 display에서 보이지 않게 만드는 속성 값입니다.
왜 굳이 보이지 않게 만드는 속성 값을 사용하는지에 대한 의문이 들 수도 있습니다.
이 속성 값을 알아두시면 반응형 웹을 디자인할 때 사용할 수 있습니다.
만약 PC 화면에서 모바일 화면으로 변경이 되면
화면의 크기가 많이 줄어들기 때문에 그 과정에서
생략되는 태그들도 분명히 존재할 것입니다.
그렇기 때문에 none 속성 값을 알아두시면 후에 유용하게 사용될 것입니다.
오늘은 display 속성에 대해 알아보았습니다.
오늘 내용이 중요한 이유는 웹디자인을 할 때 요소들의 배치가 정말 중요하게
사용되기 때문에 알아두시면 추후에 웹디자인을 했을 때 유용하게 사용될 것입니다.
감사합니다!
