#20 css 연습, 헤더 만들어 css적용

 

 

오늘은 데모 사이트에서 이미지를 자른 다음, 

헤더에 적용 시키는 연습을 해 보았다.

 

자를 이미지는

 

---

 

자른 아이콘들,

 

 

---

 

코딩작업 소스,

 

좀 어려웠던 부분은, 

 

1. float을 주었을 때, 인라인 요소에서는 display:bolck을 줘야 높이가 먹힌다는 점.

2. overflow:hidden;

    - 자식속성이 float를 사용할때 염두해 두는 가장 기본요소.

      컨텐츠를 만들때 넘치는 부분들을 숨겨주거나 또는 컨텐츠의 영역을 자식요소의 크기변동에 따라 유동성있게 변화        시켜주는 명령어이다.

     

      그냥 사용시에는 유동성이 있으므로 자식요소의 크기만큼 부모요소의 영역이 유동적으로 증가, 즉 크기가 자식요소만큼조절이된다. 이런경우 별도로 높이값을 줄 필요가 없다.

 

높이 자동계산 이라는 개념으로 이해하면 될까, 본문영역에서는 높이를 지정해 버리면 추후 작업이 힘들어진다.

​​

하지만 제한적인 컨텐츠 박스에 여러가지의 이미지, 또는 텍스트를 넣고자 하는 경우,

overflow : hidden 과 width 즉, 높이 값을 줌으로써 제한된 컨텐츠 박스에서 넘치는 자식요소들을 숨기는것이 가능하다.

position:relative와 float를 같이 써야 할 경우가 있는데, 

 

---

 

결과물,

 

 

각 메뉴 사이의 수직선은 후작업시, 폰트와 여백 조정을 할 때 같이 하면 되는 작업이니, 생략했다.