| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 목록 태그
- img 태그
- form 문법
- 공부 기록용(비공개)
- ATOM
- HTML escape
- u 태그
- br 태그
- form 입력양식
- 네카라쿠배 팁
- p 태그
- 뭐임마
- strong 태그
- 네카라쿠배
- ul 태그
- 왜?
- 포기도 습관이 된다.
- html 기본 태그
- ol 태그
- form 텍스트입력
- 첫 시작
- 패캠
- 프론트엔드 과정
- 공부 기록용
- li 태그
- 뭐
- table
- h1~h6 태그
- 소프트웨어 장인
- 의문
- Today
- Total
끈기의 힘 : 뉴비에서 풀스텍으로
[인프런/생활코딩] 섹션4. 레이아웃 기본(2) position - relative VS static? absolute? (얘! 정신차리렴) 본문
[인프런/생활코딩] 섹션4. 레이아웃 기본(2) position - relative VS static? absolute? (얘! 정신차리렴)
쓰리별 2021. 2. 26. 19:115-1. ★ 포지션(position) - relative VS static ★ (다만, 좀 어려운 주제)
: HTML의 태그들, 즉 엘리먼트가 화면상의 어디에 위치할 것인가?를 정하는 것
Box Model이 ‘부피감’, 엘리먼트와 엘리먼트 사이의 간격 등을 결정하는 아주 중요한 것이었다면 포지션은 각각의 엘리먼트의 위치를 지정하는 방식과 관련한 마찬가지로 중요한 주제!
일단 강의를 따라, 다음과 같이 만들어보자.
<!DOCTYPE html>
<html>
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html> (아톰에서 그대로 복사했는 데 들여쓰기가 안 되네..)
★ <body>에서 id 속성값이 other인 태그와 id 속성값이 parent인 태그 안에 id 속성값이 me인 태그를 만들겠다! 라고 한다면, ‘아톰’에선 #other+#parent>#me 하고 탭 누르면 된다! 위의 코드대로 나온 결과물은, 아래와 같다.
이제 우린 여기서 me란 엘리먼트의 위치를 움직이는 것을 해볼 것이다!
ex) css의 영역 안에서 html과 div 태그 아래에 #me{}를 적어주고 그 안에 다음과 같이 쓰면
#me{
left:100px;
}
★★ 엘리먼트를 오른쪽으로 옮기고 싶다면 left란 속성을 쓰면 된다! left는 왼쪽인데 뭔 소리야? 라 할 수도 있지만, 원래 한글은 끝까지 들어야 한다이. ‘왼쪽으로부터 100픽셀만큼 떨어진 공간으로 이동한다는 의미’이다. 알간? ==> 이러한 값을 ‘offset’이라 한다. 정 헷갈리면 단순히 left(왼쪽)의 반대로 움직인다고 생각을 해라.
#me{
left:100px;
top:100px; 하면, me 엘리먼트가 100px만큼 위에서 내려온다는 의미겠지?
}
★★★ 근데 이렇게만 설정하면 엘리먼트가 움직이질 않아!! 왜 그러지..? (얘! 맞서 싸워!)
#me{
position: relative;
left:100px;
top:100px;
}처럼 position 값을 지정해줘야 해! 그래야 작동한다. 꼭 기억하자.
또 중요한 건 left와 right가 동시에 지정이 되면, left가 ‘우선’된다.
또, top과 bottom이 동시에 지정되면, top이 ‘우선’된다!! (순서 상관없이) ★★★
만약, 여기서 position: relative;를 지우게 되면 엘리먼트는 left와 top의 값을 무시한다!
왜 그러느냐?? 원래 엘리먼트들은 포지션의 기본값★을 갖고 있기 때문이다.
그 값이 뭔데?? position: static; 이다. 이렇게 지정해 놓으면 ‘정적으로’라는 의미처럼 엘리먼트들은 left, top과 같은 offset을 무시하게 된다.
만약, 원래 me라는 자식 엘리먼트는 부모 엘리먼트의 아래에 있는 즉, 자기가 있어야 하는 위치를 기준으로 상대적으로 100픽셀만큼 오른쪽으로 가게 하고 싶다. 동시에 위에서 아래로 100px만큼 내리고 싶다고 하면, 처음에 배운 것처럼
#me{
position: relative;
left:100px;
top:100px;
}로 포지션의 값을 ‘relative’로 바꿔주면 된다!! ★
즉, 우리가 left, top과 같은 offset을 사용하고 싶으면 포지션 값을 ‘relative’로 설정해주어야 한다! 만약, 다음과 같이 포지션을 설정하지 않았다면 기본값인 ‘static’으로 지정된 것이다.★
#me{
left:100px;
top:100px;
}
이는 다른 말로 ‘위치와 관련한 설정을 하지 않은 상태’라고 한다.
뭐든 처음 배우는 것은 익숙치 않은 것이니까 어려운 건 당연한 거다. 대신 익숙해지기 위해서 포기하지 말고 노력하자!
★★★ 결론적으로 가장 중요한 건 수업이 끝났을 때 직접 따라해보든 만들어보고 본인에게 설명을 해보자 ★★★
5-2. 포지션(Position) - absolute
일단은 진도에 따라 다음과 같이 만들어보자.
<!DOCTYPE html>
<html>
<head>
<style>
#parent, #other{
border:5px solid tomato;
}
#me{
background-color: black;
color:white;
position:relative;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="other">삼촌</div>
<div id="parent">
부모님
<div id="me">나</div>
</div>
</body>
</html> 다음은 결과 값이다.
이 상황에서! 본인의 필요에 따라 ‘나’라는 엘리먼트를 ‘부모님’이 아니라 ★ ‘html’엘리먼트 이 웹페이지에 있는 가장 경계에 있는 html 엘리먼트를 기준으로 위치를 지정하고 싶은 경우 어떻게 해야 할까?? ★
==> position: absolute; 로 바꿔주면서 동시에, offset 값인 left와 top의 값을 0으로 한다.
left:0;
top:0; (★ 속성값이 0인 경우 ‘단위’가 필요 없다.) 다음은 그 결과 값이다.
★ 근데 유의해야 할 점은 만약 left와 top 등의 offset 값을 아예 지워버린다면?
다음과 같이, ‘부모님’ 엘리먼트를 기준으로 위치가 조정된다.
왜 이런 차이가 발생하냐면! 우리가 포지션의 값을 Absolute로 지정하게 되면, 앱솔루트의 left와 top은 0px, 0px이 아니고 부모 엘리먼트를 기준으로 자기가 원래 위치해야 할 그 위치에 있게 되는 거기 때문에 위의 그림처럼 표현된다. 라고 생각!! 여기서 다시, 우리가 0px, 0px의 값을 주게 되면 아까처럼 html을 기준으로 위치가 변한다! ★
★ 또한, 우리가 부모에 속한 어떤 자식 엘리먼트의 포지션 값을 Absolute로 지정하게 되면,
그 자식 엘리먼트가 더는 부모의 소속이 아니다!
그래서 위의 그림에서처럼 ‘부모님’ 엘리먼트의 크기가 ‘나’ 엘리먼트와 다르다. 즉, 아예 me를 빼버린 거다. (그니까 쉽게 말해, 너 독립해 이 색갸!)
마찬가지로 자식인 ‘me’ 엘리먼트는 부모의 크기의 100%를 사용했다가, 부모와의 링크가 끊어지면서 크기를 지정할 수 없게 된 상태라고 생각. 그래서 자기 자신의 컨텐츠 크기만큼 사이즈가 줄어든 것이라고 봐라!! ★
그래서 위의 상태에서 ‘me’란 엘리먼트의 크기를 늘리고 싶으면 직접 width와 height 값을 지정해주면 된다. 다음과 같이 말이다.
#me{
background-color: black;
color:white;
position:absolute;
width:300px;
height:100px;
}
‘me’ 엘리먼트의 포지션 값을 absolute로 지정하게 되면 이 ‘me’가 html 엘리먼트를 기준으로 위치가 정해진다고 배웠다. 다음과 같이 말이다.
#me{
background-color: black;
color:white;
position:absolute;
left:0;
top:0;
}
그런데, 정확하게는 다음과 같이 parent 엘리먼트에 포지션의 값 relative;를 지정하게 되면, me 엘리먼트를 parent 엘리먼트 위치를 기준으로 자신의 offset(left, top 등)값을 설정한다. 다음과 같이 말이다.
만약에 위의 코드에서 id 속성값이 "parent"인 엘리먼트 바깥에 <div> 태그가 하나 더 있었다고 가정,
<div id="other">삼촌</div>
<div id=“grand”> /* 얘가 추가된 <div> */
할아바머니
<div id="parent">
부모님
<div id="me">나</div>
</div>
</div>
---
#parent, #other, #grand{
border:5px solid tomato;
}
#grand{
position: relative;
}
#me{
background-color: black;
color:white;
position:absolute;
left:0;
top:0;
} 라고 한다면, 당연히 parent 엘리먼트는 포지션 값을 지정하지 않은 상태.
★★★ 그러면 그대로 통과. 뭐가? me 엘리먼트가 parent 엘리먼트 영역에서 활동하지 X.
그리고 grand 엘리먼트의 경우, 포지션의 값을 relative를 지정했으니 grand에 딱 멈춰서 포지션, 즉 me 엘리먼트가 grand의 영역에서 offset(left, top)의 값을 매기게 된다.
그래서 여기 있는 이 포지션 값으로 ‘static’인 기본값이 아닌 다른 값을 주게 되면
부모를 찾던 ‘me’ 엘리먼트는 즉, 포지션이 absolute로 지정된 엘리먼트는 포지션의 값이 static이 아닌 부모가 나타날 때까지 무시하다가, 그런 부모가 나타나면 (이 코드에선 ‘grand’ 엘리먼트) 그 부모의 위치를 기준으로 offset 값을 지정할 수 있게 된다!!! ★★★
♣이번에 배운 absolute는 ‘절대적인’것이니까, 저번에 배운 ‘상대적인’것과 비교하면서 이해.
‘상대적인’것 == “부모를 기준으로 위치가 정해진다.” ( == position: relative;)
‘절대적인’것 == “부모 중 포지션 타입이 지정된 부모(position값이 static이 아닌, relative)를 기준으로 위치가 지정, 부모와의 관계는 끊어지기에 자신의 크기는 자신의 콘텐츠 설정(width, height)에 따라 그 크기만큼 변한다!
(== position: absolute;)♣
- 다음이 그 결과 값이다.
뭔가 이해는 갈듯 말듯 한데, 결국 익숙해지는 게 답인 것 같다. 약진!
