반응형 웹사이트 제작이론[레이아웃 1단,2단]

1단 레이아웃 제작

 

스타일 정보

• 컨텐츠 최대 가로 길이: 1200
• 사이트 최소 가로 길이: 800
• 컨텐츠 가운데 정렬

주요 태그 및 속성 

• HTML
  • div
  • header
  • section
  • footer
• CSS
  
  • max-width
  • min-width
  • margin

---

max-length 최대 늘어나는 길이

min-length 최소 줄어드는 길이

감싸는 부모요소 wrap에 최소 길이 min-length를 사용했다면

자식요소에서는 적어줄 필요가 없다.

 

아래처럼 wrap으로 감싸주게 된다.

<p>태그는 block 요소임. <p>태그나 header, section footer div 등은 block 요소이니 가운데 정렬은 margin: 0 auto;를 이

<!-- div를 이용한 1단 레이아웃 -->
<div class="wrap">
   <div class="header">header</div>
   <div class="content">content</div>
   <div class="footer">footer</div>
</div>

<!-- html5를 이용한 1단 레이아웃 -->
<div class="wrap">
    <header>header</header>
    <section>content</section>
    <footer>footer</footer>
</div>

---

다단 레이아웃 제작

 

과거에는 다단 레이아웃의 짜임새가 테이블과 비슷하고 PC에서만 고정적인 사이즈로 표현을 했기 때문에 <table>태그를 이용하여 레이아웃을 만드는 방법이 유행을 했습니다. 하지만  웹표준이 발표되면서 현재는 <table> 태그로 레이아웃을 제작하는 사이트는 찾아보기 힘듭니다.

 

주요 기능 

• 콘텐츠의 행(column)이 두개를 갖는다.
• 콘텐츠와 사이드영역의 구분선을 갖는다.
• 구분선은 헤더와 푸터에 항상 맞닿는다. 

스타일 정보

• 콘텐츠 영역 가로길이: 500px
• 사이드 영역 가로길이: 300px

주요 태그 및 속성 

• HTML
  • div
• CSS
  
  • float
  • clear
  • display: table
  • display: table-cell

---

float으로 제작

(과정: container로 필드 만들어서 원하는 위치에 박스 가져다 놓고 after로 float해제한후,늘려버리기 )(특징: container의 높이 값을 통해 구분선을 만들어야하고, 반드시 float을 해제 해줘야함.)

이제 완성된 html에 css코드를 추가하여 우리가 원하는 형태의 레이아웃을 스타일링 해보겠습니다.

css

두 코드 결과

float을 이용해 정렬을 하기 위해서 content와 aside 영역에 float:left 속성을 주고 각각의 요구사항에 따라 가로사이즈를 부여했습니다.

하지만 이것만으로는 float으로 정렬하는 과정이 마무리 되지는 않습니다. 여기까지 따라오셨다면 아마 푸터가 컨텐츠영역의 뒤로 가서 헤더에 붙어버렸을 겁니다. 이제 우리는 float 뒤에 오는 요소(footer)를 float에서 해제해야 합니다.

---

float을 해제 하기 위해 가상 선택자 after을 이용.

 

 

 

 

 

 

 

 

footer가 아래로 오길 원함. // 구분선이 100%로 다 내려오길 원함.

---

이런식으로 min-height는 부모요소로 부터 높이 값을 물려받아야 사용이 가능해서 따로 지정해줌.

 

1차 모양 완성

.container에 margin -100과 padding 100을 줘서 서로를 당겨보려 했으나 안 당겨짐. 

container의 padding 값에 min-height 값이 포함되어 있기 때문임. 그래서 box-sizing을 통해 padding에 영향 못주도록 해줌.

box-sizing: border-box;는 border값은 유지를 최우선 적으로 함. 그래서 border 안의 content.padding값을 줄여버림.

---

container 상태. 각 꼭짓점. 0,0 상태 유지중.

 

아래처럼 점과 점을 채워서 이으면 구분선이 완성!(top 100px , right 300px), (Bottom 100px, right 동일)

---

float의 여러 해제 방법중 after가상 선택자를 이용한 방법 사용.

 

container에 relative 주고,  aside에 저렇게 top, bottom, right 점들의 범위를 적은 후,

거기를 5px 크기의 선으로 채워달라 명령한 해주면... 아래처럼 나옴

content 높이만, container의 min-length: 100% 이자, wrap의 100% 즉, 1300px로 바꿔주면 아래와 같이 채우게 됨

---

dispaly: table로 길이 맞춰주기

(특징: container의 높이값을 기준으로 table에 높이값이 상속되어 구분선을 쉽게 제작)

(과정: 먼저 table, table-cell로 붙이고 부모요소 만들어주고, 아래요소 min-height 100%를 통해 늘려버리기)

 

container에 display: table을...

content, aside에 display: table-cell을 주면 바로 inline 정렬처럼 가로로 정렬이됨

 

거기에 추가로

table-layout을 통해 고정시키면 container가 고정되면서 값들을 내마음대로 설정 가능.

 

 

footer 끌어당기는 건 float 이용할 때와 동일

구분선은 content나 asided의 border로 넣으면 끝.