아래 코드를 보면 class 로 이름지정하는 것과 id로 이름 지정하는것으로 나뉘는 것을 볼 수 있다.
<div id = ""> 으로 나눠지는 것들은 css 에서 # 으로 꺼내와서 사용 할 수 있고,
<div class=""> 로 나눠지는 것들은 css 에서 . 으로 꺼내와서 사용 할 수 있다.
왜 나눈지 이유는 잘 모르겠다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{
margin:0;
padding:0;
}
body,button,input,select,table,textarea{
font-size: 12px;
font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}
button,input{
border-radius: 0;
}
fieldset,img{
border: 0;
}
ol,ul{
list-style: none;
}
address,em{
font-style: normal;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
#header{
background: #eee;
height: 100px;
width: 1000px;
margin: 0 auto 20px auto; /* 시계방향으로 돈다 상 우 하 좌*/
}
#nav{
height: 50px;
background: #eee;
width: 1000px;
margin: 0 auto;
}
#footer{
height: 100px;
background: #eee;
width: 1000px;
margin: 0 auto;
}
#content{
background: #eee;
/*margin-top: 20px;
margin-bottom: 20px;*/
width: 1000px;
margin: 20px auto 20px auto; // 가운데 정렬
height: 600px;
}
/* css 주석하는 방법 /* */ /*
#body{
width: 1000px;
margin: 0 auto; // 가운데 정렬
}*/
.section_main{
width: 700px;
background: #ff0;
float: left;
}
.aside{
width: 300px;
background: #f00;
float: left;
height: 600px;
}
.session{
background: #f0f;
height: 300px;
}
.article{
background: green;
height: 300px;
}
.clearfix {
overflow: auto;
/*어떤 특정 틀에 갇혀있는 것에서 넘어갔을 때는 그냥 넘어가라*/
}
.clearfix::after{ /*clear, display, content 는 그냥 쓴다고 외우면 되고.*/
clear: both; // float:left; 의 값을 해제한다고 생각하면된다.
clear: left, right, both(양쪽 다)
display: block;
content: ""; // "" 안에 글을 쓰게 되면 그냥 화면에 출력해준다.
}
/*clearfix 를 사용하는 이유는 float을 사용하였을 시 기존 높이를 인식 못하는 것을
인식하게 끔 도와준다.*/
/*
암기 float: left; 띄워주는데 왼쪽으로 띄워준다.
우리 목표 사진과 같이 설정된다.
float 을 사용하면 원래 div 안에 있던 높이를 인식하지 못한다.
그래서 색깔 위치가 달라지게 된다.
*/
</style>
</head>
<body>
<!--<div id="body"></div>-->
<div id = "header">header</div>
<div id = "nav">nav</div>
<div id = "content" class ="clearfix"> // clearfix를 추가해줘야된다.
<div class="section_main"> <!-- session 과 article을 묶어준다. -->
<div class="session">session</div>
<div class="article">article</div>
</div>
<div class="aside">aside</div>
</div>
<div id = "footer">footer</div>
<!-- id와 class 둘 다 이름을 입력해준다고 생각하면 된다. -->
<!-- 위 코드는 로봇이 이해한다고 생각하면 편하다 -->
</body>
</html>
목표
결과물
'Web > CSS' 카테고리의 다른 글
| [css] clearfix, 텍스트 위아래로 가운데 정렬, 가운데 정렬, 선 긋기 (0) | 2019.01.23 |
|---|---|
| [css] 배경처리 후 글자 위치 조정 (0) | 2019.01.22 |
| [CSS] <link rel="stylesheet" type="text/css" href="style.css"> (0) | 2018.03.03 |
| [CSS] <img src=" " /> img{float:left;} (0) | 2018.03.03 |
| [CSS] <li id="selected"> #selected{} {padding:30px;} {margin:50px} (0) | 2018.03.03 |
댓글