< Code diaries />

CSS Property - Position 이해하기 본문

CSS

CSS Property - Position 이해하기

ejey 2024. 6. 10. 21:46

 

 

CSS Position

 

 

  • CSS에서 문서의 레이아웃을 잡을때 가장 많이 나오는 속성중에 하나가 Position 입니다.
  • position은 Dom tree구조와 속성을 잘 이해하면 전혀 어렵지 않은 속성입니다.

  • 한번 시작해 봅시다~~!!

 

 

CSS Position 에 대하여 알아봅시다~! 출발~!

 

Welcome to CODING HELL

Position Overview

- 모든 HTML element의 기본 포지션은 Static 입니다. 이것을 필요에따라 4가지로 변경하여 사용할 수 있습니다.

- 참조사이트 - 바로가기

 

 

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