비주얼스튜디오코드 기초③ 웹페이지 레이아웃만들기

포토샵) 웹페이지 레이아웃 만들기 3

 

 view > new guide > 가이드라인 설정해주기

vertical 400px
vertical 640px
vertical 1280px 

로고/ 네비게이션/ 컨텐츠 1,2,3 레이어 추가해주기

영역별 색칠해주기(alt+delete)

푸터 

 

비주얼 스튜디어 코드) 웹페이지 레이아웃 만들기 3

웹페이지 기본구성요소인

header/ banner/ contents/ footer 레이아웃 지정

header안에 로고, 네비게이션, contents안에 세부콘텐츠를 추가해야함

header안 자식인(로고. 네비게이션)을 넣어준다

.logo 을 치면 <div class="logo"></div> 
.nav 을 치면 <div class="nav"></div> 

자식은 . 으로 시작하고 자식은 클래스 이다. 

 

css에서는 #header .logo{} /  #header .nav{} 

header부분에  로고와 네비게이션을 넣어줬을때 로고밑으로 헤더가 위치해있고 배너와 같은 층에 있기 때문에 나타나지 않는다.

그래서 float명령어로 로고와 네비게이션을 2층으로 띄어줘야함.

header는 레이어1층 float은 레이어 2층으로 올려줌

로고는 float:left / nav는 float:right 명령어로 나타나게해줘야한다.

float:left;  : 레이어를 윗 칸 올려서 왼쪽 맞춰서 배치
float:right;  : 레이어를 윗 칸 올려서 오른쪽 맞춰서 배치

 contents안에 contents1,2,3도 추가 / css에도 컨텐츠 자식 밑에 .cont1,2,3 추가해준다.

contents1,2,3도 마찬가지로 왼쪽 밑으로 떨어져서 배열됨

contents1,2,3 각각float: left; 로 명령어 작성

contents1,2,3이 공간이 꽉 차있기 때문에 왼쪽으로 차례대로 붙는다. 

컨텐츠1,2,3 세개가 차례대로 정렬이 된다.

footer도 두개 나눠주기

웹페이지 레이이아웃 완성!