HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지 만들기 연습</title>
<!-- <link rel="stylesheet" href="/HTML5/ch03_id_class/css/mainPage.css">
맨 앞에 / 가 나올때를 절대경로 라고 부른다. -->
<!-- <link rel="stylesheet" href="./css/mainPage.css">
맨 앞에 / 가 없을 경우를 상대경로 라고 부른다.
./ 의 뜻은 현재경로를 말하는 것이다. -->
<link rel="stylesheet" href="css/mainPage.css">
<!-- 상대경로를 나타낼때 현재경로를 뜻하는 ./ 는 생략가능하다. -->
</head>
<body>
<div id="container">
<div id="header">
<div>
<span>메일</span>
<span>카페</span>
<span>블로그</span>
<span>부동산</span>
</div>
</div>
<div id="side" class="custom">
여기는 Side 입니다.
여기는 Side 입니다.
</div>
<div id="contents" class="custom">
여기는 Contents 입니다.
여기는 Contents 입니다.
</div>
<div id="footer">
<div>
회사주소 : 서울특별시 마포구 월드컵북로 쌍용강북교육센터 <br>
담당자 : 양혜정 hemint@naver.com
</div>
</div>
</div>
</body>
</html>CSS
@charset "UTF-8";
body{
/* 확인용 : background-color: red; */
font-family: Arial, "MS Trebuchet", sans-serif;
/* 대부분 기본 폰트 : Arial, "MS Trebuchet", sans-serif; 폰트명에 공백이 있을경우 "" 을 해주어야 한다. */
border : solid 0px gray;
word-break : break-all;
/* 공백없이 영어로만 되어질 경우 해당구역을 빠져나가므로 이것을 막기위해서 사용한다. */
/* === 여백설정 === */
/* == margin은 바깥여백 이다. == */
/* margin: 100px 100px 50px 20px; */ /* 상 우 하 좌 시계방향 */
/* margin: 100px 50px; */ /* 상하 우좌 상하는 바깥여백을 100px;을 주고, 우좌는 바깥여백을 50px;을 준 것이다. */
/* margin: 50px; */ /* 상우하좌 상우하좌 모두 바깥여백을 50px;을 준 것이다. */
margin: 0; /* 바깥 여백을 없는 것으로 하겠다. (default 조금 공간이 있다.)*/
/* == padding 은 안쪽여백 이다. == */
/* padding: 100px 100px 50px 20px; */ /* 상 우 하 좌 시계방향 */
/* padding: 100px 50px; */ /* 상하 우좌 상하는 안쪽여백을 100px;을 주고, 우좌는 안쪽여백을 50px;을 준 것이다. */
/* padding: 50px; */ /* 상우하좌 상우하좌 모두 안쪽여백을 50px;을 준 것이다. */
padding: 0; /* 안쪽 여백을 없는 것으로 하겠다. (default 값)*/
}
div#container{
border: solid 0px navy;
width: 80%;
margin: 2% auto; /* 상하는 2%; 우좌는 남은 20%에서 좌우로 1/2씩 균등하게 주겠다. 즉, 화면의 가운데로 위치하겠다는 말이다. */
}
div#container > div#header{
border: solid 0px gray;
height: 100px;
background-color: #ccc; /* #ccc 는 #cccccc 이다. */
margin-top: 50px; /* margin: 50px 0 0 0; 와 같은 것이다. */
/* margin-right: 50px; */ /* margin: 0 50px 0 0; 와 같은 것이다. */
/* margin-bottom:50px; */ /* margin: 0 0 50px 0; 와 같은 것이다. */
/* margin-left:50px; */ /* margin: 0 0 0 50px; 와 같은 것이다. */
}
div#container > div.custom{
display: inline-block;
height: 400px;
/* padding: 10px 10px 10px 20px; side 와 contents 를 같으게 줄 경우*/
}
div#container > div#side{
border: solid 0px green;
width: 30%;
background-color: #888;
padding: 10px 10px 10px 20px;
}
div#container > div#contents{
border: solid 0px orange;
/* border 1px 일 경우 width:69.43%; */
width: 65.11%;
background-color: #eee;
padding: 10px 10px 10px 30px;
}
div#container > div#footer{
border: solid 0px purple;
height: 100px;
background-color: #ddd;
/* padding: 50px 0 0 500px; ============================== 방법1*/
}
/* 테두리는 확인용이였으니 border 를 0px 로 만들어주기 */
div#container > div#header > div{
border: solid 0px blue;
padding: 3% 0 0 20%;
}
div#container > div#header > div > span{
display: inline-block;
border: solid 0px darkgreen;
width: 12%;
height: 30px;
background-color: #03c75a; /* #03c75a 네이버색 */
font-size: 14pt;
text-align: center;
padding-top: 0.65%;
margin-right: 5%;
}
div#container > div#footer > div{
border: solid 0px red;
width: 28%; /* 크기 먼저 잡고 auto 하기 */
margin: 0 auto;
padding-top: 30px;
}
정리
- ch03_id_class -> 02_mainPage.html, mainPage.css
