Mong dev blog

1. 미디어 쿼리란? (media query) 미디어 쿼리(media query)는 뷰포트 크기에 따라 스타일을 지정할 수 있는 CSS 기능이다. 만약 모바일, 태블릿, 데스크탑별로 다른 스타일을 적용해야한다면, 미디어 쿼리를 쓰면 된다. /* 미디어 쿼리 기본 문법 */ @media (조건) { 스타일 } 미디어 쿼리 조건에는 min-width, max-width, min-height, max-height 등이 있다. 아래 예시는 뷰포트의 너비가 300px이상일 때, .box의 배경색을 red로 지정하는 코드이다. @media screen and (min-width: 300px) { .box { background-color: red; } } 📌 그런데! Media Queries Level 4에서는 비..

💡 이번 시간에는 반응형 웹 구현할 때 사용하기 좋은 min, max, clamp 함수에 대해 알아보았다. 1. min()는 어떻게 쓸까? (1) max-width, width 우리는 max-width, width를 사용해 요소의 너비 범위를 지정할 수 있다. 아래 예시는 target의 기본 너비를 parent의 50%이나, max-width를 사용해 최대 너비를 200px로 지정했다. .target { width: 50%; max-width: 200px; } See the Pen max-width by KumJungMin (@kumjungmin) on CodePen. (2) min() ❓ 그런데, 조금 더 간단하게 그리고 width 말고 padding에도 최솟값을 지정할 수 없을까? 바로 min()함수..

🏃 만약 박스안의 글자가 여러 형태로 나타나며, 줄 바꿈의 경우 지정한 max-width를 넘기는 경우에만 작동하도록 해보자. See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen. 1. 코드 미리보기 XSaR nZ 5 hsKHW 6BQ ob3EtSvz pkjlt K3LWl9 7aEm GZk3L ptj CtRDf61 n8limNiY UlmJ Fia4NRZ cd9I8w1Aq 1ZJV0azadf rixBLvjy0pVCUB 2FRSx7 rBJH9 0noi3kx0U3TPtCJEN HcxmS .container { width: max-content; max-width: 300px; word-break: break-all; border: 1px solid bla..