[작성자:] root

React 환경 설정 및 프로젝트 시작하기, Create React App으로 리액트 프로젝트 생성하기

1. 서론

리액트는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 효율적이고 유연한 사용자 인터페이스(UI)를 개발할 수 있도록 설계되었습니다. 본 강좌에서는 리액트 환경 설정 및 프로젝트 시작을 위한 기본적인 방법을 단계별로 설명하고, Create React App을 사용하여 리액트 프로젝트를 생성하는 방법을 알아보겠습니다.

2. 리액트 개발 환경 설정하기

리액트 프로젝트를 시작하기 위해서는 먼저 개발 환경을 설정해야 합니다. 기본적으로 아래와 같은 도구들이 필요합니다.

  • Node.js: 리액트는 자바스크립트로 작성되므로, Node.js가 필요합니다. 이를 통해 패키지 매니저인 npm을 사용할 수 있습니다.
  • npm (Node Package Manager): Node.js와 함께 설치되는 패키지 매니저로, 라이브러리를 쉽게 관리할 수 있습니다.
  • 코드 편집기: Visual Studio Code와 같은 코드를 작성하고 편집할 수 있는 IDE(통합 개발 환경)이 필요합니다.

2.1 Node.js 설치하기

Node.js는 Node.js 공식 웹사이트에서 다운로드 받을 수 있습니다. 운영 체제에 맞는 설치 파일을 다운로드하여 설치합니다. 설치 후, 커맨드 라인에서 아래 명령어로 설치 여부를 확인할 수 있습니다:

node -v

정상적으로 설치가 완료되었다면, 위 명령어를 입력했을 때 현재 설치된 Node.js의 버전이 출력됩니다.

2.2 npm 확인하기

Node.js를 설치하면 기본적으로 npm이 함께 설치됩니다. 아래 명령어로 npm의 설치 여부를 확인할 수 있습니다.

npm -v

버전 정보가 출력된다면 npm이 정상적으로 설치된 것입니다.

3. Create React App으로 리액트 프로젝트 생성하기

Create React App(CRA)은 리액트 애플리케이션을 빠르고 간편하게 생성할 수 있도록 도와주는 도구입니다. CRA를 사용하면 복잡한 빌드 설정 없이도 리액트 애플리케이션을 시작할 수 있습니다.

3.1 Create React App 설치

Create React App을 사용하려면 다음과 같은 명령어로 프로젝트를 생성할 수 있습니다. 커맨드 라인에서 다음 명령어를 입력합니다:

npx create-react-app my-app

위 명령어에서 my-app는 프로젝트의 이름입니다. 원하는 이름으로 바꿀 수 있습니다. npx는 npm 5.2.0 이상에서 제공하는 명령어로, 패키지를 로컬에 설치하지 않고도 사용할 수 있게 합니다.

3.2 프로젝트 구조 살펴보기

프로젝트 생성이 완료되면, 해당 디렉토리로 이동하여 프로젝트 구조를 살펴보겠습니다.

cd my-app

이제 my-app 디렉토리 내의 파일 및 폴더 구조는 다음과 같습니다:

    my-app/
    ├── node_modules/
    ├── public/
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src/
    │   ├── App.css
    │   ├── App.js
    │   ├── App.test.js
    │   ├── index.css
    │   ├── index.js
    │   └── logo.svg
    ├── .gitignore
    ├── package.json
    └── README.md

각 폴더 및 파일의 역할은 다음과 같습니다:

  • node_modules: 프로젝트가 사용하는 모든 패키지의 폴더입니다.
  • public: 정적 파일이 위치하는 폴더입니다. index.html 파일이 이곳에 위치합니다.
  • src: 리액트 컴포넌트 및 애플리케이션 코드가 위치하는 주 폴더입니다.
  • package.json: 프로젝트에 대한 설정 및 의존성 정보가 포함된 파일입니다.
  • README.md: 프로젝트에 대한 설명 및 기타 정보를 포함하는 파일입니다.

3.3 리액트 애플리케이션 실행하기

프로젝트가 생성되었다면, 아래 명령어로 리액트 애플리케이션을 실행할 수 있습니다:

