[웹 프론트엔드] 1분 코딩 css 레이아웃

1분 코딩) css 레이아웃

📌 참고자료

• 1분 코딩) css 레이아웃
  https://www.youtube.com/watch?v=Zny5Vxqk6Mk

• css float 이해하기 & clear하는 방법
  https://ddorang-d.tistory.com/12

float 속성의 문제점

• float 속성을 가진 요소는 말 그대로 요소가 둥둥 떠있는 상태이다
  -> 앞에 요소가 float상태일 때 그 다음에 있는 요소는 그 자리가 비었다고 생각하고 그 자리로 올라오게 된다
  -> 부모의 자식들이 모두 float상태일 때 부모는 자식을 인식하지 못하고 height값을 찾지 못 한다

float 속성의 문제점 해결하기

• float로 대응하기
  앞에 요소가 float인 상태에서 뒤에 요소가 float이 아닐 경우 문제가 발생하는 것이기 때문에, 그 다음 요소 역시 float 상태로 바꿔주면 해결된다
  -> 하지만 이건 그 뒤에 요소들에게도 동일한 문제가 발생하기 때문에 완전한 해결책이라고 볼 수 없다
• ⚡부모에 overflow: hidden 적용하기
  자식 요소가 float인 부모에 overflow: hidden 속성을 주면 부모가 자식을 담아낸다
  -> 다만, 이 방법은 내용이 넘치면 안보이기 때문에 한계가 있다
• 빈 요소에 clear:both 넣기
  float된 요소 밑에 빈 임의의 요소를 만들어 clear: both를 준다
  -> clear는 취소한다는 뜻으로 float를 취소시킨다
  -> 이건 마크업의 흐름을 깨기 때문에 권장하는 방법이 아니다
• 가상 요소 ::after 사용하기
  부모 요소에 ::after를 사용하여 가상 요소를 만들어 준다
  가상 요소에 display: block 속성을 적용하여 한 줄을 가득 채우도록 하고,빈 콘텐츠를 넣어주고, clear: both를 적용시켜준다 (+ height: 0, visibility: hidden)
  -> 부모 뒤에 보이지 않는 가상요소를 만들어 뒤에 요소가 위로 따라 올라가지 않게 해준다
  -> 가장 많이 사용하는 방법이다

• css 가상 요소 before, after
  https://webroadcast.tistory.com/4

가상 요소 before, after

• ::before 선택한 element(s) 앞에 가상 콘텐츠 삽입
  ::after 선택한 element(s)s 뒤에 가상 콘텐츠 삽입
• 가상 요소 before/after를 사용할 때 항상 content 속성을 같이 사용한다
  -> content ="" ;
  -> HTML에는 존재하지 않고 CSS에서만 존재하는 가상 요소이기 때문에 javascript로 제어하기 어렵다