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

<웹디자인 프로세스>

concept(overview, color(주조색,보조색,강조색)) > logotype(텍스트, 아이콘), 로고설명, 로고 치수 > main font(영문,한글)

두께 > wire frame(골조), 레이아웃 

 

TOOL: 피그마/포토샵/일러스트레이션

 

Reference > 회사의 웹페이지를 벤치마킹

 

웹페이지 주제정하기: 반응형X , 팀프로젝트(개발), 반응형

 

<웹페이지 구성요소>

헤더(Header) 

배너(Banner)

컨텐츠(Contents)

푸터(Footer)

 

비주얼 스튜디오 코드 

_확장프로그램 Live Server 설치

extensions > live server 설치

live server : 미리보기 프로그램

하단에 Go Live라고 뜨면 실행가능한 상태이다.

html 5

css: css3버전, 바디의 속성을 바꿔줌  

 

*포토샵으로 웹디자인 레이아웃만들기_1

눈금자 픽셀단위로 변경

view > newguide > Horizontal 체크, position 100px > ok

header부분 guide line 생성

사각형 선택영역을 header부분 선택

alt+delete 로 header 부분 색 채워넣기

banner 레이어 만들어주기

banner가이드라인 만들어주어 banner영역 설정

contents레이어 생성

contents 가이드라인 지정하여 영역설정

footer도 마찬가지로 영역지정을 해준다

웹페이지를 구성하는 전체영역이 만들어졌다.

file > new

wrap: 1,920 X 1,100

header: 1,920 X 100

banner:  1,920 X 500

contents:  1,920 X 400

footer: 1,920 X 100

영역별 사이즈 설정 해주기

 

레이아웃만들기 _2

** 표준 모니터 권장 사이즈 (w)1,280 / 1,920  

 

*비주얼 스튜디오 코드로 웹디자인 레이아웃만들기_1

 

div: 사각형 생성

<div></div>

id: 이름부여, 선택자

<div id="wrap"> 은 wrap 이름의 감싸고있는 사각형에게 id를 부여해줌
#wrap 으로 하면 자동으로 <div id="wrap"> div가 나옴

css에서 너비, 높이, 컬러값을 지정해 주어야함

style (css) 두가지가 있다. 내부 와 외부 css 

<style>

css에서는 id를 #으로 표시해줌

<style>
#wrap{}
</style>

{} 안에 너비값, 높이값, 배경색 넣어주기

미리보기는 배율 100%상태에서 설정해놓고 봐야함.

margin 0 auto (m-0auto): 위아래여백 0 / 좌우를 자동으로 맞춘다.

wrap안에 웹페이지 구성요소를 넣는다.

<웹페이지 구성요소>
헤더(Header) 
배너(Banner)
컨텐츠(Contents)
푸터(Footer)

 

header 부분 만들기 

wrap 안에 div 박스 만들어주기

<div id="header"></div>
#header 자동으로 div id 부여 가능 

div 안에 wrap 과 header의 이름이 있다.

css에 header 넣어주기

<style>
      #header{ }
</style>

{} 안에 너비값, 높이값, 배경색 넣어주기

나머지 banner, contents, footer 동일한 방법으로 영역 만들어주기

레이아웃 만들기_2 (wrap 1,920x1,100)

css에서 아이디는 부모없이 쓴다. 

#wrap #header{} → #header{}

최종코드