TIL - CSS : Position을 알아보자

1. Position 이란?

💡 우리가 작성한 html 태그나 id, class 박스 등의 위치를 지정해주는 속성이다.

2. Position 속성의 종류는?

1. static

• position 속성의 기본값
• html에 쓴 태그 순으로 위치가 지정된다
  

2. relative

• 상대적인 속성을 가지고 있다
• 원래 자신이 있어야 하는 위치에 상대적이다

3. absolute

• 기준점이 html 위치에 있다
• relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면
• absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치한다

4. fixed

• 스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않게 한다
• 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성

5. sticky

• sticky된 요소는 부모에 붙는다

📍 오늘의 수업 필기

1. 이미지와 텍스트를 넣었을 때 밑에 여백이 생기는 이유는 텍스트와 이미지의 베이스라인에 맞춰서 정렬되기 때문이다

• 해결방법 : vertical-align : top 또는 middle로 해결!

2. Text-align : center;

• 자식 요소인 Inline, block, inline-block 요소들과 text를 가운데 정렬 시킨다

3. Margin: 0 auto;

• 블럭요소에 주었을 때 자기 자신을 중앙정렬 한다.
• 블럭요소가 부모의 전체 width를 가지고 있을 경우 원하는 중앙 정렬을 얻을 수 없다
• 자기 자신이 Inline-block일 경우에는 사용할 수 없다
• Inline 요소를 display: block 으로 바꾼 뒤 Width 값을 부모보다 좁게 사용하면 사용할 수 있다