[CSS] Display

 

a programmer 에서 pro에만 밑줄효과를 주고 싶다면 <p>태그는 block태그이므로 줄바꿈이 된다

**solution= Inline태그인 <span>태그를 이용한다!

They do not block other elements from occuring on the same line.

inline태그는 block태그와 다르게 높이와 너비가 글자수에 맞춰진다. block은 공간을 여유롭게 가진다

inline elements는 같은 줄에 나열된다.반면 block elements는 줄바꿈된다.

block elements는 box에 width를 적용할 수 있지만 inline elements는 적용이 안됨

display:inline 을 사용해서 block elements를 같은 줄에 옮길 수 있다. 그러나 width는 적용되지 않는다.

Inline elements에 display: block을 적용한 경우

**solution = display : inline-block를 사용하면 width도 적용된다

박스를 없애거나 사라지게 하는 방법 2가지

display:none/ visibility: hidden (박스가 사라지고 빈 공간이 남는지 안남는지의 차이가 있다)

none을 적용하면 박스 자체가 사라지고

남은 자리는 여백이 채워진다.

반면 visibility: hidden은 박스가 사라지고 빈 공간이 남는다