Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 인공지는챗봇
- 포토샵
- google icons
- 취미
- 피그마기초
- 애니메이션버튼코딩
- 베이킹기록
- 일러스트기초
- html 아이콘
- claude
- 베이킹
- 코딩
- 수증기효과
- 인공지능AI
- 노베이킹파우더
- 쿠킹씨
- 프롬프트 엔지니어링 자격증
- 비주얼스튜디오코드
- widsurf
- 요리
- ai데이터분석가
- 노른자베이킹
- 반응형
- AI
- gif
- Midjourney
- 점점퍼지는버튼
- 피그마
- 홈베이킹
- 브라우저검사
Archives
- Today
- Total
보랑취향
[css] 반응형 본문
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
'IT > html&css' 카테고리의 다른 글
[css] (Flex box)align (0) | 2025.06.15 |
---|---|
[css] Flexbox 예제 (0) | 2025.06.15 |
[html 아이콘] 구글폰트 VS 폰트어썸5(Font Awesome 5 Brands) (1) | 2025.06.13 |
[css애니메이션] 포인트버튼 (점점커지는버튼) (0) | 2025.06.10 |
[스크립트] 년도 숫자 카운트 코딩 (0) | 2025.06.09 |
Comments