Delete- (HTML 실습)

1. 레이어의 최대길이와 최소길이설정
max-width: 1400px;
min-width: 1060px;


body{
min-width: 1060px;
}

.container{
max-width: 1400px;
}


2. 컨텐츠 가운데 정렬하기
.header{
background: 회색;
}
.container{
background: 하얀색;
margine 0 auto;
}

3. padding 값도 넣어준다.
.container{
background: 하얀색;
margine 0 auto;
padding: 0 20px; 여백이 있어서 보기 좋다
}

4. 글씨 크기 설정
html{
font-size:10px;
}

body{
font-size:1.8rem;
}

5.로고 배치하기
.container{
position: relatvie;
}

.logo{
position: absolute;
top:0;
left:0;
}

6.네비게이션 배치하기
.nav{
text-align: right: 오른쪽 배치

}
.list-item{
display: inline-block;일렬로 정렬

}

7.로고가 헤더를 벗어난 경우
.header{
height 72px;
}
.logo{
margine:0;
}

.list{
margine: 0;
}

header 영역: 페이지마다 반복되는 머릿말부분

navigation bar: 다른 페이지로 이동할 수 있는 메뉴버튼 or 검색버튼

main content: 본문의 주요 콘텐트 블록 문서에서 딱 한번만 사용 가능

side bar: 기타 정보나 광고내용.

footer영역: 주소, 카피라이트, 연락처

 

header 마크업

1. 메인과 사이드 컨텐츠 레이아웃 나누기

.main-content{
float:left;
width: 70%;
backgroudn: pink;
}

.side-content{
float: right;
width: 30%;
backgroudn: white;

2. list 여러개 만들기
(li>a)*8

header 레이아웃

 

header 스타일링

1.기본 설정
.header{
padding; 15px 0 4px;
}

body{
line-height:1.6; 줄간격;
}

 

main hero 마크업 & 스타일링

padding 50px 0;으로 여백주기
border-bottom: 1px solid #white; -> 선만들기

main-main-content 스타일링

 

main side-content 마크업

 

main side-content 스타일링