HTML5, CSS3을 이용해 요소들의 위치를 지정(변경)해보겠습니다.
앞전 <a>태그에 대한 글에 위치 지정하는 부분이 나오긴 했지만 제대로 설명하지 않고
넘어갔는데 이번에 제대로 알아보겠습니다.
위치를 지정하기 위해서는 먼저 CSS의 position 값을 줘야 합니다.
그 전에 position 속성의 종류(키워드)에 대해 설명하겠습니다.
| ① relative | 상대값 / 위치 설정 가능하고 자리를 차지함 |
| ② absolute | 절대값 / 절대 위치 설정 가능 |
| ③ fixed | 고정값 / 화면 기준으로 위치 설정 가능 |
| ④ sticky | 스크롤을 내리면 위치 설정 |
| ⑤ static | 기본값 / top, left, bottom, right 지정 안됨 |
| ⑥ inherit | - |
| ⑦ initial | - |
| ⑧ revert | - |
| ⑨ unset | 위치를 설정하지 않음 |
#1 static
기본값으로 따로 표시하지 않아도 됩니다.
가로, 세로 100px인 빨강색 사각형을 <div>태그를 활용해 만들어주겠습니다.
표시 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position속성</title>
<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"> -->> CSS 가로, 세로, 위치 지정
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
}
#static1{
position: static;
top:100px; --> 적용X
left: 100px; --> 적용X
background-color: red;
}
</style>
</head>
<body>
<div id="static1">static</div>
</body>
</html>
<div>태그에 id를 주어 css에서 불러와 position과 가로, 세로, 배경색까지 넣어주었습니다.
static1에 top과 left 값을 줬지만 적용이 안된 것을 알 수 있습니다.
이번에는 static요소를 더 불러오겠습니다.
표시 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position속성</title>
<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
}
#static1{
position: static;
top:100px;
left: 100px;
background-color: red;
}
#static2{
background-color: red;
}
</style>
</head>
<body>
<div id="static1">static</div>
<div id="static2">static</div>
</body>
</html>
static2에는 top, left, bottom, right 값을 아무것도 주지 않았는데
static1과 위치가 똑같은 것을 보면 static은 위치 지정이 안되는 것을 알 수 있습니다.
#2 relative
이번엔 위치 값을 지정할 수 있는 relative를 사용하겠습니다.
static상자 2개 사이에 주황색 relative 상자를 넣어보겠습니다.
여기서 relative 상자의 위치 값을 지정합니다.
(top: 200px, left: 300px)
relative는 상대값으로 위치 지정이 가능하고, 자리를 차지합니다.
표시 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position속성</title>
<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
}
#static1{
position: static;
top:100px;
left: 100px;
background-color: red;
}
#relative{
position: relative;
background-color: orange;
top: 200px;
left: 200px;
}
#static2{
background-color: red;
}
</style>
</head>
<body>
<div id="static1">static</div>
<div id="relative">relative</div>
<div id="static2">static</div>
</body>
</html>
#3 absolute
relative 상자의 원래 위치 아래 노란색 absolute 상자를 만들겠습니다.
absolute상자가 static2 상자에 겹치는 것을 알 수 있습니다.
이번엔 위치를 지정합니다.
(top: 300px, left: 300px)
absolute는 절대값으로 부모 혹은 상위 relative속성을 가지고 있는 요소에 귀속됩니다.
표시 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position속성</title>
<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
}
#static1{
position: static;
top:100px;
left: 100px;
background-color: red;
}
#relative{
position: relative;
background-color: orange;
top: 200px;
left: 200px;
}
#absolute{
position: absolute;
background-color: yellow;
top: 300px;
left: 300px;
}
#static2{
background-color: red;
}
</style>
</head>
<body>
<div id="static1">static</div>
<div id="relative">relative</div>
<div id="absolute">absolute</div>
<div id="static2">static</div>
</body>
</html>
#4 fixed
absolute 다음에 초록색 fixed 상자를 만들어보겠습니다.
top: 400px, left: 400px로 위치 지정해줍니다.
여기서 fixed는 화면 기준 고정값이기 때문에 스크롤을 내리면 다른점이 보입니다.
스크롤을 내리면 다른 요소들은 스크롤에 따라 안보이게 되는데
fixed 상자만 화면에 고정되어 스크롤 상관없이 위치가 고정되어 있습니다.
#5 sticky
이번엔 파랑색 sticky 상자를 만들어보겠습니다.
sticky상자는 absolute(노랑), fixed(초록) 상자와 다르게 static2 상자를 밀어내고 자리를 차지합니다.
위치를 지정합니다.
(top: 0px, left: 500px)
sticky도 스크롤을 내리면 다른 점이 보입니다.
top: 0px 이기 때문에 스크롤을 내리면서 sticky상자가 보이는 화면에서 top: 0px에 도달하면 그 자리에서 떨어지지 않습니다.
sticky 효과를 주려면 top 값이 0이더라도 반드시 top: 0px로 표시해줘야 적용됩니다.
'IT > HTML' 카테고리의 다른 글
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
|---|---|
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML-<a>태그 (0) | 2020.11.25 |
| HTML-글자 태그 (0) | 2020.11.25 |
| HTML 태그 (0) | 2020.09.29 |
댓글