11+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

이번주는 연휴로 인하여 3일밖에 수업을 하지 못한다.

 

오전에는 Position을 배우고 실습을 했다.

• position은 요소 박스의 배치 방식을 지정할 수 있는 속성이다.
  • relative : 본래 위치를 기준으로 offset 관련 속성으로 지정한 위치만큼 이동하여 배치된다.
  • absolute : layer처럼 다른 요소 위에 겹쳐 배치된다. 이때 offset 관련 속성에서 지정한 만큼 이동한다. 
  • fixed : 화면에서 자신의 영역을 차지하지 않고 layer로 떠있는다. Viewport를 기준으로 offset 관련 속성에서 지정한 만큼 이동
  • sticky : relative와 fixed의 배치를 섞어 놓은 것처럼 동작한다. 웹에서 따라다니는 상단바를 만들때 sticky를 자주 사용한다.

position 실습 !

 

오후에는 Float에 대해 배우고 실습을 했다.

• 일반적인 흐름에서 분리된 요소를 부모 요소 라인박스의 왼쪽이나 오른쪽에 배치하는 기법이다.
• 배치해야 할 항목이 여러개 있을때 position을 사용하면 좌표를 따로 설정해야하지만 float를 사용하면 쭉 붙도록 배치할 수 있다.
• clear는 float 속성으로 선언된 요소 다음에 위치한 요소를 float이 적용된 요소 아래로 배치하고자 할 때 사용한다.
  • 블록 요소에 선언할 때 유효하다.

float 실습 !

 

The Problem I Faced

float에 대해서 이해가 잘 안되었다.

나는 position으로 하나하나 배치하기 힘든 것들을 float를 통해 하는걸로 이해했다.

What I Tried to Do

14기 동기분들께 여쭈어보았다.

How I Solved It

position은 특정 위치에 배치시키는 방식이고 float는 옆으로 쭉 배치하는 방식이다.

현재는 position과 float 대신 flex와 grid를 더 많이 사용한다.

So

 

Aha Moments

아래 코드는 n번째 요소를 스타일링 하고 싶을때 사용한다.

nth-child(n) 

nth-of-type(n)

코드를 처음 짤때는 div를 사용하여 만들고 그 이후에 리팩토링을 걸쳐서 고도화 시킨다 !

flex를 사용하지 않고 margin을 통하여 가운데 배치를 하는 방법을 알게 되었다.

margin-inline: auto;