npm start

브라우저에서 http://localhost:3000을 열면 기본 리액트 애플리케이션이 실행되고, 변경 사항에 따라 자동으로 업데이트됩니다.

3.4 첫 번째 리액트 컴포넌트 작성하기

이제 간단한 리액트 컴포넌트를 만들어 보겠습니다. src/App.js 파일을 열고 내용을 수정합니다.

import React from 'react';\n\nfunction App() {\n  return (\n    
\n      
Hello, React!
\n      
리액트 프로젝트가 성공적으로 생성되었습니다.
\n    
\n  );\n}\n\nexport default App;

위의 예제에서 간단한 HTML과 React를 사용하여 컴포넌트를 작성했습니다. 저장한 후 브라우저를 새로고침하면 변경 사항이 반영됩니다.

4. Conclusion

이제 여러분은 리액트 환경을 설정하고, Create React App을 통해 간단한 리액트 프로젝트를 생성하는 방법을 배웠습니다. 이 단계에서 얻은 지식을 바탕으로, 여러분은 더 복잡한 애플리케이션을 구축하는 데 필요한 기초를 다졌습니다. 다음 강좌에서는 리액트의 컴포넌트, 상태 관리 및 라우팅 등에 대해 심화 학습을 진행할 것입니다.

리액트를 처음 시작하는 많은 개발자들에게 Create React App은 매우 유용한 도구입니다. 복잡한 설정 없이도 쉽게 프로젝트를 시작할 수 있기 때문에, 리액트의 강력함을 체험하고 싶은 개발자들에게 추천합니다. 앞으로의 학습에서도 지속적으로 리액트의 다양한 기능과 생태계에 대해서 알아보시길 바랍니다.

5. 추가 자료

더 많은 정보를 얻고 싶으시다면, 아래의 자료를 참고하시기 바랍니다:

6. Q&A

질문이 있으신 분들은 댓글로 남겨주시면 최대한 빠르게 답변 드리겠습니다. 리액트와 관련된 모든 질문을 환영합니다!

지도와 데이터 시각화 연동하기, 지도 위에 데이터 오버레이 및 히트맵 생성

현대 웹 애플리케이션에서 데이터 시각화는 매우 중요한 역할을 합니다. 특히, 지리 정보를 사용할 때 지도 위에 시각적 요소를 겹치는 것은 데이터 통찰력을 증가시키고, 사용자 경험을 개선하는 방법입니다. 이번 포스트에서는 React를 사용하여 지도 위에 데이터를 오버레이하고 히트맵을 생성하는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 소개

React를 사용하여 데이터를 시각화하기 위해 여러 가지 라이브러리를 활용할 수 있습니다. 이 튜토리얼에서는 다음 라이브러리를 사용합니다:

  • React-Leaflet: Leaflet을 React에서 사용할 수 있도록 돕는 라이브러리입니다.
  • Leaflet.heat: 히트맵을 생성하는 Leaflet 플러그인입니다.
  • axios: API 호출을 위해 사용하는 라이브러리입니다.

설치 방법

필요한 라이브러리를 설치하기 위해 아래 명령어를 사용합니다:

npm install react-leaflet leaflet axios leaflet.heat

2. 기본 지도를 설정하기

먼저, React 프로젝트에서 기본 지도를 설정해 봅시다. 아래는 React 컴포넌트를 만들어 Leaflet 지도를 구현하는 기본적인 예제입니다.

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const MapView = () => {
    return (
        
            
        
    );
};

export default MapView;

코드 설명

위의 코드는 기본 지도를 생성하는 컴포넌트입니다. MapContainer는 지도 컴포넌트를 감싸고 있으며, TileLayer는 지도의 타일을 설정합니다. OpenStreetMap의 타일을 사용하여 기본 배경 지도를 생성하고, 서울의 좌표를 중심으로 설정했습니다.

3. 데이터 가져오기

다음으로, API를 통해 외부 데이터를 가져와야 합니다. 예를 들어, 특정 장소의 방문자 수와 같은 데이터를 가져올 수 있습니다. 아래는 axios를 사용하여 데이터를 가져오는 방법입니다.

