[React] 강의 2주차 (1) - CSS 기본문법 (주석, 선언방식, 선택자)

[국비지원교육]  [패스트캠퍼스] React 강의 2주차 (1) - CSS 기본문법

 

- CSS 기본 문법, 주석

- 선언방식

- 선택자(기본, 복합, 가상클래스)

---

1.  CSS 기본 문법, 주석

 

- 기본문법 : 스타일(CSS)을 적용할 대상 (Selector)

- 주석 : 브라우저는 이 범위를 해석하지 않음

선택자 {속성 : 값; }

ex)
span {
    font-size: 50px;
    color: blue;
    text-decoration: underline;
}


(주석시작) /*설명 작성*/ (주석 끝)
span {
    font-size: 50px;
    color: blue;
    text-decoration: underline;
}

 

---

2.  선언방식

• 내장 방식 : <style></style>의 내용(Contents)으로 스타일을 작성하는 방식
• 링크 방식 : <link />로 외부 CSS 문서를 가져와서 연결하는 방식, 병렬연결
• 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음) / 권장하지 않음
• @import 방식 : CSS @import 규칙으로 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식, 직렬연결

<!-- 내장 방식 -->
<style>
	div {
    	color: red;
        margin: 20px;
    }
</style>

<!-- 링크 방식 -->
<link rel="stylesheet" href="./css/main.css">
(main.css)
div {
	color: red;
    margin: 20px;
}

<!-- 인라인 방식 -->
<div style="color: red; margin: 20px;"></div>

<!-- @import 방식 -->
(main.css)
@import url("./box.css");
(box.css)
.box {
	background-color: red;
    padding: 20px;
}

 

---

3. 선택자(기본, 복합, 가상클래스, 가상 요소, 속성)

기본 선택자
*	전체선택자 (모든 요소를 선택)
태그 선택자 (태그명)	태그 이름이 ABC인 요소 선택.
클래스 선택자 (.클래스명)	HTML class 속성의 값이 ABC인 요소 선택.
아이디 선택자 (#아이디명)	HTML id 속성의 값이 ABC인 요소 선택.

/* 기본 선택자 */
(*) : 전체선택자(모든 요소를 선택)
* {
	color: red;
}

/* 태그 선택자 */
div {
	color: red;
}
(index.html)
<div>오렌지</div>
<div>오렌지</div>
<div>오렌지</div>

/* 클래스 선택자 */
.orange {
	color: red;
}

(index.html)
<div class="orange">오렌지</div>
<div class="orange">오렌지</div>
<div>오렌지</div>

/* 전체 선택자 */
#orange {
	color: orange;
}

(index.html)
<div class="orange">오렌지</div>
<div id="orange">오렌지</div>
<div>오렌지</div>

 

 

복합 선택자
일치 선택자	선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
자식 선택자	선택자 ABC의 자식 요소 XYZ선택
하위(후손) 선택자	선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호
인접 형제 선택자	선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
일반 형제 선택자	선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

 

(index.html)
<div>
    <ul>
        <li><span>오렌지</span></li>
        <li>오렌지</li>
    </ul>
</div>

<span class="orange">오렌지</span> 


(main.css)
/* 일치 선택자 */
span.orange { //span태그 중에서 class orange
	color: red;
}

/* 자식 선택자 */
ul > .orange { //ul태그 자식 중 class orange
	color: red;
}

/* 하위(후손) 선택자 */
div .orange { //div태그 안에 있는 class orange 
	color: red;
}

/* 인접 형제 선택자 */
.orange + li { //orange 클래스의 다음에 있는 li 하나
	color: red;
}

/* 일반 형제 선택자 */
.orange ~ li { //orange 클래스의 다음에 있는 li 모두
	color: red;
}

 

가상 클래스 선택자
hover	선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택
active	선택자 ABC요소에 마우스 커서가 클릭하는 동안 선택
focus	선택자 ABC 요소가 포커스되면 선택
first-child	선택자 ABC가 형제 요소 중 첫째 선택
last-child	선택자 ABC가 형제 요소 중 막내 선택
nth-child(number)	선택자 ABC가 형제 요소 중 (number)째 선택
not	부정 선택자. 선택자 XYZ가 아닌 ABC요소 선택

(index.html)
<div>
    <ul>
        <li><span>오렌지</span></li>
        <li>오렌지</li>
        <li>딸기</li>
    </ul>
</div>

<span class="orange">오렌지</span> 


//focus : 실제로 포커스가 가능한 요소에만 가능(input, select, textarea)하지만,
//tabindex="-1" 속성을 추가할경우 focus를 적용할 수 있다.

<input type="text" />
<div class="box" tabindex="-1"></div> 


(main.css)
/* hover */
span:hover{ //span태그에 마우스를 올려두는 동안
	color: red;
}

/* active */
.orange:active { //class명이 orange에 마우스로 클릭하는 동안
	color:red;
}

/* focus */  
input:focus { //input 태그에 포커스가 되어있는 동안
	background-color: red;
}

/* first-child */
ul li:first-child { //li의 첫째 선택
	color: red;
}

/* last-child */
ul li:last-child { //li의 막내 선택
	color: red;
}

/* nth-child */
ul li:nth-child(2) { //li의 2번째 선택
	color: red;
}

:nth-child(2n) // 2 x n 번째 = 짝수
:nth-child(2n + 1) // 2 x n + 1 = 홀수
:nth-child(n+2) // n은 2부터 시작


/* not */
div *:not(span) { //div하위에 있는 span을 제외
	color: red;
}

 

 

---