포지션 기본
basic.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포지션</title>
<style>
/*
position
태그가 위치를 결정하는 css요소
position은 몇 가지 방식을 통해 위치를 선정함.
모든 태그들의 기본 position은 static속성.
position속성이 적용되면 특정한 css를 추가하여 사용할 수 있음.
left, right, top, bottom을 사용할 수 있음.
*(static은 초기값이기 때문에 적용되지 않음. )
-상대적 위치값 : relative
현재 위치를 잡는 기준이 일반적인 flow를 따라감.
(static을 기준으로 자기 위치를 선정함. )
position이 적용되기 이전에 위치를 기준으로 하여 위치를 움직임.
위치를 이동해도 다른 요소에 영향을 주지 않음.
-절대적 위치값 : absolute
relative와 달리 일반적인 flow를 따라가지 않음.
(다른 요소가 해당 요소의 영역을 인식하지 않음.)
body에서 기존 위치값이 초기화됨.
-위치값을 잡는 기준은 부모요소의 유무가 아니라 부모요소의 position유무를
따라감.
static외에 다른 position 속성을 인식하며,
부모요소에 position이 부재일 경우 상위에 있는 객체를 참조하게 됨.
최종적으로 body를 기준으로 하게 됨.
ex)부모에 position이 없는 경우 --> body
ex)부모에 없고 조상에 position이 있는 경우 --> 조상을 기준
absolute상태일때 위치값이 없을 경우
left:auto, top:auto가 기본값이 됨. (현재 위치를 유지)
*/
div.parent{
width: 500px;
height: 500px;
background-color: coral;
margin: 100px;
/* left: 100px; */
/* top: 200px; */
/* position: relative; */
position: relative;
}
div.child{
width: 100px;
height: 100px;
background-color: blue;
/* position: absolute; */
margin: 200px;
top: 0px;
left: 200px;
}
div.child02{
width: 50px;
height: 50px;
background: green;
position: absolute;
top: 0px;
left: 0px;
}
div.parent02{
width: 700px;
height: 100px;
background-color: pink;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="child02"></div>
</div>
</div>
<div class="parent02"></div>
</body>
</html>fix
fixed.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포지션 속성</title>
<style>
/*
fixed
(다른 position들의 기준이 되는 위치 : body를 기준)
viewport(window)
absolute처럼 기존 flow를 따라가지 않으며,
화면을 위치값의 기준으로 함.
레이아웃의 flow에서 완벽한 배제
(body의 크기와는 상관없음)
*/
body{
height: 5000px;
}
div.fixed{
width: 100%;
height: 200px;
background-color: coral;
position: fixed;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="fixed"></div>
</body>
</html>z-index
zindex.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포지션 속성</title>
<style>
/*
position이 동일하게 적용되어 있을 경우 가장 나중에 작성된 객체가
제일 상위에 배치되게 됨.
순서를 바꿔야 할 경우 z-index로 배치함.
z-index의 기본값은 auto
음수나 양수의 숫자를 사용하며, 숫자가 클수록 상위에 배치됨.
의미론적으로 가장 상위에 배치해야 하는 객체의 경우 9999와 같은 숫자를 넣기도 함.
*/
div.box01{
width: 200px;
height: 200px;
background: green;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.box02{
width: 150px;
height: 150px;
background-color: coral;
position: absolute;
top: 0px;
left: 0px;
}
div.box03{
width: 250px;
height: 250px;
background-color: pink;
position: absolute;
top: 0px;
left: 0px;
/* opacity: 0.7; */
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</body>
</html>
메뉴 만들기 예제
ex.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포지션 연습</title>
<style>
html, body, div, ul, li{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
/* in-line block시 list-style을 자동으로 none
float:left 설정해주어, list-style을 none으로 지정해주어야 함.
*/
}
div.header{
width: 100%;
height: 100px;
background: blue;
}
div.inner{
width: 90%;
height: 100%;
margin: 0px auto; /*auto : 중앙정렬*/
background-color: coral;
position: relative; /*logo의 부모요소. relative가 아니면, logo 밑으로 뱉어버림*/
}
div.logo{
width: 100px;
height: 50px;
background-color: pink;
position: absolute;/*질문하기*/
left: 0px;
top: 50%;
margin-top: -25px;
}
/*
absolute일때 수직이나 좌우 가운데 정렬 방법 :
top이나 left 50% 이동 후
영역값의 반절 사이즈를 margin-top, left로 마이너스 시키기
*/
div.icon{
width: 100px;
height: 50px;
background-color: green;
position: absolute;
top: 50%;
margin-top: -25px;
right: 0px;
}
ul.gnb{
width: 900px;
height: 100px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
background-color: pink;
}
ul.gnb li{
width: 150px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="inner">
<div class = "logo">
logo
</div>
<ul class="gnb">
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
<li>menu06</li>
</ul>
<div class="icon">
icon
</div>
</div>
</div>
</body>
</html>
가보자고