React5 [React]리액트 에서 인라인 스타일 적용하기 React를 사용하다 보면 CSS 클래스를 따로 작성하는 대신, 간단한 스타일을 인라인으로 적용해야 할 때가 종종 있습니다.그럴 때 사용하는 방식이 바로 인라인 스타일입니다. 하지만 React에서는 일반 HTML과는 조금 다르게 작성됩니다. 기본 HTML vs React에서의 인라인 스타일 작성/*기본 html*/Hello/*React*/Hello 차이점 속성 이름 카멜 표기법(font-size → fontSize) 전체 스타일이 중괄호 2개({{ ... }}) 로 감싸짐리액트 인라인 스타일 특징 style={ ... }: JSX에서는 style 속성에 자바스크립트 객체를 넘겨줘야 하므로 중괄호 한 쌍이 필요합니다.객체 자체도 또 { color: 'red', fontSize: '20px' }처럼 생겼기.. 2025. 5. 26. React에서 CSS 파일을 사용하는 두 가지 방법 _ about.css vs about.module.css 리액트 에서 컴포넌트마다 스타일을 입혀야 할 일이 많습니다.그때 사용하는 CSS 파일에 두 가지 방식이 있습니다. 일반 CSS (about.css)와 CSS 모듈 (about.module.css)입니다.두 방식의 차이와 언제 어떤 걸 써야 하는지 간단하게 정리해볼게요.1. 일반 CSS : about.css가장 기본적인 방식입니다..css 파일을 만들고 className="클래스명" 형태로 스타일을 적용합니다. About.jsximport './about.css';function About() { return About Me;} about.css.title { color: red;} 장점기존 CSS 방식에 익숙한 사람에게 편리함전역 스타일을 정의할 때 유용단점클래스명이 전역이기 때문에, 다른 컴포넌트.. 2025. 5. 26. [React] 리액트에서 스타일을 적용하는 두 가지 방법 리액트에서 스타일을 적용하는 방법은 크게 두 가지가 있습니다. JSX 내부에서 style 객체 사용하기 외부 CSS 파일을 만들어서 불러오기 //JSX 스타일 객체방식 //외부 CSS 파일과 className 1. JSX 내부에서 style 객체 사용하기style={{ ... }} 또는 style={styles.이름} → JSX 안에서 직접 스타일을 작성 변환한 스타일 객체const styles = { aboutSection: { padding: '2rem', backgroundColor: '#fefefe', border: '1px solid #ddd', borderRadius: '8px', marginTop: '2rem', }, heading: { color: .. 2025. 5. 23. [React] 설치, 실행, 아이콘 설치, 터미널단축키 설치 터미널 명령어 npm create vite@latest # Vite 최신 버전으로 프로젝트 생성my-app # 생성할 폴더 이름-- --template react # 리액트 템플릿 사용 실행 명령어 cd my-app # 생성된 폴더로 이동npm install # 필요한 패키지 설치npm run dev # 개발 서버 실행 (http://localhost:5173)아이콘 설치 npm install react-icons터미널 단축 키 동작 Ctrl + C서버 종료 (코드에는 영향 없음)npm install새 라이브러리 설치npm run dev서버 재시작 2025. 5. 22. [CSS] 변수를 음수로 변환하는 방법 CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어유지보수가 편리하고 코드의 가독성도 향상됩니다. 종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다. 예를 들어 아래 처럼 마진 값을 주었을 때, 위 아래 마진이 40px이 되어 버리죠.리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를음수로 적용하기로 했습니다. 1. CSS 변수 정의CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다. :root { --margin_20: 20px;} 2. calc() 함수를 사용하여 변수 값을 음수로 변환하기CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.calc() 함수는 CSS 변수.. 2024. 8. 2. 이전 1 다음 728x90 반응형
