콘요맘떼 개발일지

  • 홈
  • 태그
  • 방명록

미디어 쿼리 1

[CSS] clamp 함수로 간단한 반응형 구현하기

현재 반응형 웹을 구현하는 가장 핵심 방법은 미디어쿼리를 사용하는 것이다. 그러나 미디어 쿼리는 한 요소에 대해 여러 화면에 대한 CSS 코드를 작성하기 때문에 전체적인 코드량이 매우 증가한다는 단점을 가진다. 만약 최소 크기, 최대 크기를 지정하는 정도의 간단한 반응형 스타일링이라면 css의 clamp 함수를 활용하는 것도 하나의 방법이다. clamp(min, preferred, max) clamp는 세 개의 값을 인자로 받는다. 첫 번째는 최소값, 두 번째는 일반적으로 적용되는 값, 마지막은 최대값이다. 즉 두 번째 값을 적용하되 그것이 최소값과 최대값의 범위를 벗어나지는 않는다. 일반적으로 두 번째 인자인 선호값(preferred value)에는 vw, vh 등 viewport를 기준으로 한 값이 ..

프론트엔드 기본개념 복습/CSS 2022.04.13
이전
1
다음
더보기
프로필사진

콘요맘떼 개발일지

  • 분류 전체보기 (135)
    • 모바일 이야기 (8)
    • 잡다한 교훈 (17)
    • Git 공부 (1)
    • 알고리즘, 자료구조 공부 (6)
    • CS 공부 (11)
    • 프론트엔드 테크면접 준비 (3)
    • 프론트엔드 기본개념 복습 (66)
      • HTML (5)
      • CSS (14)
      • Javascript (18)
      • React (12)
      • Webpack (0)
      • Redux (1)
      • Typescript (7)
      • 테스트코드 (5)
    • 독서 (12)
      • 클린코드 (10)
      • 이펙티브 타입스크립트 (2)
    • 프로젝트 (잡다한) (3)
    • 아키텍쳐 (2)
    • 일상 (1)

Tag

Lazy Loading, JavaScript, proxy, 노마드코더, 멀티 스레드, 실행 컨텍스트, 자료구조, 함수형 프로그래밍, 리액트, 노개북, React Hook, 리액트 훅, react query, http, @testing-library, 북클럽, React, css, jest, 자바스크립트,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   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

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바