고급 기술

Frontend SELF KO

레벨 32 , 레슨 4

사용 가능

10.1 중첩 변수와 함수

더 복잡하고 동적인 스타일을 구현하기 위해 CSS 변수와 함수의 조합을 사용하여 중첩 변수, JavaScript를 통한 동적 값 변경, 복잡한 그라데이션과 같은 고급 기술을 활용할 수 있어. 더 복잡한 예제와 기술을 살펴보자.

1. 중첩 변수와 함수

이 예제에서는 요소 크기를 동적으로 변경하기 위해 변수 중첩을 사용해 봤어:

CSS

    
      :root {
        --base-size: 16px;
        --scale-factor: 1.5;
        --scaled-size: calc(var(--base-size) * var(--scale-factor));
      }

      .container {
        font-size: var(--scaled-size);
        padding: calc(var(--scaled-size) / 2);
        margin: calc(var(--scaled-size) / 4);
      }

2. 동적 색조 변경 테마화

CSS 변수와 JavaScript를 통해 hsl()을 사용하여 테마를 만들고 동적으로 색조를 변경할 수 있어.

버튼을 클릭하면 --base-hue 값이 변경되어 배경색이 동적으로 변경돼:

CSS

    
      :root {
        --base-hue: 200;
        --saturation: 70%;
        --lightness: 50%;
        --primary-color: hsl(var(--base-hue), var(--saturation), var(--lightness));
      }

      body {
        background-color: var(--primary-color);
        transition: background-color 0.3s;
      }

HTML

    
      <button id="change-color">Change Color</button>

JavaScript

    
// "change-color" id가 있는 요소를 가져옴
document.getElementById('change-color').addEventListener('click', () => {
  // 문서의 루트 요소 가져옴 (HTML)
  const root = document.documentElement;

  // HSL 형식의 색상 색조를 위한 0부터 359까지의 무작위 숫자 생성
  const newHue = Math.floor(Math.random() * 360);

  // 사용자 지정 CSS 변수 --base-hue에 대한 새로운 값 설정
  // 이 변수는 아마도 스타일에서 기본 색상을 정의하는 데 사용됨
  root.style.setProperty('--base-hue', newHue);
});

10.2 복잡한 그라데이션

3. 복잡한 다단계 그라데이션

이 예제에서는 여러 색상 스탑을 사용하여 복잡한 배경을 생성하는 다단계 선형 그라데이션을 사용했어:

CSS

    
      :root {
        --color-stop1: hsla(200, 100%, 50%, 0.8);
        --color-stop2: hsla(340, 100%, 50%, 0.8);
        --color-stop3: hsla(120, 100%, 50%, 0.8);
        --color-stop4: hsla(60, 100%, 50%, 0.8);
      }

      .complex-gradient {
        background: linear-gradient(
          45deg,
          var(--color-stop1) 25%,
          var(--color-stop2) 25%,
          var(--color-stop2) 50%,
          var(--color-stop3) 50%,
          var(--color-stop3) 75%,
          var(--color-stop4) 75%
        );
      }

4. 동적 적응형 컴포넌트 생성

스크린 크기 및 기타 요인에 따라 속성을 변경하는 적응형 컴포넌트를 생성하기 위해 CSS 변수 및 함수를 사용하는 방법이야.

적응형 컴포넌트는 스크린 크기에 따라 패딩과 배경색을 변경해:

HTML

    
      <div class="dynamic-component">동적 컴포넌트</div>

CSS

    
      :root {
        --base-padding: 20px;
        --scale-factor: 1.5;
        --dynamic-padding: calc(var(--base-padding) * var(--scale-factor));
      }

      @media (max-width: 600px) {
        :root {
          --scale-factor: 1;
        }
      }

      .dynamic-component {
        padding: var(--dynamic-padding);
        background-color: hsl(calc(100 + var(--scale-factor) * 50), 100%, 50%);
      }

5. JavaScript 및 CSS 변수를 사용한 그라데이션 생성

JavaScript로 얻은 데이터를 기반으로 동적으로 그라데이션을 생성하는 방법이야.

버튼을 클릭하면 무작위로 새로운 색상과 그라데이션 각도가 생성돼:

CSS

    
      :root {
        --color1: hsl(200, 100%, 50%);
        --color2: hsl(340, 100%, 50%);
        --angle: 45deg;
      }

      .dynamic-gradient {
        background: linear-gradient(var(--angle), var(--color1), var(--color2));
      }

