TIL

0l0l·2021년 4월 30일

CSS

TIL

목록 보기

23/86

다시 시작하는 CSS😐
GitHub Desktop을 사용해 실습 내용 commit 해보면서 github 익히기💕

Position

요소를 원하는 위치에 자유롭게 이동시키기 위해 사용하는 속성
종류: static, relative, absolute, fixed, ~~sticky~~(지원하는 브라우저 적음)

Type -> 기준점
내가 사용하는 position은 '무엇을 기준으로' 요소를 위치시키는가를 생각!

static

모든 요소(html, body, div...)의 position의 기본 속성값(가장 일반적인 상태)

relative

요소 자기 자신이 원래 위치해 있던 자리가 기준점이다.
float처럼 요소가 붕 뜨지만 주변 요소들에게 붕괴를 일으키지 않는다. (미치는 영향❌)
부모 요소, 형제 요소가 relative된 요소의 자리를 기억한다.

top | right | bottom | left: □px;
=> '~로 부터(~쪽 모서리에서)' □px 떨어진 곳에 위치하라는 의미

absolute

float를 사용했을 때와 유사한 점이 많다.(inline일 때 float 요소를 확인 가능한 점은 제외)

1) display가 자동으로 block으로 변경

2) block이지만 나만의 영역으로 공간 차지하지 않음, 길막을 하지 못함(빈 공간이 margin으로 채워지지 않음)

자신을 감싸고 있는 부모 요소에게 종속된 float와는 달리
absolute는 자신을 감싸고 있는 여러 조상 중에서 자신이 '기준'으로 삼고 싶은 기준점을 새로 정할 수 있다.
기준: position이 static이 아닌 요소 (relative, absolute, fixed, sticky)

fixed

absolute와 다른 점은 fixed는 자신의 기준점이 명확하다는 점이다.
기준: viewport(브라우저 창의 전체 크기)

body의 height가 길어졌다 해도 이동되는 것 없이 fixed된 요소는 viewport인 브라우저 창 기준으로 고정되어 나타난다.

position을 선언하고 요소를 어디로 이동시킬 것인지 위치를 알려주는 것이다.

z-index

position된 요소의 수직 방향에서의 위치(level)에 대한 속성

static을 제외한 모든 position은 원래 위치에서 붕 뜨는 것은 동일하다.
수직 방향으로 붕 떴을 때 z축 기준에서 높이(○층)를 따진다고 생각하자.
z-index로 다른 요소들을 덮어버려 특정 요소가 앞에 나와 보이도록 할 때 사용한다.
(z-index 값이 낮을수록 다른 요소들보다 아래에 위치한다는 의미)

📚참고👩‍💻

※ Box의 (세로 기준인) left와 right 중 하나, (가로 기준인) top과 bottom 중 하나를 사용하는 것을 추천한다.
ex. 위쪽 모서리 기준 -> top: 50px; / 왼쪽 모서리 기준 -> left: 100px;

※ 이동할 요소가 부모 요소의 우측 하단에 위치해 있다면 (무조건 top/left를 사용하기 보다) bottom, right를 기준으로 이동하는 것이 효율적이다.
ex. 아래쪽 모서리 기준 -> bottom: 50px;(~~top: 400px;~~❌) / 오른쪽 모서리 기준 -> right: 130px;(~~left: 670px;~~❌)

※ img 태그는 inline type 요소임에도 불구하고 width, height가 적용된다. 이미지 파일 자체가 갖고 있는 size가 있기 때문에 width, height를 갖는다. (유일한 점!)
원래 inline 요소는 위와 같은 성질을 갖지 못하기 때문에 'display: block;'을 명시해준다. (강사님 선호 방식)

※ padding과 margin을 구분하는 법 (강사님 주관적 기준)