모두를 위한 확실한 CSS 가이드에서 CSS 마스터하기

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

No.	Section	Link
1	Responsive Design Principles	Link
2	CSS Variables and Custom Properties	Link
3	Animations and Transitions	Link
4	Best Practices and Organization	Link

반응형 디자인 원칙

오늘날의 다중 기기 세상에서 반응형 디자인은 선택이 아니라 필수입니다. 귀하의 웹사이트는 스마트폰에서 보든 대형 데스크탑 모니터에서 보든 멋지게 보여야 합니다.

미디어 쿼리

미디어 쿼리는 반응형 디자인의 강력한 힘입니다.

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

로그인 후 복사

반응 단위

상대 단위를 사용하면 디자인이 자연스럽게 반응하게 됩니다.

rem: 루트 요소의 글꼴 크기에 상대적입니다
em: 상위 요소의 글꼴 크기를 기준으로 합니다
vw/vh: 뷰포트 크기 기준
%: 상위 요소의 크기에 상대적입니다

실습: 대응 서비스 섹션

미디어 쿼리와 유연한 단위를 사용하여 다양한 화면 크기에 원활하게 적응하는 반응형 서비스 섹션을 만듭니다.

HTML:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

로그인 후 복사

CSS: 서비스 섹션에 대한 보다 구체적인 중단점을 살펴보겠습니다.

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

로그인 후 복사

참고자료:

MDN 웹 문서 - 반응형 디자인 기초 - 뷰포트, 중단점 및 유연한 레이아웃을 다루는 반응형 디자인 개념에 대한 훌륭한 소개입니다.
FreeCodeCamp - 반응형 웹 디자인 인증 - 반응형 디자인 원칙, 그리드, 미디어 쿼리 및 접근성을 다루는 전체 과정입니다.
사용할 수 있나요? 미디어 쿼리 및 Flexbox와 같은 반응형 디자인 기능에 대한 브라우저 호환성을 확인하세요.
반응형 디자인 치트시트 - 주요 반응형 디자인 속성과 기술을 쉽게 이해할 수 있는 형식으로 다룹니다.

CSS 변수 및 사용자 정의 속성

CSS 변수(사용자 정의 속성)는 스타일시트에 프로그래밍과 같은 유연성을 제공합니다. 유지 관리가 더 쉬워지고 역동적인 스타일링이 가능해집니다.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

로그인 후 복사

실습: 테마 지정 및 재사용성을 위한 CSS 변수

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

로그인 후 복사

참고자료:

MDN 웹 문서 - CSS 사용자 정의 속성(변수) 사용 - CSS 변수 정의, 사용 및 업데이트에 대한 예를 포함하여 철저하고 초보자 친화적인 설명입니다.
W3Schools - CSS 변수 - 빠른 연습을 위해 라이브 코드 예제를 통해 CSS 변수의 기본 사항을 다룹니다.
CSS Tricks - 사용자 정의 속성에 대한 전체 가이드 - 실제 사용 사례와 고급 변수 사용에 대한 팁을 제공하는 포괄적인 가이드입니다.
Freecodecamp - CSS 변수 전체 핸드북 - 계단식 효과, 미디어 쿼리 기반 변수 및 범위 관리와 같은 강력한 기술을 살펴봅니다.

애니메이션 및 전환

웹사이트에 움직임을 추가하면 매력적인 사용자 경험을 얻을 수 있습니다. CSS는 애니메이션을 만드는 두 가지 주요 방법을 제공합니다.

전환

간단한 상태 변경에 적합:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

로그인 후 복사

키프레임 애니메이션

더 복잡한 다단계 애니메이션의 경우:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

로그인 후 복사

고급 애니메이션 기술

애니메이션의 CSS 사용자 정의 속성:

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

로그인 후 복사

고급 키프레임 애니메이션:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

로그인 후 복사

실습: 대화형 카드

호버 효과가 있는 대화형 카드 만들기:

HTML:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

로그인 후 복사

참고자료:

MDN 웹 문서 - CSS 전환 - 스타일 변경 시 부드러운 효과를 만드는 방법을 설명하는 CSS 전환에 대한 명확한 소개입니다.
MDN 웹 문서 - CSS 애니메이션 - 키프레임, 애니메이션 속성 및 복잡한 애니메이션 생성에 대한 단계별 가이드입니다.
W3Schools - CSS 전환 - 대화형으로 전환 및 애니메이션을 연습할 수 있는 라이브 코드 편집기가 있어 초보자에게 적합합니다.
W3Schools - CSS 애니메이션 - 키프레임 및 전환을 사용하여 웹사이트에 애니메이션을 추가하는 방법에 대한 따라하기 쉬운 가이드입니다.
CSS 트릭 - 애니메이션 - 반응형 애니메이션, 접근성을 위한 모션 감소 및 미디어 쿼리 통합에 대해 설명합니다.
Animate.css - 프로젝트에 쉽게 추가할 수 있는 사전 제작된 애니메이션을 제공하는 인기 있는 CSS 라이브러리입니다.

모범 사례 및 조직

CSS 아키텍처

일관적인 명명 규칙을 사용하세요
구성요소/기능별로 CSS 파일 정리
가능한 경우 특이성을 낮게 유지하세요
코드를 효과적으로 주석 처리하세요.

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

로그인 후 복사

실습: CSS 아키텍처 모범 사례

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>CSS 아키텍처 연습</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- 기본 브라우저 스타일을 재설정합니다 -->
    <link rel="stylesheet" href="styles/layout.css"> <!-- 레이아웃 관련 스타일 -->
    <link rel="stylesheet" href="styles/comComponents/header.css"> <!-- 헤더 구성요소 스타일 -->
    <link rel="stylesheet" href="styles/comComponents/card.css"> <!-- 카드 구성요소 스타일 -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- 빠른 수정을 위한 유틸리티 클래스 -->
</머리>
<본문>
    



<h3>
  
  
  참고자료:
</h3>

로그인 후 복사

BEM - 블록 요소 수정자 - CSS 클래스 이름을 지정하고 스타일을 구조화하여 재사용성과 유지 관리성을 향상시키는 인기 있는 방법론입니다.
SMACSS - CSS를 위한 확장 가능하고 모듈형 아키텍처 - CSS를 논리적이고 유지 관리 가능한 범주로 구성하기 위한 세부 프레임워크입니다.
Harry Roberts의 CSS 지침 - 논리적 파일 구조와 명명 규칙을 사용하여 확장 가능하고 유지 관리가 가능한 CSS 작성에 대한 고품질 가이드입니다.