HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
📝
N일차 배운 것 정리/
📝
4주차 주말 배운 것 정리
📝

4주차 주말 배운 것 정리

목차

목차1.CSS 1-1. CSS Float 속성의 clear 작업 하기1-2 CSS float의 왼쪽 오른쪽 동시에 쌓기1-3. float은 어떤 경우에 display값을 block으로 바꾸는 성질이있다.2. CSS- Position2.1 position: absolute2-1. position: fixed;2-2. 쌓임 맥락 고려하기 (링크)2-3. position: absolute, fixed 일 때, display가 block으로 변경되는 경우3. 3-1.

1.CSS

1-1. CSS Float 속성의 clear 작업 하기

예전에 수평정렬을 위해 많이 사용했지만, 현재는 flex의 등장으로 사용이 많이 줄어듬
💡
float 속성은 따로 처리를 하지 않으면 상위요소(container)가 감싸지 못하는 현상 생김 → 마지막요소에서 float을 해제 해주는 작업 필요(clear)
notion image
  • 해결방법
    • 1번 → 권장되지 않음
      • container에 overflow: hidden 속성 주기
      • float과 전혀 상관없는 overflow 속성을 통해 해결하는 것 근본적인 해결책이 아님
    • 2번 → 권장되지 않음
      • 마지막 요소를 만들어 clear: left 속성 주기
      • 실제 필요하지 않은 Element를 생성해주는 다는 것은 좋지 않은 접근
    • 3번 → 권장
      • container에 상요소 선택자 ::after 를 이용해 html 요소를 추가하기
      • .clearfix::after { content:””; display:block; clear:both;}
  • 주의사항
    • float 속성을 사용하는 Item들만이 container를 구성하고 있어야만 한다.
    • 하나의 container안에 float과 float이 아닌 속성의 요소들이 섞이면, 위치가 제어할 수 없게됨
        • notion image
    • float들만 하위요소로 가지는 container를 따로 만들어주고, 해당 container에 clearfix class를 걸어주어 해결
        • notion image

1-2 CSS float의 왼쪽 오른쪽 동시에 쌓기

  • Tobe
      • notion image
  • 주의사항
    • 1번
      • float:right 속성의 경우, 오른쪽에서 부터 차례대로 요소들이 쌓이게 됨
        • 12 - 43 의형식
        • 따라서 3-4를 하나의 div로 묶어 float:right 속성을 주고, 그 안에서 내부 요소를 float:left 속성을 주어 원하는 레이아웃을 만들수 있다.
    • 2번
      • 하위요소의 float—right container의 경우에도 당장은 레이아웃이 찌그러지지 않지만, 추후 복잡한 상황을 대비하여, 항상 clearfix를 통해 float container에 clear 옵션을 설정해주도록 한다.

1-3. float은 어떤 경우에 display값을 block으로 바꾸는 성질이있다.

  • 어떤경우
    • float이 적용된 element의 display가 inline, table 관련일 경우
    • float이 적용된 element의 display가 flex, grid인 경우는 적용 안됨
  • 즉 float을 사용하는 경우, inline 요소를 사용할 수 없게되고, 해당 요소에 diplay:block; 을 명시해주지 않아도 된다
 
  • 참고
    • inline의 특성
      • 가로와 세로 넓이가 가장 작아지려고한다.
      • 가로와 세로 넓이를 더이상 가질 수 없다

2. CSS- Position

💡
position은 element의 위치를 적용하는 속성

2.1 position: absolute

  • 목표
      • notion image
  • CSS 작성
      • position: absoulute;
right:0;
bottom:0
      position: absolute
      부모노드 기준으로 현재요소의 위치를 결정
  • View (화면 오른쪽아래로 가버림)
      • notion image
  • 문제원인
    • 부모요소의 position이 정해지지 않아, 자식요소에서 기준점을 window로 설정했기 때문
  • 해결
    • 부모요소의 position을 지정해주어야함
    • .parent{ position: relative }
  • View
notion image

2-1. position: fixed;

💡
viewport를 기준으로 위치를 정한다
예외상황
부모에서 transform: -- 속성 사용 시, 해당 요소의 fixed position 이 해제되며, absolute 속성의 부모기준이 달라질 수 있다..
원인
단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none 이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. by MDN
 

2-2. 쌓임 맥락 고려하기 (링크)

💡
쌓임 맥락은 z축 관리를 뜻하며, 우선순위가 높은 것이 화면 위에 쌓이도록 한다.
  1. 변화속성을 사용하는 방법
      2. transform: scale(1.5);opacity: .5; , filter: ~, perspective: ~ 등 사용할 경우, 순서에 따라 위로 위치하게 됨
  1. z-index를 이용하는 방법
      2. z-index 유의사항
      • 기본값인 static을 제외한 position: relative, absolute, fixed, sticky 속성을 가지고 있어야만 z-index가 적용됨
      • flex, grid의 자식요소의 경우 사용가능
       

2-3. position: absolute, fixed 일 때, display가 block으로 변경되는 경우

💡
display:inline 인 요소에서 position: absolute 혹은 position:fixed 가 적용되면 display:block으로 변경된다.
  • inline 설정했지만 적용되지 않는다. (fixed)
      • notion image

3.

3-1.