2021. 5. 18. 07:30ㆍcss
이번에는 css 레이아웃을 만들때, 사용하는 포지션을 알아 봅시다.
포지션
포지션은 html 에서, x, y 축을 지정해서 상자 or 컨텐츠 를 배치하는 방법 입니다.
포지션에서 알아보고 갈 것은 크게 absolute, relative, fixed 가 있습니다.
포지션에서 상자 또는 컨텐츠를 이동시킬 것에 absoulte 를 , 기준이 되는 부모요소에 relative 를 넣어 줍니다.
포지션을 사용할 때는 항상 left/right , top/bottom 을 지정 해주어야 합니다.
아래와 같이, 상자들을 만들어 주었을 때, 포지션2를 움직여 볼 건데요
포지션2 인 inner2 에 absoulte 를 넣어 줍니다.
그리고, 좌표의 기준이 되어 줄 부모요소 content 에 relative 를 넣어 줍니다.
※ 특정 부모요소에 relative 를 안 넣을 경우 : body 가 좌표의 기준이 됌 !
left : 기준이 되는 왼쪽 좌표에서의 거리부터 상자(컨텐츠)를 화면에 그림
right : 기준이 되는 오른쪽 좌표에서의 거리부터 상자(컨텐츠)를 화면에 그림
top : 기준이 되는 위쪽 좌표에서의 거리부터 상자(컨텐츠)를 화면에 그림
bottom : 기준이 되는 아래쪽 좌표에서의 거리부터 상자(컨텐츠)를 화면에 그림
relative ( 기준이 될 부모요소 ) 는 부모요소 에서만 작동 합니다.
이렇게, pos 의 부모요소 box4 에 relative 를 사용하고 있습니다.
그런데, 부모요소가 아닌, box3 에 relative 를 사용 한다면?
pos의 위치가 엉뚱한데로 가 버리죠?
사실 이건 엉뚱한 위치가 아닌, 부모요소(body)가 기준 좌표가 되는 것 입니다.
즉. 기준좌표(relative)는 absolute 를 사용하는 요소의 부모요소 에만 사용할 수 있습니다.
예제.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {padding: 0; margin: 0;}
.wrap {width: 30%; border: 1px solid #777; margin: 0 auto; padding: 10px; position: relative;}
.wrap-img {position: absolute; left: 10px; top: 10px;}
.wrap-img img {width: 50px;}
.wrap-text textarea{width: 100%; height: 200px; padding: 10px; box-sizing: border-box; resize: vertical;}
.wrap-text, .wrap-btn {padding-left: 60px;}
.wrap-btn {overflow: hidden;}
.wrap-btn > .left {float: left;}
.wrap-btn > .right {float: right;}
.wrap-btn > .left > input {width: 100px; display: block;}
.outer {width: 30%; border: 1px solid #777; margin: 0 auto; padding: 10px; position: relative;}
.outer-img {position: absolute; left: 10px; top: 10px;}
.outer-img img {width: 50px;}
.inner {padding-left: 60px; overflow: hidden;}
.inner > .left {float: left;}
.inner .right {float: right;}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-img"> <!-- 이미지영역 -->
<img src="../03백그라운드/img/fish.png">
</div>
<div class="wrap-text"> <!-- 텍스트영역 -->
<textarea>댓글등록</textarea>
</div>
<div class="wrap-btn"> <!-- 버튼영역 -->
<div class="left">
<input type="text">
<input type="text" style="margin-top: 0px;">
</div>
<button class="right">등록하기</button>
</div>
</div>
<div class="outer">
<div class="outer-img">
<img src="../03백그라운드/img/fish.png">
</div>
<div class="inner">
<div class="left">
<h3>제목</h3>
내용
</div>
<div>
<button class="right">삭제</button>
<button class="right">수정</button>
</div>
</div>
</div>
</body>
</html><button> 에는 기본적으로 margin 이 적용되어 있으니, button 끼리 붙이고 싶다면, 위와 같이 float 을 사용할 때, 각각의 버튼에 float 를 적용해야 합니다.
fixed
fixed 는, 브라우저 창에서 화면에 스크롤을 이용해서 아래로 내리거나 위로 내려도, 특정한 부분이 계속 따라다니도록 하고 싶을 때 사용합니다.
ex) 메뉴창 , 양 옆에 네비게이션 바 등등...
※ fixed 를 사용할 경우, 박스의 크기가 상대적으로 변하기 때문에, ( width 값을 주어야 함 )
스크롤을 내려도 header 는 계속 따라 다니게 됩니다.
그런데, 여기서 내용...... 부분이 위로 튀어나오는 걸 확인 할 수 있습니다.
이 때, header 부분에 background 를 주면 됩니다 ( color , image 등 )
그리고, fixed 를 줄 경우. 다른 부분들이 ( section ) 바로 0.0 위치부터 화면에 그려지게 되니, section 에 margin 을 줍니다. 마진은, 헤더부분이 어느정도 차지하는지 확인 후 주면 됩니다.
fixed 는 아래 사진처럼 네비게이션바 에도 많이 사용 됩니다.
이렇게 fixed 를 사용할 경우에, 몇몇 부분들이 곂치는 경우가 발생할 수 있는데요
이 때는, z-index 를 사용 합니다.
z-index 는 깊이 라고 생각을 하시면 편할 것 같습니다. 보통 0 ~ 50 정도로 사용하고, 수가 높아질 수록 곂쳤을 때 화면에 보여지게 됩니다.
ex) z-index 가 각각 50, 30 이라고 가정을 하면, 곂쳤을 때 50 인 박스 가 보여짐
sticky
sticky - 설정된 영역에 도달하기 전에는 일반적인 형식으로 움직이다가 설정된 위치에 닿으면 fixed 됌
1. top, bottom, left, right 중 한가지 옵션이 반드시 존재해야되고
2. 어떤 부모요소든 overflow:hidden이 있으면 동작하지 않는다.
3. top속성에는 스크롤이 이동됐을 때 fixed되는 지점을 기록한다 (헤더가 고정이라면 헤더의 높이만큼)
'css' 카테고리의 다른 글
| Day64 - [css]부트스트랩 . 그리드 (0) | 2021.05.18 |
|---|---|
| Day64 - [css] 미디어쿼리 (0) | 2021.05.18 |
| Day63 - [css]플롯 (0) | 2021.05.16 |
| Day63 - [css]윤곽, 패딩, 마진, 상자크기 (0) | 2021.05.16 |
| Day63 - [css]background (0) | 2021.05.16 |