반응형
div
div 는 영역을 설정하는 코드이다.
앞서 간략히 설명했던 div 기능에 대해 자세하게 설명해보겠다.
[HTML] HTML 기본기능, 영역 설정
줄이 분리된다. 줄이 바뀌며 고유한 본인의 영역이 생긴다. 가나다 라마바 이전 내용의 바로 옆에 출력된다. 앞에 연결이 되어야하기 때문에 스타일이 적용되지 않는다. abc def
skylarcoding.tistory.com
1. static
div 영역들을 순서대로 배치한다.
<style type = "text/css">
#div1{
width:100px;
height:100px;
background-color:lavender;
position:static; /* 순서대로 배치 */
}
#div2{
width:100px;
height:100px;
background-color:papayawhip;
position:static; /* 순서대로 배치 */
}
#div3{
width:100px;
height:100px;
background-color:beige;
position:static; /* 순서대로 배치 */
}
</style>
2. relative
상대 위치이다.
기준점 (앞요소) 으로부터 위에서. 왼쪽으로 얼만큼 떨어진 위치로 설정한다.
#div2{
width:100px;
height:100px;
background-color:papayawhip;
/* top, left : 얼만큼 떨어진 건지 지정 */
top: 100px;
left:50px;
}
3. absolute
절대 위치이다.
기준점은 왼쪽 꼭대기이다.
#div3{
width:100px;
height:100px;
background-color:beige;
position:absolute; /* 절대위치. 기준점은 왼쪽 꼭대기 */
top:50px;
left:50px;
}
4. fix
고정 위치이다.
스크롤이 이동해도 항상 제자리이다.
#div4{
width:100px;
height:50px;
background-color:aliceblue;
position:fixed;
top:50px;
left:300px;
}
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
#div1{
width:100px;
height:100px;
background-color:lavender;
position:static;
}
#div2{
width:100px;
height:100px;
background-color:papayawhip;
position:relative;
top: 100px;
left:50px;
}
#div3{
width:100px;
height:100px;
background-color:beige;
position:absolute;
top:50px;
left:50px;
}
#div4{
width:100px;
height:50px;
background-color:aliceblue;
position:fixed;
top:50px;
left:300px;
}
</style>
</head>
<body>
<div id = "div1"> aaa </div>
<div id = "div2"> bbb </div>
<div id = "div3"> ccc </div>
<div id = "div4"> top으로 </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>반응형
