핵심 css!(3/3)

#.1)display

모든 div 는 block 요소이다  

html

css 적용

block을 써주지 않아도 적용이 된다.  본인이 속한 한 줄이 전부 자기만의 값을 가지고 있고 그다음의 요소가 올 경우 바로 밑에 쌓이게 된다. 

 

여기서 display: inline; 속성을 사용하면 요소가 가지고 있는 값들의 범위만큼만 크기를 가지게 되고 한 줄로 나열하게 된다.

 

그리고  inline 속성들의 특징(?)이 있는데 밑의 사진을 보면 중간중간 띄어쓰기가 되어 있는 부분을 볼 수 있을 것이다.

이 이유는 위의 사진 중 html에서 div들을 가독성을 위해 한 줄에 1개씩 작성하였기 때문에 띄어쓰기가 적용된 것이다.

한 줄에 3개의 div를 모두 같이 쓰게 된다면 결과 창에서 띄어쓰기가 사라지는 대신에 코드의 가독성이 떨어질 것이다.

결과화면

#.2)display:flex;

div를 감싼 큰 div

css

flex 요소를 사용하면 inline 요소처럼 옆으로 빈공간 없이 붙게 된다. flex요소는 가장 많이 쓰인다고 한다. 그만큼 중요하다

#.3)display:inline-block;

이렇게 div안의 내용이 적을땐 inline처럼 보이지만 같은 크기의 뷰 포트에서 div안의 내용을 조금 더 늘려 보면

이렇게 block요소 처럼 보인다. 하지만 뷰포트를 늘리면 다시 인라인 처럼 점점 늘어난다.

#.4)display:none;

마지막으로 none속성이다. 

none속성은 말그대로 보이지 않게 설정하는 것이다. flex와 같이 현업에서 많이 사용한다고 한다.