다섯 번째 문제: CSS 변수를 활용한 커스텀 입력 필드 만들기

요구사항

CSS 변수 설정 (Root Variables):
- 문서의 최상위 요소 (:root)에 다음 이름과 값으로 CSS 변수를 선언합니다.
  - --main-color: #6a5acd (밝은 보라색 계열)
  - --border-radius: 4px
  - --spacing: 8px
  - --font-size: 16px
HTML 구조:
- <div class="input-group"> 안에 <label> 태그와 <input type="text"> 태그를 만듭니다.
- label 텍스트는 "사용자 이름"으로, input에는 placeholder="이름을 입력하세요"를 넣습니다.
CSS - 입력 그룹 스타일:
- .input-group은 변수를 사용하여 하단 여백을 설정합니다. (변수 --spacing의 2배)
CSS - 입력 필드 스타일 (input):
- <input> 태그에 다음 스타일을 변수를 사용하여 적용합니다.
  - 너비: 100%
  - 패딩: 변수 --spacing을 사용하여 상하좌우에 적용합니다.
  - 글꼴 크기: 변수 --font-size를 사용합니다.
  - 테두리 굵기와 스타일: 1px solid #ccc
  - 모서리 둥글게: 변수 --border-radius를 사용합니다.
CSS - 포커스 효과:
- <input> 필드에 **포커스 (:focus)**가 되었을 때,
  - 테두리 색상을 **변수 --main-color**로 변경하고 굵기를 2px로 변경합니다.
  - 아웃라인 (outline)은 제거합니다.
CSS - 테마 변경 (재사용성 확인):
- .dark-theme 클래스를 하나 만들고, 이 클래스가 body에 적용될 경우를 대비하여 **변수 --main-color**의 값을 **#ff6347 (밝은 주황색 계열)**로 재정의합니다.
- (선택) body에 이 클래스를 적용했을 때, .input-group이 어떤 변화를 보이는지 확인해 봅니다. (코드 제출 시에는 body에 이 클래스를 적용하지 않아도 됩니다.)

사용자 이름 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --main-color: #6a5acd;
            --border-radius: 4px;
            --spacing: 8px;
            --font-size: 16px
        }

        .input-group {
            margin-bottom: calc(var(--spacing) * 2);
        }

        .input-group input {
            width: 100%;
            padding: var(--spacing);
            border: 1px solid #ccc;
            border-radius: var(--border-radius);
            font-size: var(--font-size);
        }

        .input-group input:focus {
            border: 2px solid var(--main-color);
            outline: 0;
        }

        .dark-theme:root {
            --main-color: #ff6347;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label for="">사용자 이름 : <input type="text" name="" id="" placeholder="이름을 입력하세요."></label>
    </div>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

일곱 번째 문제: Grid와 Flexbox를 혼합한 대시보드 레이아웃 만들기 (0)	2025.10.27
여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기 (0)	2025.10.27
네 번째 문제: 툴팁을 포함하는 버튼 만들기 (0)	2025.10.27
세 번째 문제: 반응형 3열 카드 레이아웃 만들기 (0)	2025.10.27
두 번째 문제: 유연한 내비게이션 바 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바