메가박스 사이트 만들기 학습일지#1 - 헤더영역

유투브채널을 통해 메가박스 사이트 만들기를 따라하면서 그당시에는 처음부터 어떻게 만들어야 할지 막막함이 크다보니

따라해보면서 완성해보자라는 생각으로 했던 것 같다!

생각보다 오랜 시간 진행을 하여 완성을 하였고 그러면서 많은것을 배울 수 있었던 것 같다.

 

나중에 소스들을 보면서 활용할 수 있도록 정리를 해보려고한다.

 

02. 메가박스 사이트 만들기 - 헤더영역

* 특정영역을 만들때 영역을 구성하는 스타일 

   1) 제일 큰 영역을 시맨틱 태크로 id값 생성 

   2) 가운데 영역 Container class 생성

   3) 여백을 위한 row 영역 생성 

   4) 주요 메뉴부분이 들어갈 영역 생성 (div header class 생성) 

 

* <nav>태그

   → 주로 웹사이트에서 1번 쓰거나 사이드메뉴가 있는경우 2번까지 사용을 한다.(기본규칙)

 

* emmt기능을 활용하면 자동완성 기능

   → 예를들어, ul>li*7>a[#]

 

* 소스정리는 필수! 영역이 끝날때 주석표시는 필수 

 

* css 소스 "@charset "utf-s" 

   → 나중에 페이지소스보기 했을때 한글이 깨지지 않게하려면 코드를 작성해주는게 좋다.

 

* 특정영역을 잡는방법

   → 색상을 지정하여 영역을 정확하게 확인 하면서 진행하는게 좋다

 

* style.css 와 reset.css를 분리해서 css파일을 관리 

  → reset.css 파일은 웹표준,반응형 소스를 참고하여 활용하면된다! 

  → style.css 파일을 작성시에도 작성영역에 맞게 주석표시를 필수 작성!! (소스는 깔끔하게 작성하는게 중요하다. 유지보수를 위해)

 

  * Container 영역 

  → position : relavtive 는 해당영역을 기준점으로 잡고 나머지부분들의 위치를 잡기위해 작성한다.

  → 블럭구조를 가운데 정렬하기 위해서는 margin : 0 auto; 

  

* header 영역

  → css 작성 팁 : .header {} / .header h1 {}  / .header .nav {}  이런식으로 헤더영역에 해당하는 부분에 코드를 미리 작성하여 

                            css 파일 작성 시 코드를 정리하면서 작성하도록 한다. 

  → float :left 를 사용하는경우 영역이 깨지는 현상 

      ※ 블록구조는 한 영역을 차지하므로 오른쪽에 누가 오는걸 싫어한다. (인라인구조는 오른쪽에 누가오는걸 허용해준다. 반대로) 

           그래서 블록구조의 오른쪽을 정렬시켜주려면 float 를 사용해야한다. 

         

우리가 예상한 정렬 모습 

오류 모습 

 위와같이 영역이 사라지는 치명적인 오류가 발생한다.. 이문제를 해결하기 위해서는 아래와 같은 4가지 방법을 사용한다.

 

※ 해결방법 

  1. 똑같이 float 를 사용한다.  (비추)

      → 깨지는 영역에 똑같이 float 를 사용할수도 있지만 그렇게 되면 계속적으로 사용해야하므로 소스가 복잡해진다.

  2. clear : both 를 사용한다. (비추)

      → 레이아웃이 복잡해지면 어디가 사라지는 영역인지 알수가 없다.

  3. 상위박스한테 overflow : hidden; 를 사용한다. (간혹사용)

      → 원래 기능을 벗어나는 방식이긴 하지만 저걸 사용하면 높이값을 인식한다.

  4. clearfix를 만들어 사용한다. (강추)

      → 가상으로 영역을 만들어 높이값을 인식하게한다. 

 

- clearfix 코드 사용방법 

clearfix 소스 코드 작성예시

보통은, reset.css에 위와같이 미리 코드를 작성하여 필요한경우에 가져다가 사용한다! 

 

* 메뉴 가로 정렬 

  → display : inline OR float : left 를 사용해도 무방하다 inline을 사용하는경우 여백값이 포함될 수 있으므로 

      float : left 로 사용했다.

 

* padding : inline-block 

  → 예를들어, 가로로정렬 하는것과 동시에 padding값을 적용하는 경우 

 

* position : absolute 

  → container 영역에 relavtive 기준점을 잡아놨으며, 해당 기준점으로 위치를 잡기위해 사용 

 

주의할점은, position 은 반응형 작업을 할때 위치가 바뀌거나해야하는경우가 발생할 수 있으므로 

너무 자주사용하는 것은 안되며 반응형 작업할때의 디자인 작업물을 고려하여 사용해야한다