import axios from 'axios';

const fetchData = async () => {
    try {
        const response = await axios.get('API_URL');
        return response.data; // 반환하는 데이터 포맷에 따라 변경
    } catch (error) {
        console.error('데이터를 가져오는 중 오류 발생:', error);
    }
};

코드 설명

위의 함수는 비동기적으로 데이터를 가져오는 예제입니다. fetchData 함수를 호출하면 API에서 데이터를 가져와 JSON 형태로 반환합니다.

4. 지도에 데이터 오버레이하기

가져온 데이터를 사용하여 지도 위에 마커를 추가할 수 있습니다. 아래는 마커를 추가하는 예제입니다.

import { Marker, Popup } from 'react-leaflet';

const MapView = ({ data }) => {
    return (
        
            
            {data.map((item, index) => (
                
                    {item.name}
                
            ))}
        
    );
};

코드 설명

위의 예제에서는 Marker와 Popup 컴포넌트를 사용하여 지도 위에 마커를 추가합니다. 데이터 배열을 순회하며 각 마커의 위도와 경도를 기반으로 마커를 위치시킵니다.

5. 히트맵 생성하기

이제 지도 위에 히트맵을 추가하여 데이터 분포를 시각화해 보겠습니다. 이를 위해 leaflet.heat를 사용할 수 있습니다.

import 'leaflet.heat';

const MapView = ({ data }) => {
    const heatMapData = data.map(item => [item.latitude, item.longitude, item.value]);

    return (
        
            
            
            {data.map((item, index) => (
                
                    {item.name}
                
            ))}
        
    );
};

히트맵 추가

HeatMap 컴포넌트를 사용하여 히트맵을 지도에 추가합니다. positions 속성에 히트맵 데이터 배열을 전달합니다. 히트맵 데이터는 각 데이터 포인트의 위도와 경도, 그리고 해당 값(히트맵에서의 영향을 주는 값)으로 구성됩니다.

6. 최종 코드

이제까지의 모든 기능을 포함한 최종 코드는 아래와 같습니다:

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import axios from 'axios';
import { HeatMap } from 'react-leaflet-heatmap-layer';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat';

const MapView = () => {
    const [data, setData] = useState([]);

    const fetchData = async () => {
        try {
            const response = await axios.get('API_URL');
            setData(response.data);
        } catch (error) {
            console.error('데이터를 가져오는 중 오류 발생:', error);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    const heatMapData = data.map(item => [item.latitude, item.longitude, item.value]);

    return (
        
            
            
            {data.map((item, index) => (
                
                    {item.name}
                
            ))}
        
    );
};

export default MapView;

7. 마무리

이번 포스트에서는 React를 사용하여 지도 위에 데이터를 오버레이하고 히트맵을 생성하는 방법에 대해 알아보았습니다. 이러한 기술은 다양한 데이터 분석과 시각화 프로젝트에서 유용하게 사용될 수 있습니다. 실제 데이터를 사용하여 테스트해보고, 각 데이터를 기반으로 한 다양한 시각화를 시도해 보시기 바랍니다.

추가 자료

더 많은 정보를 원하신다면 다음 자료를 참고하시기 바랍니다:

작은 CRUD 애플리케이션 만들기, 간단한 To-Do List 또는 메모 애플리케이션 만들기

리액트(React)는 현대 웹 애플리케이션을 구축하는 데 널리 사용되는 자바스크립트 라이브러리입니다. 리액트를 사용하면 효율적이고 선언적인 방식으로 사용자 인터페이스(UI)를 구축할 수 있습니다. 이번 글에서는 리액트를 이용하여 작은 CRUD(create, read, update, delete) 애플리케이션인 ‘To-Do List’ 또는 ‘메모 애플리케이션’을 만들어 보겠습니다.

1. 프로젝트 설정하기

먼저 리액트 애플리케이션을 만들기 위해 create-react-app을 사용할 것입니다. 이것은 리액트 애플리케이션의 기본 설정을 자동으로 처리해주는 도구입니다. 

npx create-react-app todo-app

위의 명령어를 실행하면 ‘todo-app’이라는 폴더가 생성되고 리액트 애플리케이션의 기본적인 파일 구조가 생성됩니다. 해당 폴더로 이동한 후, 개발 서버를 시작합시다. 

cd todo-app
npm start

2. 프로젝트 구조 이해하기

생성된 애플리케이션의 디렉토리 구조는 다음과 같습니다.

  • node_modules/: 설치된 패키지들이 저장되는 디렉토리
  • public/: 정적 파일들이 저장되는 디렉토리
  • src/: 리액트 컴포넌트 및 로직이 위치하는 디렉토리
  • package.json: 프로젝트 관련 메타데이터 및 의존성 정보

3. To-Do List 컴포넌트 생성하기

이제 실제로 To-Do List 애플리케이션을 구성하는 컴포넌트를 만들어보겠습니다. src/ 디렉토리로 이동하여 Todo.js라는 파일을 만들어 줍니다. 

touch src/Todo.js

Todo.js 파일에 기본 구조를 추가합니다. 

import React, { useState } from 'react';

const Todo = () => {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if (!input) return;
        setTodos([...todos, input]);
        setInput('');
    };

    const deleteTodo = (index) => {
        const newTodos = todos.filter((_, i) => i !== index);
        setTodos(newTodos);
    };

    return (
        

            
To-Do List

             setInput(e.target.value)} 
                placeholder="할 일을 입력하세요"
            />
            
            
    
                {todos.map((todo, index) => (
                    
  • 
                        {todo} 
                    
    • 
                ))}
            

        

    );
};

