[잘난웹디] 한국소비자원 웹사이트 2강_메인페이지의 헤더영역

 

잘난 웹디님 강의를 통해 퍼블리싱을 위한

웹페이지를 제작 과정을 공부하고 있습니다.

 

 

오늘은 한국소비자원의 메인페이지를 제작하는 강의를 들으며 실습을 하였고, 실제로 페이지를 제작하는 2강부터 포스팅을 하겠습니다.

한국소비자원 웹사이트 제작 강의에서는 HTML5 markup문서구조정의와 구글폰트 import하는 법, css3속성을  이해하며 Layout Design적용하는법, Block과 Inline속성, position에 대한 이해와 적용, 다양한 효과 (hover나 focus등..), 개발자도구 활용법에 대해 공부할 수 있으며, 2강에서는 메인페이지의 헤더영역을 제작하였고 그에 대한 공부한 내용입니다.

 

공부하며 개념을 다질 수 있는 내용 위주로 (혼자 기억하기위함) 올립니다.

 

/*reset*/

페이지가 가지고있는 기본 margin과 padding 을 0으로 만들어주고, li스타일을 none으로 변경, a태그가 가지고있는 기본글씨색과 밑줄으르 없애주기위해 color와 text-deco를 변경 해준뒤 작업한다.

 * { margin:0; padding:0; }

 li { list-style:none; }

 a { color : inherit ; text-decoration : none; } 

 

 

 

/*layout*/

구글 폰트를 사용할 거기때문에 , import 로 사용할 웹 폰트를 불러오고 body에 font-family에  웹사이트에서 복사한 내용을 붙여넣는다.

 

 

 

 

 - ul 태그에 float left 하기 전/후 

> float : left 하기 전 

 

> float : left 하고 난 후 

ㄴ> ul에 float : left 속성을 주고나니, ul 아래에 있던 요소들이 다 header영역으로 올라왔다.

ul은  기본적으로 block속성을 가지고 있기 때문에 한줄을  다 차지한다. 그래서 아래에 있는 로고와 div요소들이 줄바꿈이 일어난것이다. 그렇기 때문에 먼저 정렬을 해줘야 한다.

 

 

 

 - logo를 header영역으로 올리고 가운데로 위치시키기 

완성된 사이트에서 로고의 크기는 297*90이기 때문에 스타일을 작성해준다.

.innerHeader .logo { width : 297px; line-height:90px; }

ㄴ> width와 height를 주면 header영역으로 올라오지는 않는다.

 

 

header영역에 위치시켜주기 위해서는 position을 잡아줘야 한다. header영역에 position : relative; 를 주고 logo에 position : absolute;를 주게 되면 header영역으로 올라오게된다.

 header { width: 100%; height: 90px; box-shadow:0 4px 10px rgba(0,0,0,0.1); position:relative; }

.innerHeader .logo { width: 297px; line-height: 90px; position:absolute; }

 

ㄴ> 위와같이 position을 주고나니 header로 올라오는것을 확인할 수 있다. 

 

 

이제 로고를 가운데로 보내기 위해서 로고의 left를 조정해준다.

.innerHeader .logo { width: 297px; line-height: 90px; position:absolute; left:50%; }

 

ㄴ> 중앙보다 살짝 우측에 위치해 있기 때무네 transform을 준다.

transform : translateX(-50%); X축으로 -50%만큼 이동하도록해준다.

.innerHeader .logo{width: 297px; line-height: 90px; position:absolute; left:50%; transform:translateX(-50%);}

ㄴ> 가운데로 온것을 확인할 수 있다.

여기서 알아야할 것은 position : relative 와 position  : absolute 를 꼭 알고 넘어가야 한다.

 

 

 

 - a태그에 float : left를주기 전 

> a태그에 float : left 를 주기 전

 

 

> a태그에 float : left 를 주고 난 후 

 

 

> 이후에 margin-top과 padding 값을 조정하여 완성한다.

 

 

 

 

 

▼  2강_ 헤더영역 완성  ▼