CSS @ Rules: 초보자를 위한 종합 가이드

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 CSS @ Rules의 fascinatings한 세상으로 빠져들어갑니다. 이전에 들어보지 못했다면 걱정 마세요 - 이 튜토리얼의 끝까지 읽다보면 이 강력한 도구들을 마스터하는 법을 배울 것입니다!

CSS @ Rules이란?

먼저 기본 개념부터 설명해보겠습니다. CSS @ Rules(pronounced "at-rules")는 CSS의 superpowers를 제공하는 특별한 지시입니다. 이를 통해 우리는 스타일이 다양한 상황에서 어떻게 동작하는지 정의하고, 애니메이션을 만들고, 심지어 사용자 정의 속성을 정의할 수 있습니다. 이를 webpage를 진정으로 동적으로 만드는 secret sauce라고 생각해보세요!

문법

@ Rules의 문법은 상당히 간단합니다. 항상 '@' 기호로 시작하여, 식별자(룰 이름)를 따라하고, 선언 블록이나 세미콜론으로 이어집니다. 다음은 일반 구조입니다:

@rule-name {
/* rule content */
}

또한 블록이 필요하지 않은 일부 룰의 경우:

@rule-name value;

간단하지 않나요? 이제 가장 흔하고 유용한 @ Rules 중 일부를 탐구해보겠습니다!

@ Rules의 유형

CSS에는 다양한 @ Rules가 있으며, 각각의 룰은 고유한 목적을 가지고 있습니다. 여기 몇 가지 중요한 룰을 요약한 표를 제공합니다:

@ Rule	목적
@media	기기 특성에 따라 스타일을 적용
@keyframes	애니메이션 시퀀스 정의
@font-face	사용자 정의 폰트 사용 허용
@import	다른 CSS 파일에서 스타일을 가져옴
@page	인쇄 시 특정 페이지에 대한 룰 정의
@supports	브라우저 기능 지원 여부에 따라 스타일을 적용
@charset	스타일시트의 문자 인코딩 지정

이제 몇 가지 룰을 예제와 함께 깊이 탐구해보겠습니다!

CSS @ Rules - @page 예제

@page 룰은 인쇄 레이아웃을 다루는 데 특히 유용합니다. 이를 통해 인쇄된 페이지의 크기, 여백 기타 속성을 정의할 수 있습니다.

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

이 예제에서 우리는 모든 페이지를 A4 크기로 설정하고 1cm의 여백을 지정합니다. 그런 다음 첫 페이지에 특별한 2cm 상단 여백을 주고 있습니다. 아름다운 이력서를 만드는 중이라면, 이 룰을 통해 화면에서와 같이 인쇄물에서도 멋지게 보이도록 할 수 있습니다!

CSS @ Rules - @keyframes 예제

이제 애니메이션으로 좀 더 재미있게 만들어보겠습니다! @keyframes 룰은 webpage에서 부드럽고 시선을 사로잡는 애니메이션을 만드는 티켓입니다.

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: bounce 1s infinite;
}

이 코드는 간단한 반짝이는 애니메이션을 만듭니다. 버튼은 20px 위로 이동한 다음 다시 아래로 돌아가며 무한히 반복됩니다. 버튼에 작은 트램폴린을 주는 것 같아요!

이 애니메이션을 사용하려면 다음과 같이 요소에 적용합니다:

<button class="bouncy-button">Click me!</button>

CSS @ Rules - @property 예제

@property 룰은 CSS의 새로운 추가물로, 사용자 정의 속성(또는 CSS 변수)을 정의하고 사용할 수 있도록 하며, 특정 타입, 상속 행동, 초기 값을 지정할 수 있습니다.

@property --main-color {
syntax: '<color>';
inherits: false;
initial-value: #ff0000;
}

.my-element {
background-color: var(--main-color);
}

이 예제에서 우리는 --main-color이라는 사용자 정의 속성을 정의합니다. 이는 색상 값으로 설정되며, 상위 요소로부터 상속되지 않으며, 초기 값은 빨강색입니다. 이를 통해 우리는 CSS 변수를 더 많이 제어하고 유연하게 사용할 수 있습니다.

CSS @ Rules - 룰 목록

우리는 몇 가지 흔한 @ Rules를 다루었지만, 탐구할 수 있는 많은 룰이 더 있습니다. 여기 더 포괄적인 목록을 제공합니다:

@ Rule	설명
@charset	스타일시트의 문자 인코딩 지정
@import	다른 CSS 파일에서 스타일을 가져옴
@namespace	네임스페이스 프리픽스 선언
@media	기기 특성에 따라 스타일을 적용
@supports	브라우저 기능 지원 여부에 따라 스타일을 적용
@document	문서 특성에 따라 스타일을 적용 (廃止됨)
@font-face	사용자 정의 폰트 사용 허용
@keyframes	애니메이션 시퀀스 정의
@viewport	뷰포트 특성을 제어 (대부분 메타 뷰포트 태그로 대체됨)
@page	인쇄 시 특정 페이지에 대한 룰 정의
@counter-style	카운터 스타일 정의
@font-feature-values	OpenType 폰트 기능에 대한 이름된 값을 정의
@property	사용자 정의 CSS 속성 정의

각 룰은 스타일링과 webpage 제어에 새로운 가능성을 열어줍니다. CSS 여정을 계속하면서 이 강력한 도구들을 점점 더 자주 사용하게 될 것입니다.

기억하시오, CSS @ Rules을 마스터하는 열쇠는 연습입니다. 두려워 말고 다양한 조합을 실험해보세요. 누구 알겠는가? 당신은 다음 큰 웹 디자인 트렌드를 만들 수도 있습니다!

행복하게 코딩하세요, 그리고 스타일시트가 항상 버그가 없기를 바랍니다!

Credits: Image by storyset