export default Todo;

위 코드에서는 useState 훅을 사용하여 입력된 텍스트와 To-Do 목록을 관리합니다. 사용자가 새로운 할 일을 추가할 때, 리스트에 해당 아이템을 추가하고 입력 필드는 초기화 됩니다. 삭제 버튼을 클릭할 경우, 특정 할 일을 목록에서 제거합니다.

4. 강화된 Features

단순한 기능 외에도 몇 가지 추가 기능을 구현해 보겠습니다.

4.1. 완료된 To-Do 마킹하기

각 To-Do 항목에 완료 상태를 추가하여 쉽게 처리할 수 있도록 만들 수 있습니다. 

const [completed, setCompleted] = useState(Array(todos.length).fill(false));

const toggleComplete = (index) => {
    const updatedCompleted = [...completed];
    updatedCompleted[index] = !updatedCompleted[index];
    setCompleted(updatedCompleted);
};


    
    {todos.map((todo, index) => (
        
  • 
            {todo}
            
            
        
    • 
    ))}

4.2. 수정 기능 추가하기

To-Do 항목을 수정하는 기능을 추가해보겠습니다. 

const editTodo = (index) => {
    const newTodo = prompt('수정할 내용을 입력하세요', todos[index]);
    if (newTodo) {
        const updatedTodos = todos.map((todo, i) => (i === index ? newTodo : todo));
        setTodos(updatedTodos);
    }
};


    
    {todos.map((todo, index) => (
        
  • 
            {todo}
            
            
        
    • 
    ))}

5. 리액트 Hooks 활용하기

리액트의 훅스(Hooks)는 함수 컴포넌트에서 상태 및 생명주기를 관리할 수 있게 해줍니다. 이번 프로젝트에서 useState를 사용하였지만, 더 복잡한 상태 관리를 위해 useReducer 훅을 사용할 수도 있습니다. useReducer는 상태를 관리하기에 유용하며, 특정 액션에 따라 상태를 업데이트할 수 있습니다.

5.1. useReducer 예제

import React, { useReducer } from 'react';

// 액션 타입 정의
const ADD_TODO = 'ADD_TODO';
const DELETE_TODO = 'DELETE_TODO';

// 초기 상태
const initialState = {
    todos: [],
};

// 리듀서 함수
const reducer = (state, action) => {
    switch (action.type) {
        case ADD_TODO:
            return { todos: [...state.todos, action.payload] };
        case DELETE_TODO:
            return { todos: state.todos.filter((_, index) => index !== action.payload) };
        default:
            return state;
    }
};

