Position

css에는 position이 5가지가 존재한다

• relative
• absolute
• fixed
• static
• sticky

position의 특징이 있다면
top, left, rigth, bottom 으로 위치를 조정 한다는것

까맣게 칠한 건 좀더 자세하게 보겠습니다

static 과 sticky 는 간단하게 알아보겠습니다 🐒

static

position의 경우 기본값이 static 이여서 position을 주지 않은
모든 것은 static이라고 생각하면 된다

display 값에 따라 바뀌지만, 위에서 아래로 혹은 왼쪽에서 오른쪽으로
진행된다

.red{
  background-color:red;
  width:150px;
  height:150px;
}
.blue{
  background-color:blue;
  width:150px;
  height:150px;
}
.green{
  background-color:green;
  width:150px;
  height:150px;
}

각각 div로 설정해주었고, position을 따로 설정하지 않았다

sticky

position: absolute 와 비슷하다고 생각하면 된다

기준점은 scroll-box 이며, 이 점이 fixed와 다른점이다
부모가 scroll이 가능한 박스라면 sticky도 같이 따라갑니다

sticky의 부모를 따릅니다

부모의 heigth:500px
sticky height:200px

이렇다면 딱 부모의 크기인 500px까지만 움직입니다

부모의 안에서 움직인다고 생각하면 됩니다

relative

자 이제 부터 많이 사용하는 것들을 알아보겠습니다

우선 relative는 absolute의 기준점이 되고,
자기 자신을 원래 위치에서 부터 위치조정을 할 수 있습니다

blue에 relative; left:150px

보이듯이 자기 자신의 처음 위치를 중심으로 움직이는 걸 확인 할 수 있다

여기서 relative 뿐만 아니라 모든 포지션에 적용되는
상황을 확인해 볼텐데

z-index

.blue{
  margin-top:-50px;
}

.green{
  margin-top:-50px;
}

블루와 그린에게 마진값을 마이너스로 주고 확인
z-index는 기본적으로 아래 적어 놓은 코드가 위로 오게 되어있는데

만약 position을 적용한 박스가 있다면?

보이는 것과 같이 position을 적용한 박스가 가장 위에 오게 된다

궁금해서 이유를 찾아봤는데
여기에 전부다 쓰기에는 너무 양이 많아서
제가 참고한 곳을 남기겠습니다

https://mytory.net/archives/10997

absolute

이번엔 position중 absolute를 보겠습니다

absolute는 기본적으로 초기의 컨테이너 블록에 맞춰집니다

이게 무슨말이냐??

blue에 absolute를 주어서 보이지는 않지는 현재 그린 칸이 있습니다

body{
  width:100vw;
  height:100vh;
  background-color: beige;
}

지금 body값엔 기본적으로 설정되어 있는 margin:8px 만이 존재합니다

근데 여기서 blue에 top, left를 0을 주게 된다면?

.blue{
  width:150px;
  height:150px;
  background-color:blue;
  position:absolute;
  top:0px;
  left:0px;
}

.
.
.
.

네... 바디 따윈 무시합니다 🤥

무서워요... 근데 아직 하나 더남았습니다
이 친구는 집착하는게 하나 있는데 같은 종족을 좋아합니다

만약에 조상중에 static을 제외한 나머지 position을 가지고 있는
조상이 있다면 거기를 중심으로 움직이게 됩니다

 <div class="parent"><div class="blue"></div></div>

.parent{
  position: relative;
}

이렇게 blue위에 부모를 만들어주고, position을 부여하면

Green은 안보여서 margin-top:100px; 을 준 상태입니다

이렇게 position을 가진 조상을 따라다닙니다...

무서우니까 다음으로 가겠습니다

fixed

자 이번엔 거의 네비게이션 만들때 항상 만나는 fixed 한번 보겠습니다

fixed도 초기 컨테이너 블럭을 기준으로 잡습니다
그래서 사용자가 보는 곳을 따라다니는 무언가를 만들때는
거의 fixed를 사용하게 됩니다

위에 보여드렷던 absolute와 같은 부모가 있는 상태에서
blue에 fixed를 적용해 보겠습니다

보이듯이 기준점이 body를 넘어 초기 컨테이너까지 가는걸 확인 할 수 있습니다

그럼 fixed는 한결같은가?

그렇지는 않고,
조상중에 transform, perspective, filter 이 세가지 속성 중
하나로도 none이 아닌 조상이 있다면 fixed도 따라 갑니다

이 부분은 테스트를 해보면서 신기했습니다
꼭 해보세요 😁

fixed에 관한 설명은 여기까지 입니다 🚀

display

현재 display에는 여러가지 아이템이 있는데,
그중 block, inline, inline-block 세가지에 대해서 알아 보겠습니다

block

block 한줄 그대로를 전부 차지하는 속성을 가지고 있습니다
대표적인 예로는 p, div가 있고 block이면 어떻게 적용이 되는지 살펴 볼게요

block을 가지는 친구들

block을 가지는 모두를 보고싶다면?

