position?
HTML 태그의 위치를 지정해주는 속성이다. 이를 이용해 페이지의 레이아웃을 결정할 수 있다.
종류
모든 태그들의 position 속성값은 기본적으로 static 값을 가진다. html 태그 순으로 정상적인 흐름(순서대로)에 따라 위치가 지정된다.
따라서 top, bottom, right, left 속성은 어떤 값을 적용해도 무시된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>static</title>
<style>
.box1{
position:static;
top: 50px; -> 무시
right: 50px; -> 무시
bottom: 50px; -> 무시
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:static;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3{
position:static;
background-color: blue;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
static은 차례대로 요소를 놓는다.
position : relative
position의 값을 static이 아닌 relative로 주면 원래 자신의 자리(static 지정시 자리)를 기준으로 움직인다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>relative</title>
<style>
.box1{
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2{
position:relative;
left: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
위의 코드에서는 box2를 left 40px를 주어 원래자리 기준으로 왼쪽으로부터 40px만큼 공간을 두었다.
position : absolute
- 부모 요소 내부에 속박되지 않고, 독립된 배치 문맥을 가진다.
- 기본 순서를 무시한다.
- 요소를 브라우저 화면(viewport) 상에서 어디든 자유롭게 배치할 수 있고, 부모 요소 위에 겹쳐서 배치도 가능하다.
- 단, 상위 요소 중
position : relative인 요소가 있으면 그 중 가장 가까운 요소의 내부에서만 자유롭게 배치할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative-absolute</title>
<style>
.box1{
position:relative;
top:40px;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:absolute;
top: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3{
position: absolute;
top: 30px;
left: 30px;
background-color: blue;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box3">box3</div>
<div class="box1">box1
<div class="box2">
box2
</div>
</div>
</body>
</html>
box3의 경우는 상위 요소에 relative가 없으므로 viewport 기준에서 왼쪽에 30px 공간, 위에서부터 30px공간을 가진다. box2는 상위 요소인 box1이 relative 속성이므로 box2의 top : 40px은 box1(relative 속성인 상위요소)를 기준으로 위에서 부터 40px 내려온 모습이다.
이를 통해 알 수 있는 것은, 같은 absolute 속성이라도 상위 요소의 position 속성값에 따라 서로 다른 위치 결과가 나타난다!
position : fixed
position을 fixed로 설정하면 스크롤을 올리거나 내려도 해당 내용을 계속 화면에 보이게 된다.
position : sticky
sticky(끈끈한) 속성값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
section {
height: 1000px;
border: 3px solid black;
}
h2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: greenyellow;
margin: 0;
}
</style>
</head>
<body>
<h1>sticky test</h1>
(section>h2{오늘의 메뉴$}+ul>(li>lorem)*3)*3
</body>
</html>위의 코드에서 fixed와 비슷하게 오늘의 메뉴라는 h2요소가 상단에 고정이 되있으며 다음 콘텐츠로 넘어가면 다음 콘텐츠의 h2요소를 표시한다. 여기서 $표시는 1부터 증가하는 숫자이고 코드를 실행하면 페이지 상단에 오늘의 메뉴1 -> 스크롤... -> 오늘의 메뉴2 ... 이런식으로 표시된다.
z-index
position 값으로 요소의 위치를 변경하다 보면 요소끼리 겹치기도 한다. 이때 어떤 요소가 더 위로 나타나게 할지 결정하는 속성이다.
static을 제외한 요소의 Z축 순서를 결정할 수 있고, z-index가 더 큰 요소가 작은 요소를 덮는다.
부모가 z-index를 높여 자식 위로 나올 순 없지만, 자식은 z-index를 낮춰 부모 뒤로 갈 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
div {
/* 같이 움직이는지 확인 */
/* margin: 100px; */
width: 800px;
height: 800px;
position: relative;
background-color: blanchedalmond;
border: 1px solid black;
/* 부모에 달아도 수정이 안됨 */
/* z-index: 1; */
}
img {
padding: 10px;
position: absolute;
}
img:nth-child(1) {
top: 100px;
left: 100px;
background-color: red;
/* 자식에게 값을 주면 부모 뒤로 감 */
z-index: 0;
}
img:nth-child(2) {
top: 150px;
left: 150px;
background-color: green;
z-index: 0;
}
img:nth-child(3) {
top: 200px;
left: 200px;
background-color: blue;
z-index: 0;
}
</style>
</head>
<body>
<div>
<img src="https://via.placeholder.com/300" alt="">
<img src="https://via.placeholder.com/400" alt="">
<img src="https://via.placeholder.com/500" alt="">
</div>
</body>
</html>
기본 모습은 위와 같다.
div(부모) 요소의 margin을 설정하면 모든 박스가 같이 움직이는 것을 볼 수 있다. 이 div(부모)의 z-index를 자식보다 높게 설정해도 부모는 자식 위로 나오지 않는다.
flex
display : flex- 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법
- 부모 요소를
flex-container자식 요소를flex-item이라고 한다. cross-axis는 주축(axis)와 짝을 이루는 축이다.- 1차원 레이아웃(x축, y축)을 위해 주로 사용한다.
flex-direction
flex 컨테이너가 사용할 주축과 정렬 방향을 결정한다.
row: 기본값. 왼쪽 -> 오른쪽(주축이 행방향)column: 위 -> 아래(주축이 열방향)row-reverse: 오른쪽 -> 왼쪽column-reverse: 아래 -> 위
justify-content
주축을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정할 수 있다.
flex-start: 배열의 위치를 처음 부분으로 옮긴다.flex-end: 배열의 위치를 끝부분으로 옮긴다.center: 배열의 위치를 중간으로 옮긴다.space-between: 원래는 배열 양옆에 공간이 있었지만space-between을 선언하면 이 간격은 사라지고 각각의 아이템 사이에 공백을 같은 간격으로 최대로 둔다.space-around: 각각의 아이템을 동일한 공백 넓이로 아이템을 감싼다.space-evenly: 각 아이템의 상하 공백이 동일하게 주어진다.
flex를 활용한 실습을 해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left div,
.center div,
.right div {
width: 50px;
height: 50px;
background-color: wheat;
}
.left,
.center,
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.right {
flex-direction: column-reverse;
}
.parent {
display: flex;
justify-content: space-between;
width: 400px;
height: 400px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
<div class="center">
<div class="D">D</div>
<div class="E">E</div>
</div>
<div class="right">
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
</div>
</div>
</body>
</html>
색상은 다르지만 구조는 비슷하게 만들어 보았다. 설계 순서는 다음과 같다.
- 가장 큰 블록(div)을 부모 클래스로 만든다.
- 부모 블록 안에 div로 왼쪽, 가운데, 오른쪽 블록을 만든다.
- 그 블록들 안에 위치에 맞게 알파벳 div블록을 만든다.
- css로 div클래스 left, center, right를 정의한다. (크기, 색상)
- 각 left, center, right 클래스의 요소들에 flex를 적용한다. 열 방향으로 정렬하며 justify-content로 space-between값을 주어 원소 사이의 여백만 존재하도록 하였다.
- 오른쪽 요소는 아래부터 시작하므로 flex-direction값을 column-reverse로 주어 하단부터 시작하도록 하였다.
- 6번까지 하면 요소들끼리 열방향으로 붙어있는데 부모의 스타일을 정의하여 제자리를 찾아가도록 구성한다.
- 부모(큰 박스)를 flex 자식들이 컨테이너 공간을 잘 맞춰서 정렬하도록 한다.
- space-between으로 각 아이템 사이의 공간만 갖도록 배치한다.
- 부모(큰 박스)의 크기를 정의하고 배경색을 정의한다.
피드백
각각의 개념들을 보면 크게 어렵지는 않은데 적용이 어려운 것 같다. 어제 과제로 내주셨던 로그인 위젯 만들기를 오늘 수업 끝나고 강사님의 코드를 보면서 한줄한줄 주석을 추가하며 이해를 하는 시간을 가졌다. 지금은 이해가 가는데 나중가선 까먹지 않도록 계속 들여다 봐야 할 듯 하다.
이력서..도 슬슬 내봐야 할 것 같은데 여러모로 걱정되는 부분이다. 쉴땐 쉬더라도 중간에 포기하지만 말자..! (제발)
