[Web]포트폴리오 웹사이트 제작 - 3 . 레이아웃 구성 (2) - 전체 디자인 / main 크기 / 위치 수정

  레이아웃 전체 디자인  

- 이전의 레이아웃을 이제 색상과 텍스트를 정확하게 입력해서 전체 디자인을 완성해 보겠습니다.

- 먼저 이전의 레이아웃 디자인을 살펴 보겠습니다.

- 각 부분들의 크기와 위치를 살펴 보기 위해 임의의 배경색을 입혀 놨습니다.

- 위치는 그럭저럭 제가 생각한 곳에 위치해 있습니다.

- 제가 원하는 디자인은 Simple하면서 깔끔한 디자인입니다.

- 이제는 각 컨텐츠에 넣고 싶은 텍스트와 이미지를 입력하여 전체적인 디자인을 구성했습니다.

 

  디자인 수정 - 전체 디자인  

- 디자인을 썩 잘하는 편은 아니라 심플하게 구성을 했습니다.

 

- 전체적인 바탕은 흰색으로 하고, 좌측 sidebar에 Menu Nav들 넣고 가운데에 Main text와 Main img를 넣었습니다.

- 이제 위 이미지를 가지고 코드로 구현합니다.

 

  코드 구현  

- 먼저, 기존에 만들어 놓은 index.html 의 각 태그들의 style들을 배경색이 아닌 border를 통해 각각 어떻게 위치하는지 알아보겠습니다.

 

 

- 위에서 아래로 header/ main/ footer가 위치해 있고, main 안에 sidevar nav / Main Text / Main image가 위치해 있는 것을 확인 할 수 있습니다.

- 새롭게 수정한 전체적인 디자인을 보면 header 부분과 footer부분의 바탕색이 흰색이고 중요한 컨텐츠들이 아직은 없음을 알 수 있습니다.

- 레이아웃의 크기는 1440*900에 맞춰져 있습니다. 크기 지정은 프로젝트마다 다르겠지만, 저는 1440*900이 가장 무난하다고 생각되어 선택했습니다.main의 크기를 레이아웃 크기로 맞추고 가운데 정렬 시킵니다. 각 컨텐츠들의 위치와 크기를 조정합니다.

 

  단계   

1. header, footer 높이 수정

2. main 크기 수정

3. main 가운데 정렬

4. main 안의 컨텐츠들의 크기와 위치 수정(다음 포스팅)

 

  1.header, footer 높이 수정  

- header,footer height:100px => height:50px 로 수정합니다. 향후 필요에 따라 수정 될 수 있습니다.

header {
    width: 100%;
    height: 50px;
    border:1px solid black;
}

footer {
    width: 100%;
    height: 50px;
    border:1px solid black;
}

 

  2. main 크기 수정  

- 1440*900 에 맞춰 width 와 height를 수정합니다.

- width는 1440px에 맞춰도 문제가 없습니다.

- height는 header 와 footer를 고려 합니다. 하지만 footer의 경우 크게 상관하지 않고 header부분만 고려 하겠습니다.

- header의 height가 50px 이므로 main 의 height 를 850px로 수정합니다.

#main {
    position: relative;
    width: 1440px;
    height: 850px;
    border:5px solid black;
}

 

  3. main 가운데 정렬  

- 이제 main을 가운데 정렬 시킵니다.

- margin을 사용해서 정렬 시킵니다.

#main {
    margin: 0 auto;
    position: relative;
    width: 1440px;
    height: 850px;
    border:5px solid black;
}

- 가운데로 잘 들어 왔네요. 

- 다음 포스팅에서 각 컨텐츠들을 수정해 보면서 완성해 보겠습니다.