const TodoWithReducer = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if (!input) return;
        dispatch({ type: ADD_TODO, payload: input });
        setInput('');
    };

    return (
        

            
To-Do List with useReducer

             setInput(e.target.value)} 
                placeholder="할 일을 입력하세요"
            />
            
            
    
                {state.todos.map((todo, index) => (
                    
  • 
                        {todo} 
                    
    • 
                ))}
            

        

    );
};

export default TodoWithReducer;

6. 애플리케이션 스타일링

간단한 To-Do List 애플리케이션은 기본적인 기능을 가지고 있지만, 사용자 경험을 향상시키기 위해 CSS를 사용하여 스타일링할 수 있습니다. src/App.css 파일을 열고 다음과 같이 스타일을 추가해봅시다. 

/* App.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
h1 {
    text-align: center;
}
input {
    padding: 10px;
    font-size: 16px;
    width: 200px;
}
button {
    padding: 10px;
    font-size: 16px;
    margin-left: 5px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: white;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

7. 결론

이번 글에서는 리액트로 간단한 CRUD 애플리케이션인 To-Do List를 만들어 보았습니다. 상태 관리에 useState와 useReducer를 활용하고, 스타일링을 통해 사용자 경험을 개선할 수 있는 방법을 살펴보았습니다. 이러한 기초를 바탕으로 복잡한 애플리케이션을 구성하는 데 많은 도움이 될 것입니다.

리액트를 통한 개발은 더 많은 확장성과 유지보수성을 제공하므로, 다양한 프로젝트에 응용해보기를 권장합니다.

리액트로 대시보드 만들기, 사용자 설정을 저장하는 기능 추가

현대의 웹 애플리케이션에서는 사용자 맞춤화가 매우 중요한 요소로 자리잡고 있습니다.
사용자 인터페이스(UI)를 사용자에게 맞춤 설정할 수 있는 기능을 제공하면,
사용자가 애플리케이션을 더 편리하게 사용할 수 있으며, 이는 결국 애플리케이션의 사용성을 높이는 데 기여합니다.
이 글에서는 React를 사용하여 대시보드를 만들고, 사용자 설정을 로컬 스토리지에 저장하는 기능을 추가하는 방법을 알아보겠습니다.

1. 프로젝트 설정

먼저, React 프로젝트를 설정해야 합니다. Create React App을 사용하여 프로젝트를 간단히 설정합니다.
다음 명령어를 사용하여 새로운 React 애플리케이션을 생성합니다. 

        npx create-react-app my-dashboard
        cd my-dashboard
        npm start

2. 기본 대시보드 레이아웃 만들기

대시보드는 일반적으로 사이드바, 헤더, 콘텐츠 영역 등으로 구성됩니다.
먼저 기본적인 레이아웃을 정의해 보겠습니다. 

        // src/App.js
        import React from 'react';
        import './App.css';

        function App() {
            return (
                

                    

                        
대시보드

                    

                    

                        
                        

                            
환영합니다!

                            
이곳에서 다양한 데이터를 확인할 수 있습니다.

                        

                    

                

            );
        }

        export default App;

3. 사용자 설정 저장하기

사용자 설정을 저장하기 위해서는 React의 상태(state)를 사용하고,
로컬 스토리지(localStorage)를 활용하여 데이터를 영구적으로 저장합니다.
기본적인 사용자 설정으로는 다크 모드 및 언어 설정을 고려해 볼 수 있습니다.

3.1 상태 관리

다음 예시에서는 사용자 테마를 저장하는 간단한 설정을 구현해 보겠습니다. 

        // src/App.js
        import React, { useState, useEffect } from 'react';
        import './App.css';

        function App() {
            const [darkMode, setDarkMode] = useState(false);

            useEffect(() => {
                const savedMode = localStorage.getItem('darkMode');
                if (savedMode) {
                    setDarkMode(JSON.parse(savedMode));
                }
            }, []);

            useEffect(() => {
                localStorage.setItem('darkMode', darkMode);
            }, [darkMode]);

            const toggleDarkMode = () => {
                setDarkMode((prevMode) => !prevMode);
            };

            return (
                

                    

                        
대시보드

                        
                    

                    

                        
                        

                            
환영합니다!

                            
이곳에서 다양한 데이터를 확인할 수 있습니다.

                        

                    

                

            );
        }

        export default App;

        // src/App.css
        .app {
            background-color: white;
            color: black;
            transition: background-color 0.5s, color 0.5s;
        }

        .app.dark {
            background-color: black;
            color: white;
        }

3.2 설정 및 관리

사용자 설정 버튼을 추가하여 사용자가 모드를 전환할 수 있도록 하였습니다.
이는 버튼 클릭 시 상태가 변경되고, 변경된 상태가 로컬 스토리지에 저장되도록 하여
사용자 설정을 지속적으로 유지하게 됩니다.

4. 추가적인 사용자 설정 구현

이제 간단한 언어 설정 기능을 추가해 보겠습니다.
다국어 지원을 위해 언어 선택 드롭다운을 추가하고 사용자가 선택한 언어를 로컬 스토리지에 저장하도록 하겠습니다. 

        // src/App.js
        import React, { useState, useEffect } from 'react';
        import './App.css';

        function App() {
            const [darkMode, setDarkMode] = useState(false);
            const [language, setLanguage] = useState('ko');

            useEffect(() => {
                const savedMode = localStorage.getItem('darkMode');
                if (savedMode) {
                    setDarkMode(JSON.parse(savedMode));
                }
                
                const savedLanguage = localStorage.getItem('language');
                if (savedLanguage) {
                    setLanguage(savedLanguage);
                }
            }, []);

            useEffect(() => {
                localStorage.setItem('darkMode', darkMode);
            }, [darkMode]);

            useEffect(() => {
                localStorage.setItem('language', language);
            }, [language]);

            const toggleDarkMode = () => {
                setDarkMode((prevMode) => !prevMode);
            };

            const handleLanguageChange = (event) => {
                setLanguage(event.target.value);
            };

            return (
                

                    

                        
대시보드

                        
                        
                    

                    

                        
                        

                            
{language === 'ko' ? '환영합니다!' : 'Welcome!'}

                            
{language === 'ko' ? '이곳에서 다양한 데이터를 확인할 수 있습니다.' : 'You can check various data here.'}

                        

                    

                

            );
        }

        export default App;

5. 결론

이제 우리는 React로 간단한 대시보드를 만들고, 사용자 설정을 로컬 스토리지에 저장하는 기능을 구현했습니다.
이 기본적인 개념을 바탕으로 다양한 기능을 확장할 수 있습니다.
예를 들어, API와 통신하여 동적으로 데이터를 불러오고, 사용자 설정을 서버 측에서 관리할 수도 있습니다.
이 글을 통해 기본적인 설정을 이해하고, 자신만의 대시보드를 개발하는 데 도움이 되었기를 바랍니다.

6. 참고 자료

CSS와 스타일링, Styled Components와 CSS-in-JS

우리가 React와 같은 현대적인 프론트엔드 프레임워크를 사용할 때 스타일링은 매우 중요한 부분입니다. 사용자 경험을 극대화하기 위해서는 직관적이고 관리하기 쉬운 방식으로 스타일을 적용해야 합니다. 이에 따라 여러 가지 스타일링 접근 방법이 존재합니다. 이 글에서는 CSS의 기본 개념부터 시작하여, React에서 자주 사용되는 Styled Components와 CSS-in-JS에 대해 자세히 설명하겠습니다.

1. CSS의 기본 개념

CSS(Cascading Style Sheets)는 문서의 스타일을 정의하는 데 사용되는 언어입니다. HTML로 작성된 구조에 색상, 레이아웃, 폰트 등의 시각적 스타일을 추가합니다. CSS의 기본 구조는 선택자와 선언 블록으로 이루어져 있습니다. 아래는 CSS의 기본 예시입니다.

/* CSS 예제 */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

CSS는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 적용될 수 있으며, 각 방법마다 장단점이 있습니다.

  • 인라인 스타일: HTML 요소 내에 직접 스타일을 작성합니다. 하지만 코드가 복잡해지거나 재사용성이 떨어지므로 일반적으로 권장되지 않습니다.
  • 내부 스타일 시트: `