[CSS] selectors & display

CSS기초를 다지고 있는 주갬입니다. 오늘은 Selector의 종류와 display, position에 대해 알아보겠습니다.

 

---

selector의 종류

Universal	*
type	Tag
ID	#id
Class	.class
Attribute	[]

 

 

---

가상 클래스 :hover -> 해당 요소에 마우스를 올리면 동작하는 CSS

 

button:hover {

color: red;

background: beige;

} 

 

---

Display 이해하기

 

기본적으로 우리가 사용하는 Tag 에는 block요소와 inline요소가 있습니다.

 

inline: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.

-> inline 엘리먼트: <span>, <a>, <em>

-> width, height 속성은 무시

-> 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문

-> margin, padding 속성을 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

 

block: 전후 줄바꿈이 일어나 혼자 한 줄을 차지

-> block 엘리먼트: <div>, <p>, <h1>

-> width, height, margin, padding 속성이 모두 반영이 됩니다.

 

inline-block: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨. (inline)

-> inline-block 엘리먼트: <button>, <select> 

-> 명시적으로 display: inline-block 으로 지정해줘야 합니다.

 

block요소인 div는 지정한 width와 height의 크기만큼 공간을 차지하고 있어 안의 내용과 관계없이 background color가 적용됩니다.

inline요소인 span은 채워진 내용에만 스타일이 적용되므로 내용이 있는 부분만큼만 background color가 적용됩니다.

 

이 요소들의 기본 속성은 display를 통해 변경이 가능합니다.

기존에 block 요소였던 div는 display 속성을 통해 inline-block요소가 되었습니다.

-> inline-block 요소는 한 줄로 다 표시를 하지만 내용과는 무관하게 크기는 지정한대로 공간을 차지합니다.

-> 지정된 width와 height의 공간만큼 스타일이 적용이 되고,

-> 위아래로 배치되던 요소들이 양 옆으로 배치되는 모습을 볼 수 있습니다.

 

기존에 inline 요소였던 span은 display 속성을 통해 block요소가 되었습니다.

-> 내용이 있는 만큼만 적용되던 스타일이 지정된 width와 height의 공간만큼 적용이 되고,

-> 양옆으로 배치되던 요소들이 위아래로 배치되는 모습을 볼 수 있습니다.

 

 

inline -> 물건

lnline-block -> 한줄에 여러개가 들어가는 특별한 박스

block -> 한줄에 하나만 넣을 수 있는 박스

 

 

 

참고자료

https://www.youtube.com/watch?v=jWh3IbgMUPI&t=252s