레이아웃 구조 복습, display 속성(a태그 default : inline)

📌 레이아웃 구조 복습

• 레이아웃
• 레이아웃 안에 레이아웃
• 컨테이너
• header(nav, banner 등...) 박스(.header 클래스로 생성)
• 클래스 header 박스 안에 header 관련 클래스를 만들기

🛴 display 속성

• block : 태그 한 개가 한 줄 영역을 모두 잡아 먹는다.
• inline : 태그의 텍스트만큼 영역을 잡아먹어 다른 요소들을 옆으로 나열한다.
  • padding이 제대로 먹지 않는 문제가 있다.

display: inline; 의 padding이 적용되지 않는 문제를 해결할 방법은?

display: inline-block; 을 사용하자🚀

 

a 태그에 inline-block을 사용하면 padding이 제대로 먹는다.

 

그리고 a태그의 경우, display가 inline이기 때문에 a 태그의 텍스트를 오른쪽으로 정렬하고 싶을 때는
a태그의 부모에게 text-align: right; 를 주어야 한다.

 

 

 

 

 

https://webzz.tistory.com/

 

@web's Reference

 

 

https://github.com/webstoryboy/webstandard2019 : 참고 github repository  

webstoryboy/webstandard2019