HTML/CSS - display

안녕하세요, HTML/CSS에서 속성을 나타내는 display에 대해 공부하겠습니다.

 

display의 종류는 여러 가지가 있는데요, (inline/block/inline-block/flex/list-item/none 등)

그중 많이 쓰는 것들만 한번 알아보겠습니다!

 

inline : 다른 요소들과 같은 줄에 머무려고 하며 필요한 만큼의 가로길이만 가지려 합니다.

inline을 display의 기본 값으로 갖는 태그로는 <span>, <a>, <b>, <i>, <img>, <button> 등이 있습니다.

JSFiddle

block : 다른 요소들과 독단적인 줄에 가고자 하며 최대한 큰 가로길이를 가지려 합니다.

block을 display의 기본 값으로 갖는 태그로는 <div>,<h1~h6>,<p>,<nav>,<ul>,<li> 등이 있습니다.

 

my name이 독단적으로 줄을 가지고 있으며 background가 끝까지 가는 것을 확인할 수 있습니다.

block을 따로 설정해주지 않으면 100%를 차지하지만 범위를 설정해주면 block의 범위를 바꿀 수 있습니다.

<div>이지만 200px만큼만 차지하는 것을 확인할 수 있습니다.

반면 inline 요소의 가로/세로 길이의 개념이 없습니다 (딱 내용이 가진 만큼만 차지합니다!)

 

inline과 block을 display 속성 선언을 통해 바꿀 수 있습니다. 위에 <div>를 inline요소로 바꿔보겠습니다.

<div>이지만 inline요소로 바뀐 것을 확인할 수 있습니다.

 

inline display처럼 다른 요소들과 같은 줄에 있으며 block display처럼 가로세로 범위를 조정하게 하는 방법도 있습니다!

바로 display의 값을 inline-block 값을 주는 것입니다.

<i>와 <b> 둘 다 display 기본 값은 inline이지만, <b>만 inline-block으로 변경시켜주니 위와 같이 영역 설정이 가능해졌습니다!

 

 

특이한 케이스도 있어 정리하겠습니다. 바로 <img>입니다.

<img>는 inline이지만 가로세로 길이를 조절할 수 있는 특별한 태그인데요, 대체 요소라고도 합니다.

inline과 같이 정렬도 동일하게 적용이 가능합니다! (즉, 사진이 엄청큰 글자라고 생각하면 될 것 같습니다.)

아래 예시에서 확이할수 있듯이, img의 top을 기준으로 정렬이 가능합니다!

 

 

글자를 지우고 사진에만 텍스트처럼 가운데 정렬을 적용시켜 보면 아래와 같이 적용되는 것도 확인이 가능합니다! 

 

위와 같이 img의 부모태그에 text-align을 사용하여 가운데 정렬을 하였습니다.

 

사실 img를 가운데 정렬하는 방법은 더 있습니다. 바로 img를 block으로 바꾼 후 양옆의 margin을 auto로 하면 정렬이됩니다. 아래처럼 말이죠!

 

 

오늘은 CSS에서 display 속성에 대해 정리하였습니다! HTML과 CSS는 재밌으면서도 완벽히 이해하기는 힘든 과목인 것 같습니다 ㅠㅠ 숙달하도록 연습해야겠습니다!