[HTML / CSS] display 속성

1. inline display

 

 

다른 요소들과 같은 줄에 머무르려고 하는 성향

가로 길이는 필요한 만큼만 차지하려 한다

inline요소는 가로, 세로 길이를 설정해 줘도 auto로 잡히며 안에 있는 내용물에 따라서 가로 길이가 정해진다.

 

예) <span>, <b>, <i>, <a>, <b>, <img>, <button>

 

2. block display

 

 

새로운 줄에 가려고 하는 성향

가로 길이를 최대한 많이 차지하려고 하는 성향

 

예) <div>, <h1>, <p>, <nav>, <ul>, <li>

 

* inline display를 css에서 따로 block 설정을 해주면 block display화 할 수 있다.

 

 

 

3. inline-block

 

inline 속성이면서 가로, 세로 길이를 설정해주고 싶다면

inline-block을 설정하면된다.

 

 

 

4. <img> 태그

 

이 태그는 조금 특별한데 글자의 속성을 갖으며 실제로 text-align이라던가 vertiacl-align 기능이 먹힌다.

그리고 block 속성도 갖기 때문에 margin-left: auto; 이런 것도 먹힌다.

block 속성으로 쓰기를 권장한다.

 

이 태그를 링크로 설정할 수도 있다. 구글 그림을 클릭하면 구글로 가지듯이

 

 

아니면 추가적으로 문구를 추가해서 만들수도 있다.

 

 

예시)

 

 

 

5. Baseline

 

텍스트의 baseline 설명 그림

이미지의 baseline 설명 그림

 

inline-block의 경우 마지막에 들어간 문구가 앞의 During과 Baseline을 이룬다.

 

 

예외는 두가지다.

 

첫번째로 inline box안에 내용물이 없는 경우에는 background color가 baseline으로 선정된다.

박스의 크기에는 상관없이 내용물이 둘이상 있을 경우 마지막의 내용물이 baseline이 된다.

 

 

 

그리고 두번째로 overflow 즉, 박스의 크기를 넘어가느냐 안넘어 가느냐에 따라서도 baseline이 바뀐다.

세가지 경우로 나눠 보자

 

 

첫번째는 During이 스크롤 자체에 baseline이 맞춰져 있고

두번째는 박스에

세번째는 50px 밑에는 보이지 않도록, 즉 첫번째 글자가 잘린 곳에 맞춰져있다.