styled-components를 활용한 다양한 스타일 속성 예제와 설명

이 예제에서는 styled-components를 사용하여 다양한 CSS 속성을 적용하는 방법을 보여줍니다. 이 예제 코드를 통해 배경, 배치, 정렬, 글꼴, 애니메이션 등 여러 스타일링 속성을 이해할 수 있습니다.

주석이 포함된 styled-components 로그인 폼 예제

import React, { useState } from "react";
import styled from "styled-components"

// 전체 화면의 중앙에 폼을 배치하는 컨테이너
const Wrapper = styled.div`
  display: flex;  // Flexbox를 사용하여 중앙 정렬
  align-items: center;  // 수직 중앙 정렬
  justify-content: center;  // 수평 중앙 정렬
  height: 100vh;  // 화면 전체 높이를 사용
  background-color: #f7f8fa;  // 밝은 회색 배경
`;

// 폼을 감싸는 컨테이너 스타일
const FormContainer = styled.div`
  width: 100%;
  max-width: 400px;  // 폼의 최대 너비를 설정
  padding: 40px;  // 폼 안쪽 여백
  background-color: white;  // 흰색 배경
  border-radius: 8px;  // 모서리를 둥글게
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  // 그림자로 입체감 추가
`;

// 제목 스타일
const Title = styled.h1`
  font-size: 24px;  // 글자 크기
  font-weight: bold;  // 글자 굵기
  margin-bottom: 20px;  // 아래 여백
  color: #333;  // 어두운 색 텍스트
  text-align: center;  // 가운데 정렬
`;

// 입력 필드 스타일
const Input = styled.input`
  width: 100%;  // 전체 너비
  padding: 12px 20px;  // 상하 12px, 좌우 20px 여백
  margin: 8px 0;  // 위아래 간격
  border: 1px solid #ddd;  // 얇은 테두리
  border-radius: 4px;  // 둥근 모서리
  font-size: 16px;  // 글자 크기

  &:focus {
    border-color: #0073e6;  // 포커스 시 파란색 테두리
    outline: none;  // 기본 포커스 아웃라인 제거
  }
`;

// 버튼 스타일
const Button = styled.button`
  width: 100%;  // 전체 너비
  padding: 12px;  // 안쪽 여백
  font-size: 16px;  // 글자 크기
  color: white;  // 흰색 글자
  background-color: #0073e6;  // 파란색 배경
  border: none;  // 테두리 없음
  border-radius: 4px;  // 둥근 모서리
  cursor: pointer;  // 클릭 가능한 커서
  transition: background-color 0.3s ease;  // 배경색 변경 효과

  &:hover {
    background-color: #005bb5;  // 호버 시 짙은 파란색
  }

  &:disabled {
    background-color: #ccc;  // 비활성화 시 회색
    cursor: not-allowed;  // 클릭 불가 커서
  }
`;

// 오류 메시지 스타일
const ErrorMessage = styled.p`
  color: tomato;  // 빨간색 텍스트
  font-size: 14px;  // 작은 글자 크기
  margin: 8px 0;  // 위아래 여백
  text-align: center;  // 중앙 정렬
`;

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  // 폼 제출 이벤트 핸들러
  const handleSubmit = (e) => {
    e.preventDefault();
    if (email === "" || password === "") {
      setError("All fields are required.");
    } else {
      setError("");
      alert("Logged in successfully!");
      // 실제 로그인 로직을 처리하는 위치
    }
  };

  return (
    <Wrapper>
      <FormContainer>
        <Title>Login</Title>
        <form onSubmit={handleSubmit}>
          <Input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          {error && <ErrorMessage>{error}</ErrorMessage>}
          <Button type="submit" disabled={!email || !password}>
            Login
          </Button>
        </form>
      </FormContainer>
    </Wrapper>
  );
}

속성 설명 요약

• display: flex: 요소를 플렉스 컨테이너로 만들어 자식 요소의 정렬과 배치를 관리합니다.
• align-items와 justify-content: 플렉스 컨테이너에서 자식 요소의 수직 및 수평 정렬을 설정합니다.
• background-color: 배경 색상을 설정합니다.
• border-radius: 요소의 모서리를 둥글게 합니다.
• box-shadow: 요소에 그림자를 추가해 입체감을 줍니다.
• transition과 hover: 스타일 변화를 부드럽게 전환하고 마우스를 올렸을 때 스타일을 바꾸는 효과를 추가합니다.
• disabled와 not-allowed: 버튼이 비활성화되었을 때 스타일과 커서를 설정합니다.