CSS; Cascade Style Sheet

디자인을 부여하기 위한 언어

적용 방법

Externel Style Sheet(권장)
- HTML 문서와 별도로 작성하고 불러와서 사용한다.
- 다음의 두 방법이 있다.
  - Linked Style
  - Import Style
Internal —
- HTML 문서 내에서 어떤 영역에 작성한다.
- React에서는 이 방법을 많이 쓴다. (직접 작성하는 것보다는 그냥 가져다가 쓰는 경우가 많아서)
- 따로 파일 만들기가 귀찮아서 External보다는 Internal을 많이 쓰긴 함
Inline —
- HTML 태그에 설정한다.
- 가장 나쁜 방법

JS 쓰는 것도 위와 같은 세 가지이며, 가장 권장되는 방법 역시 external이다. 근데 수업 때는 왔다갔다해야 되니까 Internal로 함.

작성 방법

선택자

SELECTOR {
	ATTR1:VALUE1;
	ATTR2:VALUE2;
	...

선택자

*

모든 항목
<TAG>
.CLASS_NAME

. 찍어야 됨
#ID

지정된 id를 갖는 부분에 적용된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 적용</title>
    <link rel="stylesheet" href="./style.css"/>
    <style>
        .temp{
            color: blue;
        }
    </style>
</head>
<body>
    <p id="tmp">External</p>
    <p class="temp">Internal</p>
    <p style="color:blueviolet; font-size:14pt"";>Inline</p>
</body>
</html>

#tmp{
    color: red;
}

Untitled