[CSS] #4-1 CSS의 display 알아보기

1. 움직이고, 돌리고, 변환하고

 

 개인적으로 CSS를 공부하다보니 파워포인트로 PPT를 만드는 것이 생각난다.

 처음엔 하나의 페이지에 글씨를 쓰는 것으로 끝나지만, 도형을 넣고, 이미지를 넣는다.

 그 후로는 하이퍼링크로 인터넷 주소도 넣고, 영상이나 음악도 넣는다.

 넣어져있는 것들을 앞으로, 뒤로 밀면서 순서도 바꾸기도 한다.

 

 그리고 마지막으로 만지는 부분이 있다.

 애니메이션과 같은 디자인 적인 부분이다.

 

 #4에서 함께 알아볼 것은 위에서 언급한 것처럼 요소들을 움직이게 하거나, 변형하거나, 변경시키는 것을 CSS에서 가능하다. 그리고 이 방법을 알기 위해선 display라는 개념을 알아야 한다.

 

 display는 요소를 화면에 어떻게 보이게 할 것인가를 결정해주는 것이다.

 아래의 예시를 보면서 display의 개념을 잡아보자.

 

 1) overflow

 우선 임의의 출력 결과물부터 확인해보자.

글씨가 벗어났다

 

 무언가를 출력시켰을 때 내가 정해놓은 범위를 벗어나는 것들은 안보이게 하고 싶다.

 가능할까?

 display를 조정하면 가능하다.

overflow: hidden;

 overflow(넘쳤을 때)의 속성값을 hidden(숨긴다)으로 주면 넘어가는 글씨들은 사라진다.

넘어간 글씨는 사라진다

 

 또한 overflow의 속성값을 scroll로 주면 스크롤을 만들 수도 있다.

스크롤이 생겼다

 

<기억 되새기기>
이 스크롤과 비슷한 용도로 쓰이는 것들이 있다.
먼저 html에서 사용했던 textarea 명령어!
그리고 iframe 이라는 명령어이다.

textarea는 글자를 쓸 수 있는 공간을 만들어준다.
<textarea rows="5" cols="30"> </textarea>

iframe은 페이지에 일정 공간을 만들고 그곳에 다른 결과물을 출력하는 데 사용한다.
<iframe width="200" height="150" src="14_layout.html> </iframe>

 

 2) display : none | block

 웹사이트에서 가장 많이 사용하는 것 중 하나가 있다.

 바로 보였다가, 안보였다가.

 필요할 때 노출시켰다가, 사용자가 꺼달라고 하면 안보이게 했다가, 하는 것이다.

 이것을 display를 none 처리하는 것이라고 이야기한다.

 

 display라는 명령어는 요소의 출력을 컨트롤 할 수 있는 명령어이다.

 block은 출력하라는 뜻, none은 출력하지 말라는 뜻이다.

 

 비슷한 명령어로 visibility도 있다.

 visibility의 값을 visible로 주면 보이고, hidden으로 하면 요소를 숨긴다.

 

 이 두 명령어의 차이는 display: none; 은 아예 요소 자체를 없애버린다.

 하지만 visibility: hidden 은 요소를 숨기는 것이기 때문에 숨겨진 요소가 자신의 자리를 그대로 차지한 채로 투명해진다.

 

 

2. display의 세부 속성

 

 이 display는 크게 4가지의 속성으로 나뉜다.

 display를 차지하는 요소를 어떻게 표현하는가에 따라 속성을 구분한다.

 아래의 참조 사이트를 살펴보며 함께 알아보자.

  https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display 

W3Schools online HTML editor

 

 1) none

{display: none;}

 display의 요소들을 출력하지 않는다.

 

 2) inline

{display: inline;}

 inline 요소의 경우에는 요소의 내용 만큼만의 영역을 채우기 때문에 아무리 width와 height 값을 조정해도 요소가 차지하는 영역의 크기가 달라지지 않는다. 그래서 줄바꿈도 되지 않는다.

 

 3) block

{display: block;}

 block 요소의 경우에는 가로영역을 전부 채우며 width와 height의 크기를 지정 가능하다.

 

 4) inline-block

{display: inline-block;}

 줄바꿈이 되지는 않지만 크기 지정이 가능하다. inline과 block의 중간 형태의 속성이다.

 

각각의 display의 속성을 출력한 것이다. 빨간색의 HELLO WORLD! 글씨가 어떻게 출력하는 지를 보면 이해하기 쉽다.