보랑취향

[css] 반응형 본문

IT/html&css

[css] 반응형

보랑취향 2025. 6. 13. 15:27
CSS Grid와 Flexbox 사용
기본적인 레이아웃

CSS Grid와 Flexbox는 반응형 레이아웃을 더 쉽게 구현할 수 있게 해줍니다

 
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
 

Media Query와 Container Queries 병행 사용
반응형 설정
Media Query (전통적 방법)
 
/* 기본 스타일 */
.container {
    width: 100%;
}

/* 태블릿 */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 데스크톱 */
@media screen and (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}
 

CSS Container Queries

 

2022년부터 지원되는 새로운 기술
부모 컨테이너의 크기에 따라 자식 요소의 스타일을 조정할 수 있음

 
.container {
    container-type: inline-size;
}

.child {
    container-name: sidebar;
}
 

CSS Custom Properties 사용
브레이크포인트 관리 

반응형 브레이크포인트를 변수로 관리하여 유지보수를 쉽게 함

 
:root {
    --mobile: 320px;
    --tablet: 768px;
    --desktop: 1024px;
}

@media screen and (min-width: var(--tablet)) {
    /* 태블릿 스타일 */
}
 

CSS Aspect Ratio 사용
레이아웃 비율

반응형 이미지나 컨테이너의 비율을 쉽게 유지할 수 있음

 
.container {
    aspect-ratio: 16/9;
}
 



CSS Logical Properties 사용
텍스트 크기

반응형 레이아웃에서 더 유연한 스타일링을 가능하게 함

 
.element {
    padding-inline: 20px; /* 수평 패딩 */
    padding-block: 10px;  /* 수직 패딩 */
}
 

CSS Container Queries + CSS Grid

최신 트렌드는 Container Queries와 CSS Grid를 함께 사용하는 방식

 
.container {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
 

 

728x90
Comments