실습 HTML & CSS - Header

CSS(외부) head에 불러오기

<link rel="stylesheet" href="./style.css>

모든 브라우저에서 통일된 화면을 보도록 브라우저 기본 스타일을 초기화

css normalize> 브라우저의 오차를 줄이는 오픈소스 (css reset > 너무 구시대에 맞춰짐)

>download>normalize.css

<link rel="stylesheet" href="./normalize.css>

모든요소, 가상요소들을 선택하는 셀렉터 *

*,
*:: before,
*:: after{
	box-sizeing: border-box;
}

l: 8개 단축키

(l:>a)*8 + TAB

min-width

body{
min-width: 1060px;
}

max-width 

#./header/container
container{
max-width: 1040px;
}

<가운데 정렬과 단축>

.container{
margine: 0 auto 0 auto;
margine: 0 auto;
margine: 0;(모두 0)
padding: 15px 0 4px; # 위 좌우 아래
}

<콘테이너의 좌우 여백을 주어 브라우저창이 줄어들어도 여백이 있게>

.padding: 0 20px;

<폰트 사이즈> - font-size, rem

html{
font-size:10px;
}

body{
font-size:1.8rem;
}

<로고 고정하기> - position: relative, absolute

.header{
height: 72px;
}

.container{
position: relative;
}
logo.{
margine: 0;
position: absolute;
top: 0;
left: 0;
}

<네비게이션 배치> - text-align, display: inline-block

.nav{
text-align: right;
}

.list{
margine: 0;
}

.list-item{
display:inline-block;
}

<줄간격> - line-height

body{
line-height: 1.6;
}

<.padding값 상속> - inherit

.container{
padding: 0px 20px;
}

.logo{
padding-left: inherit;

<글씨 두겁께> - font-weight

.list-item{
font-weight: 700;
}

<웹폰트 넣기> - font-family

구글 폰츠> Roboto 검색> selecti this font> customize> standard-link ctrl c+v> header에 추가

body{
font-fmaily: Roboto;
}

<text-decoration 초기화> - text-decoration: none;

a{
text-decoration:none;
}

<navigation 줄간격 현상 없애기 & 폰트 크기 & 생상변경> - display: block

.list{
font-size: 0;
}

.list-item:{
font-size: 1.3rem;
}

.list-item > a{
color: white;
display: block;
padding: 10px; #글씨만 딱 선택하기 힘들기 때문
}

<잘 선택했는지 색상 변화> - > a: hover

.list-item > a:hover{ 
color: green;
}

<대문자 만들기> - text-transform: uppercase

.list-item{
text-transform: uppercase;
}