Web/CSS

[css] 간단한 레이아웃 만들기

뉴비뉴 2019. 1. 22.

아래 코드를 보면 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;

}

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 = "header">header</div>

<div id = "content" class ="clearfix"> // clearfix를 추가해줘야된다.

<div class="section_main"> 

<div class="session">session</div>

<div class="article">article</div>

</div>

<div class="aside">aside</div>

</div>

<div id = "footer">footer</div>

</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

[css] 간단한 레이아웃 만들기

'Web > CSS' 카테고리의 다른 글

댓글

💲 추천 글

티스토리툴바