https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements

코드는 생략하겠습니다

세 개 모두 height만 지정해주고, width는 지정하지 않았습니다

제일 밑에 부분인 span의 경우 inline의 속성을 가지고 있습니다

block을 가지게 되면 한칸을 전부 위의 사진처럼 한공간을 다 차지하게 됩니다.

특징

1. width:100% 가 default 값이다
2. width 와 height 로 크기를 조절한다
3. margin과 padding을 사용할 수 있다

lnline

inline을 가지는 친구들

위에서 봤던 span을 포함한 i, input 등 여러가지 존재 합니다

inline을 가지는 모두를 보고싶다면?

https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

이런식으로 한 줄을 차지하는게 아닌 자신의 공간 만큼만 차지하게 됩니다

span에 width:100% 넣어 주어도 변하지 않는 모습

여기서 inline의 특징은 하나더 보자면

두가지의 차이가 뭘까요??

위 사진

span에 margin-bottom:50px;

아래 사진

div에 margin-top:50px;

이렇게 inline의 속성을 가지는 친구들에게는 위아래로
margin 값이 적용되지 않습니다

inline의 특징

1. width 와 height 로 크기조절을 할수 없다
2. margin값이 위아래로는 지정되지 않는다

그렇다면 inline의 특성을 가지게 되면 크기조절은 어떻게 하는지

inline의 크기 조절 방법

line-height를 이용

span에 line-height: 100px;

span에 padding: 50px 0 50px 0;

div에 margin-top 50px 주었습니다

inline-block

block의 성질과 inline의 성질을 둘다 가지고 있습니다

width를 이용해서 크기를 조절 할 수 있습니다

여기서 중요한 점은 width 와 height를 지정해 주지않으면
inline과 같이 자기 자신의 영역만을 차지하게 됩니다

inline block은

쉽게 설명하면 inline이지만

• width
• height
• margin ( top / bottom )

위 세가지를 사용할 수 있다고 생각 하면 됩니다

float

flex가 나오기 이전 구도를 잡는데 사용했던 float를 알아 보겠습니다

float가 자리를 잡는 방식

처음 딱보면 떠있다는 생각이 들텐데,
말 그대로 떠있는 형식입니다

main{
  width:400px;
  height:800px;
}

div{
  background-color: rgba(153, 67, 67,0.5);
  height:200px;
}

.first{
  
  width:200px;
  float: left;
}

.second{
  
  width:200px;
  float:right;
}

main > div*4

메인 박스 안에 높이가 일정한 div4개를 넣고
first와 second에 각각 float left, right를 준 상태입니다

가장 마지막에 있는 모든 div에 투명도를 주었기 때문에
아래 사각형에는 겹쳐서 진하게 보이는 걸 확인 할 수 있습니다

마지막 div는 갈 곳을 잃고 밀려났습니다

float의 특성

이 부분은 left와 right에 각각 190px씩 할당해준 상황입니다

굉장히 이상하죠?

자기 자신이 우선순위가 되는 겁니다

first와 second의 크기를 줄여서 진행

자기 자신을 채우고 글자를 채우는 방식으로,

float 박스 하나 추가

먼저 채우고 글자를 채워주게 됩니다

이제 여러 상황들을 만나보고 어떻게 해야할지 알아보겠습니다

float박스가 넘칠경우

main{
  width:400px;
  height:200px;
  clear:left
}

div{
  background-color: rgba(153, 67, 67,0.5);
  height:200px;
}

.first{
  height:400px;
  width:100px;
  float: left;
  margin:1em;
}

main 박스의 높이를 줄이고 float의 높이를 늘려준 상황입니다

완전 상식의 틀을 깨버린 ㅋㅋㅋ 그런 구조가 됬는데
여기서 이 문제를 해결하는 방법을 알아 볼게요

많이 사용하는 해결법

4가지의 해결법이 있는데 그 중 가장 많이 쓰이던 것을
알아 볼게요

overflow:hidden

부모 박스에 overflow : hidden 값을 추가해서 크기를 맞춰 줄 수 있습니다.

여러가지 실험도 해보고,
익숙한 것들을 다시 한번 알아보면서 다 알지 않을까 ??
생각했는데, 조금 깊숙히 들어가게 되니 새로운 세상이 열리더라구요

아무렇지 않게 써왓던 z-index 가 꽤나 심오하구나...
fixed는 한결같은 친구인 줄 알았다... '

어려웠던 점

항상 flex, grid로 위치를 잡고 시작을 해서
float는 이번에 알아보면서 처음 써봤습니다

요즘에는 사용을 하지 않는 float가 되었지만,
옛날에 만들어진 페이지를 수정한다거나, 보게 된다면
심심치 않게 만나실 겁니다

그때 float가 어떤 방식으로 작동하는지
왜 float를 썻는지를 알아야 하기때문에

이번 기회에 제대로 공부 했습니다

몰랏던 것도 알던 내용도 쭉 읽어 보면서 한번 더 정리 했습니다