03/04 HTML/CSS 스타일(집중화/리셋), 레이아웃

스타일 링크하기

 

스타일 집중화

 

 

style.css 폴더와 파일을 따로 만들어준다.

 

<link href="상대 경로위치" type="text/css" rel="stylesheet">로 연결

 

rel : 관계, 스타일을 주는 관계를 가지고 있다는 것을 명시해주어야 한다.

type : 어떠한 타입인지 분명히 해줘야 해서 필요.

 

 

 

 

 

 

 

스타일 리셋과 평준화

 

 

html에 기본적인 스타일이 있다 (브라우저마다 또 다 다름)

내가 원하는 스타일과 다르다면 리셋

 

 

 

 

* reset.css는 기존에 있던 모든 스타일 없어짐

* normalize.css는 기존의 html 스타일을 (브라우저마다 다른 부분도 평준화 시켜서) 사용

 

 

 

 

 

 

html5shiv : 옛 브라우저도 평준화 해 줌

 

 

 

 

 

 

initializr : 틀을 만들어놓고 준비해놓는 녀석(준비물) -> no신경

 

 

 

 

 

 

 

레이아웃 블록

 

 

가구 / 방

 

 

레이아웃

: 방을 만들어 배치하는 것

 

과거에는 모든 배치를 table 태그로 해결 -> css등장

 

 

 

 

대부분 격자형

 

 

한 방향으로 (가로->세로/ 세로->가로) 여러 번 반복해서 잘라.

 

 1. 색이 달라지는 부분, 색칠하기 편하게 자르기

 2. 콘텐츠 있는 부분, 없는 부분 나누기

 

방을 층별로 나누고 층을 칸으로 나누고 

 * 가로로 나눈 다음 세로로 가로질러 나눌 수 없다 (나눈 방 안에서만 또 나누기)

 

 

 

 

 

방 나눠 보기

 

가구말고 방만 만들어야했다.  틀림

가구는 나중에, 큰틀만 나눠줘야함