css TIL#38

1. position

static

• 위치를 지정하지 않을 때 사용

relative

• 위치 계산 시, static의 원래 위치부터 계산하며 따로 지정하지 않는다면 static 과 동일하게 동작한다.

absolute

• 원래 위치와 상관없이 위치를 지정할 수 있음.
• 단, 가장 가까운 상위 요소 기준으로 위치가 결정됨
  absolute그림 예
  위 사이트에서 그림으로 잘 정리가 되어 있어, 나중에 참고하면 좋을 듯 하다.✋🏻

fixed

• 스크롤과 상관없이 그 위치에 고정시켜 주는 것

2. float

repl.it 풀면서 제일 헤매고 제일 시간이 오래걸렸던 부분이다 😿

• 이미지와 텍스트를 함께 배치하기 위해 사용된다.

2-1) clear

<div class="box">...</div>
<section>...</section>

예를 들어 box 클래스와 그 안에 section이 있다.
css에서 box에 float을 지정하면, div와 section 의 표가 겹쳐진다.
이를 해결하기 위함이 clear

각각의 class를 둔 후, (ex, section의 클래스를 after-box로 두자)

.after-box {
  clear: left;
}

를 입력하면, div 아래로 표가 옮겨진다.

---

2-2) float 속성

[float 속성값]
none : 띄우지 않음 > 즉 기본값
left: 왼쪽에 띄움
right: 오른쪽에 띄움

[float속성 사용법]
1. inline 으로 float 속성 넣기
2. html에서 style 태그 활용하기
3. css 파일을 별도로 만들어서 연결하기