HTML

    
      <button id="generate-gradient">Generate Gradient</button>
      <div class="dynamic-gradient">Content</div>

JavaScript

    

// "generate-gradient" id가 있는 요소를 가져옴
document.getElementById('generate-gradient').addEventListener('click', () => {
  // 문서의 루트 요소 가져옴 (HTML)
  const root = document.documentElement;

  // HSL 형식으로 최대 채도 및 중간 밝기의 두 가지 무작위 색상 생성
  const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
  const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;

  // 그라데이션에 대한 무작위 각도 생성
  const newAngle = `${Math.floor(Math.random() * 360)}deg`;

  // 사용자 지정 CSS 변수에 대한 새로운 값 설정
  root.style.setProperty('--color1', newColor1);
  root.style.setProperty('--color2', newColor2);
  root.style.setProperty('--angle', newAngle);
});

10.3 CSS 변수를 사용한 동적 테마

예제 1: CSS 변수와 JavaScript를 사용한 동적 테마 변경

선택한 테마에 따라 CSS 변수가 변경되는 동적 테마 시스템을 생성할 거야:

CSS

    
      :root {
        --background-color: #ffffff;
        --text-color: #000000;
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
      }

      body {
        background-color: var(--background-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }

      .container {
        padding: 20px;
      }

      button {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

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

      .content {
        margin-top: 20px;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>동적 테마 변경</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="container">
            <button onclick="switchTheme()">테마 변경</button>
            <div class="content">
              <h1>제목</h1>
              <p>동적 테마 변경 예시 텍스트.</p>
            </div>
          </div>
          <script src="script.js"></script>
        </body>
      </html>

JavaScript

    
     // 테마 객체를 정의
const themes = {
  light: {
    // 라이트 테마 색상
    '--background-color': '#ffffff',  // 배경색
    '--text-color': '#000000',        // 텍스트 색상
    '--primary-color': '#3498db',      // 기본 색상
    '--secondary-color': '#2ecc71'    // 보조 색상
  },
  dark: {
    // 다크 테마 색상
    '--background-color': '#2c3e50',  // 배경색
    '--text-color': '#ecf0f1',        // 텍스트 색상
    '--primary-color': '#e74c3c',      // 기본 색상
    '--secondary-color': '#8e44ad'    // 보조 색상
  }
};

// 현재 선택된 테마
let currentTheme = 'light';

// 테마를 전환하는 함수
function switchTheme() {
  // currentTheme의 값을 반전함 (라이트 -> 다크, 다크 -> 라이트)
  currentTheme = currentTheme === 'light' ? 'dark' : 'light';

  // 현재 테마의 색상 객체를 가져옴
  const theme = themes[currentTheme];

  // 테마 객체의 모든 키-값 쌍을 순회
  for (let [variable, value] of Object.entries(theme)) {
    // CSS 변수 값 설정
    document.documentElement.style.setProperty(variable, value);
  }
}

예제 2: calc(), min(), max() 및 clamp()를 사용하여 폰트 크기와 패딩을 조절하는 반응형 디자인

보기 창 너비에 따라 폰트 크기 및 패딩이 변경되는 반응형 레이아웃을 만들어볼 거야:

CSS

    
      :root {
        --base-font-size: 16px;
        --base-padding: 10px;
        --min-font-size: 14px;
        --max-font-size: 24px;
        --preferred-font-size: 2vw;
        --min-padding: 8px;
        --max-padding: 20px;
        --preferred-padding: 1.5vw;
      }

      body {
        font-size: clamp(var(--min-font-size), var(--preferred-font-size), var(--max-font-size));
        padding: clamp(var(--min-padding), var(--preferred-padding), var(--max-padding));
        transition: font-size 0.3s, padding 0.3s;
      }

      .responsive-container {
        margin: 0 auto;
        max-width: 800px;
        padding: calc(var(--base-padding) * 2);
        text-align: center;
      }

      h1 {
        font-size: clamp(calc(var(--base-font-size) * 1.5), 3vw, 36px);
      }

      p {
        font-size: clamp(var(--base-font-size), 2vw, 24px);
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>동적 크기를 가진 반응형 디자인</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="responsive-container">
            <h1>반응형 제목</h1>
            <p>이 텍스트는 보기 창 크기에 맞춰 폰트 크기와 패딩을 조정해.</p>
          </div>
        </body>
      </html>

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION