본문 바로가기 메뉴 바로가기

개발 블로그

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

개발 블로그

검색하기 폼
  • Today I Learned (118)
    • Frontend (2)
    • HTML (7)
    • CSS (26)
    • JavaScript (33)
      • 프로젝트 (4)
    • React (7)
    • Redux (2)
    • 부스트코스 (40)
      • 1. 컴퓨팅 사고 (1)
      • 2. C (3)
      • 3. 배열 (7)
      • 4. 알고리즘 (8)
      • 5. 메모리 (9)
      • 6. 자료구조 (10)
  • 방명록

clearfix (1)
Float (2)

엉망진창된 레이아웃을 고치는 방법 ① 쉽게 고치고 싶다면, overflow: hidden; 을 쓰면 붕 떠버린 자식요소를 잡을수 있다. 그냥 스스로 알아서 찾는다. ② 올바르게 정석대로 고치고 싶다면, clearfix 방법을 사용한다. 요소에 clear 속성을 사용하면 float되서 찾지 못하는 요소를 찾을 수 있게 해서 본래의 자리로 돌아가게 만든다. 부모입장에서는 여전히 float 된 요소를 찾지 못하지만 clear가 적용된 다른 요소덕분에 부모의 높이도 온전히 찾을 수 있게된다. clear의 값은 left, right, both가 있다. 각각 왼쪽, 오른쪽, 양쪽에 있는 float 요소를 감지해! 영향 받지마! 라는 뜻이다. ③ pseudo CSS 가상요소를 사용한다. 가상요소 pseudo에게 cl..

CSS 2020. 6. 7. 15:55
이전 1 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • overflow
  • 폼
  • 이벤트위임
  • float
  • vanillajs
  • Dom
  • CSSOM
  • form
  • malloc
  • 문자열
  • 동기처리
  • 연결리스트
  • Big Ω
  • RenderTree
  • 선택자
  • pseudo
  • 선형검색
  • valgrind
  • HTML
  • intersectionObserver
  • 비구조화할당
  • CSS
  • 함수
  • Typography
  • 프로젝트
  • capturing
  • 포인터
  • 구조체
  • sr-only
  • 구조분해할당
more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바