| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- 목록 태그
- strong 태그
- 패캠
- 뭐
- 소프트웨어 장인
- 뭐임마
- form 문법
- li 태그
- form 텍스트입력
- ul 태그
- ol 태그
- 프론트엔드 과정
- 포기도 습관이 된다.
- 왜?
- HTML escape
- form 입력양식
- 의문
- 네카라쿠배 팁
- p 태그
- 공부 기록용
- 첫 시작
- 공부 기록용(비공개)
- html 기본 태그
- br 태그
- table
- u 태그
- 네카라쿠배
- h1~h6 태그
- img 태그
- ATOM
- Today
- Total
끈기의 힘 : 뉴비에서 풀스텍으로
[인프런/생활코딩] 섹션4. 레이아웃 기본 (3) position-fixed? 본문
5-3. 포지션(position) - fixed(고정된)
이 내용에선 ‘grand’까진 필요 없으니 다음과 같이 코드를 작성하겠다.
<!DOCTYPE html>
<html>
<head>
<style>
#parent, #other{
border:5px solid tomato;
}
#me{
background-color: black;
color:white;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
이제 me엘리먼트의 포지션 속성 값을 absolute에서 fixed로 바꿔보자.
일단 결과로는 바꿔도 웹페이지에는 변화가 없다. 그럼 실제로도 그런지 알아보자.
'부모에 속하는 id 속성값이 아닌' parent 밑에 새로운 large라는 id 속성값을 갖는 태그를 생성해보자. 그리고 이 large에 다음과 같이 css를 적용하고자 한다.
#large{
height:10000px;
background-color: tomato;
}
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div> 이렇게! 그러면 다음과 같이 보일 것이다.
large의 크기가 원체 크니, 웹페이지에 스크롤이 생기게 된다. 이 상태에서 스크롤을 내릴 때, 이 me라는 엘리먼트가
어떻게 될까요~?? 다음과 같이 고정(fixed)되어 있게 된다. ★
★ 즉, fixed 라는 포지션 값은 우리가 어떤 특정한 엘리먼트를 화면 특정 위치에 고정시켜서
스크롤로부터 완전히 독립되게 하는 것을 말한다.
만약, 우리가 위 그림처럼 왼쪽에 치우친 me라는 엘리먼트를 오른쪽 상단으로 이동시키고 싶다면,
top:0; 는 유지하고 left:0;를 right:0;로 바꿔주기만 하면 된다잉!!! ★ (right:0; 은 오른쪽에 0의 값만큼 여백을 두고 싶다는 거니까 오른쪽으로 착 달라붙는겨)
ex) Badge 같은 UI를 만드는 경우, 이런 fixed 포지션 값을 이용해 만들 수 있다.
만약, me 엘리먼트를 웹페이지 하단에 고정시켜두고 싶으면, top을 bottom:0;으로 바꾸고
right는 다시 left:0;로 바꾼 다음에 width:100%;와 text-align:center;를 추가해주면 다음과 같이 하단에 고정된 형태의 UI를 만들어 줄 수가 있다!!! (right보단 left가 우선되니까? 굳이 바꾸지 않아도 될거 같은데..? ++ 직접 해보니 차이 없음!)
★ width나 height 단위를 '픽셀'이 아니라 '%'로 하는 이유가 이거였구나! : 화면 전체로 만들어주고 싶으니 px을 사용하면 한도 끝도 없으니 아예 퍼센티지 단위를 사용하는 게 맞는거구나..
#me{
background-color: black;
color:white;
position: fixed;
left:0;
bottom:0;
width: 100%;
text-align: center;
} 위 그림의 코드.
반대로, me 엘리먼트를 맨 위에 고정시키고 싶으면 bottom을 top으로만 바꿔주면 되지.
근데 이렇게 바꿔주면 me란 엘리먼트가 다른 엘리먼트들을 가릴 수 있기 때문에 이런 경우,
me의 CSS영역에 height 값을 예를 들어, 30px;로 설정해줬으면 컨텐츠와 내용물 간의 차이 즉, padding 속성을 활용해주면 된다. 어떻게??? me를 제외한 모든 엘리먼트의 top 공간을 빈 공간으로 만들어야겠지?? 그러니까 body를 CSS 영역에 쓰고 padding속성을 쓰겠다. 그런데 어느 공간을? top을. 그래서 padding-top: 30px;처럼 이걸 코드로 하면 다음과 같다.
그 결과는 이렇게 되지요~
이런 표현들을 가능케 해주는 포지션 값을 ‘fixed’라 한다잉!!!
★ 중요한 점은 fixed는 absolute와 비슷하다는 점! 뭐가?
1) 부모가 사라지기 때문에 딱 자기 컨텐츠 크기(width와 height를 직접 설정한 크기)가 된다는 것이다.
2) 포지션 속성값 fixed를 가진 엘리먼트의 부모 엘리먼트는 자식 엘리먼트와 인연이 끊겼기 때문에 부모 엘리먼트의 크기는 자식 엘리먼트의 크기를 포함하지 X. ★
※ 결론적으로 포지션의 기본값(static)은 ‘static’
relative는 ‘상대적인 크기’
absolute는 ‘절대적인 크기’
fixed는 ‘스크롤과는 상관없이 화면에 고정’시키는 것
이 중에서 absolute와 fixed는 부모와 링크가 끊어지기 때문에 부피가 자기의 컨텐츠 크기만 해지고 늘리고 싶다면,
각자의 CSS영역에서 width와 height로 설정해야 한다는 점이며,
부모 엘리먼트들은 자식을 없는 셈치는, 그래서 자식 엘리먼트들은 작아진다는 특징.
★★★ 이 포지션에 대해 충분한 이해를 해야 자유자재로 디자인할 수가 있다! ★★★ Yes, i can
