반응형
웹디자인 기능사 실기 문제였던 JUST 쇼핑몰을 함께 만들어봐요.
1. 폴더, 파일 만들기
먼저 사용하기 위한 폴더와 파일을 만들어 줍니다.
큰 틀(JUST쇼핑몰)안에 필요한 다양한 폴더와 파일을 만들어 주고 html에 '!'를 쳐서 기본 서식을 받습니다.
2. 큰 구역 나누어주기
가장 먼저 큰 틀을 잡아줄거에요.
A 부분이 header / B 부분이 slide / C 부분이 contents / D부분이 footer가 될 거에요.
가로로 틀을 나누어 봅시다.
index.html 쪽 코드입니다.
슬라이드
컨텐츠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link href="./css/style.css" type='text/css' rel='Stylesheet'/>
<!--css에 style을 링크해주었어요.-->
<title>JUST쇼핑몰</title>
</head>
<body>
<div id="wrap">
<header id="header">
해더
</header>
<div id="slide">
슬라이드
</div>
<div id="contents">
컨텐츠
</div>
<div id="footer">
푸터
</div>
</div>
</body>
</html>link를 걸어준 style 쪽 소스 입니다.
/*문자인코딩 방식 설정*/ @charset "UTF-8"; /*wrap 크기,색깔 지정*/ #wrap{ width: 1200px; height: 700px; background-color:red; margin:0 auto ; /*가운데 정렬*/ } #header{ width: 1200px; height: 100px; background-color: orangered; } #slide{ width: 1200px; height: 300px; background-color: yellow; } #contents{ width: 1200px; height: 200px; background-color: yellowgreen; } #footer{ width: 1200px; height: 100px; background-color: blue;/*문자인코딩 방식 설정*/
@charset "UTF-8";
/*wrap 크기,색깔 지정*/
#wrap{
width: 1200px;
height: 700px;
background-color:red;
margin:0 auto ; /*가운데 정렬*/
}
#header{
width: 1200px;
height: 100px;
background-color: orangered;
}
#slide{
width: 1200px;
height: 300px;
background-color: yellow;
}
#contents{
width: 1200px;
height: 200px;
background-color: yellowgreen;
}
#footer{
width: 1200px;
height: 100px;
background-color: blue;
이렇게 4구역으로 칸이 나뉜것을 볼 수 있습니다.
3. 각 구역별 부분 나누기
index.html에서 header가 포함된 소스 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link href="./css/style.css" type='text/css' rel='Stylesheet'/>
<link href="./css/header.css" type='text/css' rel='Stylesheet'/>
<title>JUST쇼핑몰</title>
</head>
<body>
<div id="wrap">
<header id="header">
<div id="logo">
로고
</div>
<div id="nav">
네비게이션
</div>
</header>
<div id="slide">
슬라이드
</div>
<div id="contents">
컨텐츠
</div>
<div id="footer">
푸터
</div>
</div>
</body>
</html>
로고
슬라이드
컨텐츠
link를 걸어준 header.css 쪽 소스 입니다.
#header>#logo{
width: 200px;
height: 100px;
background-color: darkcyan;
float: left;
}
#header>#nav{
width: 1000px;
height: 100px;
background-color: darkmagenta;
float: left;
}
4구역 가로로 나뉘었던 칸 중 header부분이 두개로 나누어진 것을 볼 수 있습니다.
같은 방법으로 컨텐츠, 푸터 부분도 해 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link href="./css/style.css" type='text/css' rel='Stylesheet'/>
<link href="./css/header.css" type='text/css' rel='Stylesheet'/>
<link href="./css/contents.css" type='text/css' rel='Stylesheet'/>
<link href="./css/footer.css" type='text/css' rel='Stylesheet'/>
<link href="./css/slide.css" type='text/css' rel='Stylesheet'/>
<title>JUST쇼핑몰</title>
</head>
<body>
<div id="wrap">
<header id="header">
<div id="logo">
로고
</div>
<div id="nav">
네비게이션
</div>
</header>
<div id="slide">
슬라이드
</div>
<div id="contents">
<div id="cont1">
컨텐츠1
</div>
<div id="cont2">
컨텐츠2
</div>
<div id="cont3">
컨텐츠3
</div>
</div>
<div id="footer">
<div id="logo">
로고
</div>
<div id="copyright">
카피라이트
</div>
<div id="sns">
sns
</div>
</footer>
</body>
</html>
로고
슬라이드
컨텐츠1
컨텐츠2
컨텐츠3
로고
카피라이트
sns
이렇게 나누어 진 것을 볼 수 있습니다~
반응형
'프로그래밍 공부 > HTML' 카테고리의 다른 글
| [HTML.CSS] float을 이용해 좌우 배치하기 (0) | 2022.12.01 |
|---|---|
| [HTML.CSS] display 에 따른 방향 (0) | 2022.12.01 |
