Display 속성 맛보기

 

이시절에 컴공 가야했음

 

 

본격적인 HTML 을 시작하기 전 필수로 알아야할 개념이 있다.

바로 Display 속성인데 

 

이 Display 속성이란 요소 ( ex. <div>빨리JavaScript 하고싶다</div>)들을 어떻게 배치하고 

보여줄 것인지를 결정한다. 

크게 None, Block, Inline, Inline-Block 이렇게 있는데 각각 차이점을 살펴보자

 

구글링해서 보기쉬운 비교 코딩을 한번 짜보자 ( feat . 매운코딩 ) 

그림을 보고 전체적인 감을 한번 익혀보고 내용을 정리해보자

 

1. display : none 

UI 화면상에 보이지 않도록 숨기는 것

어떠한 영역을 가지지 않으며 완전 삭제된 것처럼 보인다.

( visibility : hidden, disabled=true 와 다르게 공간까지 모두 사라진다)

 

2. display : block 

화면의 가로 너비 기준으로 전체의 한 영역을 차지한다. 

width, height을 통해 사이즈로 조절 가능하고 

지정하지 않으면 default 값으로 width 는 화면 가로너비 전체 / height은 컨텐츠 만큼의 크기를 가진다.

 

3. display : inline 

컨텐츠 만큼의 크기를 가지며 줄바꿈이 되지 않는다.

width, height 을 지정할 수 없다. inline 은 글자 요소이기 때문에 크기를 지정할 수 없다. 

margin 은 상,하에 적용되지 않고, padding 은 시각적으로는 추가되지만 공간을 차지하지 않는다.

(이 말인즉 요소가 겹칠 수 있다는 뜻) 

 

< ----- 이런식으로 ㅇㅇ ;; 

 

 

 

4. display : inline-block 

block과 inline 의 특징을 모두 섞은 속성값이고 

컨텐츠 만큼의 크기를 가지며 줄바꿈이 되지 않는다. 

width, height 을 통해서 사이즈를 조절 가능하다. 

 

display bolck과 inline 의 차이점?

우선 줄바꿈이 제일 크지 않을까 block 은 상자로써 한 공간을 모두 차지하고 

inline 은 글자로써 그냥 한 라인에서 차례대로 공간을 차지 하게 된다. 

 

display inline 과 inline-block의 차이점? 

둘다 모두 줄바꿈이 없이 영역을 공유하며 사용하고 

가장 큰 차이점은 width, height 을 통해 명시적으로 크기를 설정할 수 있는지이다.

inline 은 오로지 컨텐츠 영역만큼만의 크기를 가지나,

inline-block은 크기를 명시적으로 지정하여 사용할 수 있다는 점이 다르다 이 말이다. 

 

 

 

자고싶다 18

 

참고: https://cceeun.tistory.com/