[React] (리액트 공부하기 36) CSS

자 이제 css에 대해서 공부 할 차례...
당연히 리액트를 하려면 css를 알아야겠지?

---

1. CSS란?

CSS(Cascading Style Sheets)는 HTML 요소에 스타일을 적용하기 위한 언어이다.
CSS는 "Cascading(계단식)"이라는 이름처럼 여러 스타일 규칙이 적용될 때 우선순위에 따라 적용이 된다.

CSS 기본 구조

h1 {
color: green; /* 글자 색을 초록색으로 */
font-size: 16px; /* 글자 크기를 16px로 */
}

• Selector(선택자): 스타일을 적용할 HTML 요소를 선택합니다.
• Property(속성): 적용할 스타일의 종류(예: color, font-size)
• Value(값): 속성에 적용할 값(예: green, 16px)
• Declaration(선언): 속성과 값을 함께 묶은 하나의 규칙

---

2. 선택자(Selectors)

2.1 기본 선택자

1. 태그 선택자
   HTML 태그를 기반으로 스타일을 적용한다.

h1 {
  color: green;
}

2. ID 선택자
   특정 ID 속성을 가진 요소에 스타일을 적용한다.

#section {
  background-color: black; 
}

<div id="section"></div>

3. 클래스 선택자
   특정 클래스 이름을 가진 요소에 스타일을 적용한다.

.medium {
  font-size: 20px;
}

<span class="medium">텍스트</span>

2.2 기타 선택자

1. Universal(전체 선택자)
   모든 요소에 스타일을 적용한다.

* {
  font-size: 20px;
  color: blue;
}

2. 그룹 선택자
   여러 선택자를 그룹으로 묶어 동일한 스타일을 적용한다.

h1, h2, p {
  color: black;
  text-align: center;
}

3. 상태 선택자
   요소의 상태(예: hover, active)에 따라 스타일을 적용한다.

button:hover {
  font-weight: bold;
}

a:active {
  color: red; /* 활성화된 링크는 빨간색으로 */
}

<button>버튼</button>
<a href="#">링크</a>

3. 코드 정리

• HTML

<h1>제목</h1>
<p id="section">본문 내용</p>
<button>마우스를 올려보세요.</button>
<a href="#">링크</a>

• css

h1 {
  color: green;
  font-size: 16px;
}

#section {
  background-color: black;
  color: white;
}

.medium {
  font-size: 20px;
}

* {
  font-size: 20px;
  color: blue;
}

h1, h2, p {
  text-align: center;
}

button:hover {
  font-weight: bold;
}

a:active {
  color: red;
}

---

3. 레이아웃과 관련된 속성

(1) display
요소가 화면에서 어떻게 배치될지를 결정한다.

• none: 화면에 숨기지만 DOM에는 존재
• block: 블록 요소처럼 동작
• inline: 인라인 요소처럼 동작
• flex: 플렉스 컨테이너로 설정

div {
  display: flex;
}

(2) visibility
요소의 가시성을 설정한다.

div {
  visibility: hidden; /* 화면에 보이지 않지만 공간은 차지 */
}

3. position
   요소의 위치를 지정한다.

• static: 기본값
• relative: 원래 위치를 기준으로 상대적 위치 지정
• absolute: 부모 요소를 기준으로 절대 위치 지정
• fixed: 브라우저 화면을 기준으로 위치 고정

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

---

4. 플렉스박스

플렉스박스는 레이아웃을 구성하는 데 최적화된 CSS 속성이다.

(1) fiex-direction

플렉스 아이템의 배치 방향을 설정한다.

• row: 가로 방향
• column: 세로 방향
• row-reverse: 가로 방향 반대로
• column-reserves: 세로 방향 반대로

.container {
  display: flex;
  flex-direction: row;
}

(2) align-items

교차 축 기준으로 아이템을 정렬한다.

• stretch: 기본값, 컨테이너 높이에 맞춤
• center: 중앙 정렬
• flex-start: 시작 지점
• flex-end: 끝 지점

.container {
  display: flex;
  align-items: center;
}

(3) justify-content

주 축 기준으로 아이템을 정렬한다.

• flex-start: 시작 지점
• center: 중앙 정렬
• flex-end: 끝 지점
• space-between: 아이템 간 간격 균등
• space-around: 간격을 아이템 양쪽에 균등 배치