Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- JavaScript
- vscode
- CSS
- property
- scss
- Pseudo
- Grid
- js
- frontend
- 코드다이어리
- 코딩문제
- 선택자
- sass
- DOM
- tailwindcss
- display
- regexp
- row-gap
- HTML
- 친해지기
- 코딩퀴즈
- 정규식표현
- Coda
- column-gap
- 코딩테스트
- CLASS
- 코드일기
- 가상클래스
- 코딩일기
Archives
- Today
- Total
< Code diaries />
CSS Property - Position 이해하기 본문
CSS Position
- CSS에서 문서의 레이아웃을 잡을때 가장 많이 나오는 속성중에 하나가 Position 입니다.
- position은 Dom tree구조와 속성을 잘 이해하면 전혀 어렵지 않은 속성입니다.
- 한번 시작해 봅시다~~!!
CSS Position 에 대하여 알아봅시다~! 출발~!
Position Overview
- 모든 HTML element의 기본 포지션은 Static 입니다. 이것을 필요에따라 4가지로 변경하여 사용할 수 있습니다.
- 참조사이트 - 바로가기
< Position Tutorial 영상보기 >
A. Position 속성에 대하여 알아보자.
Positin 속성의 값으로 지정할 수 있는 것은 무엇일까요?
아래와 같이 5가지가 있습니다. static은 기본 값입니다.
| Property | Value | Description | note |
| position | static | 기본 | left, top, right, bottom등의 offset 속성을 같이 사용할 수 없습니다. ( normal flow ) |
| relative | 상대적 위치 | 속성="값" 이때에 속성과 값이 같으면 축약하여 보통 사용합니다. 하지만 XHTML문법에서는 이를 허용하지 않습니다. | |
| absolute | 절대위치(containing block 기준 - 지정한것에 따라 달라짐) | 부모나 조상중 가장 가까운 position을 선언받은 요소를 containing block으로 참조함. (단, static은 인식하지 않음) containing block이 없을경우 fixed처럼 <body>를 기준으로 하게 된다. |
|
| fixed | 절대위치(body 기준 - 변경없음) | 일부 프레임웍에서는 닫아야하는 경우가 있습니다. 이는 XHTML문법을 사용하기 때문입니다. | |
| sticky | 스크롤 위치 지정한대로 고정 | 부모의 overflow속성 주의 |
아래에서 position의 위치를 참조해보세요
See the Pen css-position by Jey Lee (@Jey-Lee-the-sasster) on CodePen.
B. 오프셋 속성(Offset)
- 마크업은 시작태그로 시작을 합니다. 시작태그에는 속성(Attribute)를 넣을 수 있으며, HTML 마크업은 대소문자가 상관없지만 보통 소문자로 통일하여 사용합니다.
| Property | Value | 사용예 | note |
| left | Number value | div { left:0; } | 기본값은 auto이다. 여러방향을 같이 사용하기도 한다. Position:static에서는 사용이 안된다. 양쪽방향을 같이 지정할 때에는 양방향으로 늘어난다. left:0;right:0;bottom;0;top:0;하면 width:100%; height:100%와 같은 효과를 볼 수 있다. 이미 주어진값을 제거하고 싶을때에는 기본값인 auto를 다시 선언해주면 된다. |
| right | Number value | div { right:-20px} | |
| top | Number value | div { top: calc(50% - 100px) } | |
| bottom | Number value | bottom { bottom: calc(100% + 20px) } |
본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.
힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.
제 피드를 공유하거나 링크를 해주시는것은 감사합니다~
본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.
하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^
감사합니다.
반응형
'CSS' 카테고리의 다른 글
| CSS Property - Display : Flex 속성 (0) | 2024.06.10 |
|---|---|
| CSS Property - Display 기본 속성 (0) | 2024.06.10 |
| CSS Property - Box Model 이해하기(크기와 여백) (0) | 2024.06.10 |
| CSS - SVG 이미지를 :before, :after에 넣기 - url-encoder 사이트 (0) | 2024.06.10 |
| CSS Property - FONT 관련 속성 및 웹폰트 설정하기 (1) | 2024.06.10 |
'CSS' Related Articles
more
