고정 그리드 레이아웃 만들기 (예시)

(코드펜 첨부한 것은 생각나는 대로 만든 것이다.)

고정 그리드 레이아웃 만드는 방법

1. HTML

• html으로 큰 틀을 잡는다
  • wrap이라는 큰 박스 하나 만들기 (div id="wrap")
  • wrap 안에 div 박스 3개 만들기 (#header, #section, #footer)
  • div id="header"처럼 만들어도 되고,
    시맨틱 태그로 header, section, footer 로 만들어줘도 된다.
• header 자리에는 제목이 들어간다. (header 안에 h1 태그 넣기)
• section 부분에는 내용이 들어가는 부분(왼쪽)과 사이드바(오른쪽) 2개의 박스가 있다.
  • section 안에 div 박스 2개 만들기.
  • id를 붙여줘도 되고, 시맨틱 태그로 article, aside 줘도 된다.)
• footer 자리에도 내용이 들어가지만, 지금은 모든 박스 안에 자리가 있다는 것만 명시해줘도 된다.

2. CSS (head의 style 태그 안에 / 또는 css 파일을 만들어서 html head에 link ref로 걸기)

• (먼저 전체(*)에 마진, 패딩 빼준다. box-sizing은 border-box 로 한다.)
  • 이 작업은 지금 상태에서는 해줘도 되고 안해줘도 상관없지만... 나중에는 나도 모르게 하게 될지도?
• #wrap의 크기를 정해준다. (width는? height는? border랑 padding은? margin은 0 auto로 하면 가운데 자동 정렬)
• header, section, footer 크기도 정해준다.
  • 잘 모르겠다면 임시로 background 색을 넣어가면서 작업해도 된다.
• header의 h1도 꾸며준다. (글자 정렬은 text-align, 글이 박스 위에 붙어있기만 한다면 line-height로 정렬해준다. line-height는 height와 같은 값 주면 가운데로 온다. 글자 색도 넣어준다.)
  • 상자를 꾸밀 것이면 div에, 글씨를 꾸밀 것이면 h1에 준다.
    물론 h1도 display는 block이기 때문에 큰 문제는 되지 않지만, 상자를 꾸밀 용도라면 div에 꾸미는 쪽이 좋다고 나는 생각한다.
• section 태그 안에는 2개의 자식 태그가 있다.
  • section 태그에는 width만 있고, 자식 태그에는 width와 height를 모두 준다. 일단 지금은 float을 주지 않았기 때문에 자식 태그들이 자신의 크기만큼 어느정도 차지하고 있을 것이다.
  • 1번째 태그(콘텐츠 내용이 들어가는 왼쪽 부분)에는 float : left,
    2번째 태그(사이드바 내용이 들어가는 오른쪽 부분)에는 float :r ight를 준다.
    (이 레이아웃에는 둘다 float:left 줘도 크게 문제는 없으나,
    더 많은 태그들이 있다면 어느 곳에 배치할지 생각하고 코드를 입력하도록 한다.)
  • 이 상태로 저장하고 홈페이지를 보면 부모 태그(section)은 height가 없기 때문에 코드가 꼬이게 된다.
    이 방식으로 코딩을 하였다면,
    • 부모 태그 (section)에 overflow : hidden을 준다.
      (이 방식은 부모 태그에 height가 없을 때만 써먹기를 추천. 만약에 부모 태그에 height까지 다 있는 상태에서 쓰면 이상하게 만들 수도 있다.)
    • overflow:hidden 주지 말고, 다음 요소인 footer에 clear:both를 줄 수도 있다. (다음 요소에는 float을 어느 쪽이든 모두 없앤다.)
      clear는 float을 안 쓰는 다음 요소가 있을 때 주로 사용된다. (내가 마지막 요소까지 float을 줬는데, 그 다음에 clear를 주고 싶다면 임시 div 태그 하나 더 만들어서 거기에 clear을 줘야한다는 불편함이 있을 수도 있다.)
• footer도 크기를 주어서 자리를 잡도록 한다. (내용이 가운데에 오고 싶다면 text-align과 line-height를 이용한다.)