[한솔홈데코] HTML5 + CSS3를 이용한 헤더 영역 개발

1. 목표

활성화 시 파란색 언더바 (출처: 한솔홈데코)

2. 설계

 

1. block요소에만 text-align을 적용할 수 있고, 정렬되는 것은 block 안의 inline요소만 가능하다!

- gnb(대메뉴)에서도 display: inline-block;을 통해 inline요소처럼 취급되었기 때문에 가로로 정렬될 수 있었다.

 

2. 로고 이미지 넣을 때 width와 height를 지정하고 싶으면 display: block;으로 지정한다.

- position: absolute; left: 50px; 을 줘서 왼쪽 기준으로 오른쪽으로 50px만큼 이동하여 위치하게 한다.

 

3. 활성화될 때 글자바로 밑에 줄이 생기게 하기 위해서 <span>태그를 추가하고 position: relative;로 설정한다.

- 그리고 링크에 hover될 때, 줄을 그어준다. 

- 줄은 position: absolute;로 한다.

- position: absolute;는 부모 기준으로 맞춰지기 때문에 left와 bottom을 이용해 위치를 맞춘다.

- after 설정 시 content="";를 써줘야 한다.

 

4. padding은 상우하좌(시계방향)로 적는다.

- padding: 0 10px;의 경우 좌우 10px를 의미한다.

 

5. li의 first-child, last-child로 접근하여 커스터마이징한다.

 

6. float: left;를 이용해 가로로 정렬한다.

- 박스들은 float 를 보이지 않는 영역으로 인식하기 때문에 가능하다.

- 그러나 이렇게 사용하는 경우 레이아웃이 무너지기 쉽다.

- 박스들은 float 를 보이지 않는 영역으로 인식하지만 텍스트는 하기와 같이 float 를 인식하기 때문이다.

- 따라서 요즘은 float 를 사용하지 않는 추세이다.

 

헤더 영역만 했을 뿐인데 정말 많이 배웠다 !!! 

더 열심히 해서 나 혼자 정해진 시간안에 만들어봐야겠다. 👶🏻

 

 

 

출처 : 한솔홈데코, 리베하얀 🤓