@ 규칙 (At-rules)

CSS @ 규칙 (At-rules)

특정 규칙을 수행하도록 지시하는 문장입니다.

@ 기호로 시작하며, 그 뒤에 규칙 유형을 나타내는 식별자가 따라옵니다.

주요 @ 규칙

@import

다른 스타일시트를 현재 스타일시트로 가져옵니다.

@import url('styles.css');
@import url('print.css') print;
CSS
복사

@media (미디어 쿼리)

특정 미디어 조건에 따라 스타일을 적용합니다.

반응형 웹 디자인의 핵심 요소입니다.

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}
CSS
복사

@font-face

웹 폰트를 정의하여 사용자 정의 글꼴을 사용할 수 있게 합니다.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}
CSS
복사

4. @keyframes

CSS 애니메이션의 중간 단계를 정의합니다.

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
CSS
복사

@charset

스타일시트의 문자 인코딩을 지정합니다.

@charset "UTF-8";
CSS
복사

@supports

브라우저가 특정 CSS 기능을 지원하는지 확인합니다.

@supports (display: grid) {
  .container {
    display: grid;
  }
}
CSS
복사

반응형 웹 디자인

다양한 디바이스와 화면 크기에 맞춰 레이아웃이 자동으로 조정되는 웹 디자인 기법입니다.

핵심 개념

뷰포트 (Viewport)

모바일 기기에서 웹 페이지를 올바르게 표시하기 위한 메타 태그 설정이 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML
복사

미디어 쿼리 (Media Queries)

화면 크기, 해상도, 방향 등에 따라 다른 스타일을 적용합니다.

일반적인 브레이크포인트

디바이스 유형	화면 크기 범위	미디어 쿼리	설명
모바일 (소형)	0px ~ 575px	@media (max-width: 575px)	스마트폰 세로 모드
모바일 (대형)	576px ~ 767px	@media (min-width: 576px)	대형 스마트폰
태블릿 (세로)	768px ~ 991px	@media (min-width: 768px)	태블릿 세로 모드, 소형 노트북
태블릿 (가로)	992px ~ 1199px	@media (min-width: 992px)	태블릿 가로 모드, 중형 데스크톱
데스크톱	1200px ~ 1399px	@media (min-width: 1200px)	일반 데스크톱
대형 데스크톱	1400px 이상	@media (min-width: 1400px)	고해상도 대형 모니터

미디어 쿼리 예제:

/* 모바일 우선 (Mobile First) */
.container {
  width: 100%;
  padding: 10px;
}

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

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

/* 고해상도 데스크톱 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
CSS
복사

유연한 그리드 (Flexible Grid)

고정된 픽셀 단위 대신 백분율, em, rem 등 상대적 단위를 사용합니다.

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 0;
}

/* 또는 CSS Grid 사용 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
CSS
복사

유연한 이미지

이미지가 컨테이너를 벗어나지 않도록 합니다.

img {
  max-width: 100%;
  height: auto;
  display: block;
}
CSS
복사

반응형 디자인 전략

모바일 우선 (Mobile First)

작은 화면을 기본으로 하고 큰 화면으로 확장하는 방식입니다.

/* 기본 스타일 (모바일) */
.header {
  font-size: 16px;
}

/* 큰 화면으로 확장 */
@media (min-width: 768px) {
  .header {
    font-size: 20px;
  }
}
CSS
복사

데스크톱 우선 (Desktop First)

큰 화면을 기본으로 하고 작은 화면으로 축소하는 방식입니다.

/* 기본 스타일 (데스크톱) */
.header {
  font-size: 20px;
}

/* 작은 화면으로 축소 */
@media (max-width: 767px) {
  .header {
    font-size: 16px;
  }
}
CSS
복사

미디어 쿼리 조건

화면 크기

@media (min-width: 768px) { }
@media (max-width: 1023px) { }
@media (min-width: 768px) and (max-width: 1023px) { }
CSS
복사

화면 방향

@media (orientation: portrait) {
  /* 세로 모드 */
}

@media (orientation: landscape) {
  /* 가로 모드 */
}
CSS
복사

해상도

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* 레티나 디스플레이용 고해상도 이미지 */
  .logo {
    background-image: url('logo@2x.png');
  }
}
CSS
복사

미디어 타입

@media screen { }
@media print { }
@media speech { }
CSS
복사

실전 예제

반응형 네비게이션

/* 모바일: 햄버거 메뉴 */
.nav-menu {
  display: none;
}

.nav-toggle {
  display: block;
}

.nav-menu.active {
  display: flex;
  flex-direction: column;
}

/* 데스크톱: 가로 메뉴 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    flex-direction: row;
  }
  
  .nav-toggle {
    display: none;
  }
}
CSS
복사

반응형 타이포그래피

/* 기본 폰트 크기 */
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

/* 태블릿 */
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  html {
    font-size: 20px;
  }
}

/* 또는 clamp() 함수 사용 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}
CSS
복사

CSS Grid와 Flexbox를 활용한 반응형 레이아웃

Flexbox 예제

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 300px; /* 최소 300px, 공간이 있으면 확장 */
}
CSS
복사

Grid 예제

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

/* 명시적 브레이크포인트 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
CSS
복사

컨테이너 쿼리 (@container)

최신 CSS 기능으로, 부모 컨테이너의 크기에 따라 스타일을 적용합니다.

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

@container card (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
CSS
복사

반응형 디자인 Best Practices

항목	내용
모바일 우선 접근	작은 화면부터 시작하여 점진적으로 확장
터치 친화적 UI	버튼과 링크는 최소 44x44px 크기 유지
적절한 브레이크포인트	콘텐츠 기반으로 브레이크포인트 설정
성능 최적화	필요한 경우에만 리소스 로드
테스트	다양한 디바이스와 브라우저에서 테스트
접근성	키보드 네비게이션과 스크린 리더 지원

유용한 단위

단위	설명
vw, vh	뷰포트 너비/높이의 1%
%	부모 요소 기준 상대 크기
em	부모 요소의 폰트 크기 기준
rem	루트(html) 요소의 폰트 크기 기준
fr	Grid에서 사용하는 비율 단위