1. 기본문법,주석

:는 ~은 이라는 뜻이다.
;은 ~이다 라는 뜻이다.
그래서 속성은 값이다. 라고 해석이 된다.
작성할때는

div {
  font-size: 100px;
  color: red; 
}

라는 방식으로 작성해야한다.

개발자들만 알도록 설명 작성할때는
ctrl+/를 누른이후에 작성하거나

/* 설명작성 */

주석시작과 끝에 다음과 같이해서 작성을 해야한다.

2. 선언방식

2-1. 내장방식

<style></style> 의 내용으로 스타일을 작성하는 방식

즉 다음과 같이 작성한다. 
<style>
div {
  font-size: 100px;
  color: red; 
}
</style>

2-2. 링크방식 : 병렬로 연결

요소의 style 속성에 직접 스타일을 작성하는 방식

<div style="colr: red; margin:20px"><div>

에서

<link rel="stylesheet" href="./css/main.css">

로 다른 main css 연결가능하다.

2-3. 인라인방식

로 외부 css 문서를 가져와서 연결하는 방식.

여기에서 위 사진에서 css 와 연결한 이후에 그 css에서 또 연결 가능하다.

2-4. @import 방식이 있다. : 직렬로연결

css의 @import 규칙으로 css 문서 안에서 또다른 css 무너를 가져와 연결하는 방식이 있다.

여기에서

@import url("./box.css");

을 통해 밑에 있는 css 연결 가능하다.

3. 선택자_기본

3-1. 전체선택자

*
모든 요소를 선택

3-2. 태그선택자

ABC
태그 이름이 ABC 인것을 선택

3-3. 클래스선택자

.ABC
태그 이름이 Class 속성의 값이 ABC인 요소 선택

3-4. 아이디 선택자

#ABC
HTML id 속성의 값이 ABC인 요소 선택

4. 선택자_복합

4-1.ABCXYZ

선택자 ABC와XYZ를 동시에 만족하는 요소 선택

4-2.ABC > XYZ

선택자 ABC의 자식 요소 XYZ 를 선택

4-3. ABC XYZ

선택자 ABC 의 하위 요소 XYZ 선택
'뛰어쓰기'가 선택자의 기호

4-4. ABC + XYZ

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

4-5. ABC ~ XYZ

선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

5. 선택자_가상 클래스 선택자

5-1. ABC: hover

선택자 abc 요소에 마우스 커서가 올라가 있는 동안 선택

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}
.box:hover {
  width: 300px;
  background-color: royalblue;
}

오렌지에서 올리면 파랑색으로 길어짐

5-2. ABC:active

선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}
.box:active {
  width: 300px;
  background-color: royalblue;
}

마우스 누르고있는 동안 파란색 됌

5-3. ABC:focus

tabindex:"-1"을 작성 하면
box 와 input focus 가 모두 가능하다. 그래서 삽입하는 부분과 박스 모두 포커스 될때 색이 변화 된다. tab index 는 input 에는 기입해서는 안된다.

5-4. ABC:first-child

선택자 ABC가 형제 요소중 첫째 라면 선택

5-5. ABC:last-child

선택자가 ABC 형제 요소중 마지막 이라면 선택

5-6. ABC: nth-child(n)

선택자 ABC가 형제 요소중 (n)째라면 선택

5-7. ABC: not(XYZ)

선택자가 xyz가 아닌 ABC 요소 선택

6. 선택자_가상 요소 선택자

6-1. BEFORE

선택자 ABC요소의 내부 앞에 내용을 삽입

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="box">HEROPY! </div>
</body>
</html>

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box::before {
  content: "before";
}

before 과 after 은 content 라고 작성해야함.

6-2. AFTER

선택자 ABC요소의 내부 뒤에 내용을 삽입

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box::after {
  content: "after";
}

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box::after {
  content: "";
  display: block;
  width:30px;
  height:30px;
  background-color: royalblue;
}

인라인요소는 가로세로 가질수없음
인라인에서 블록요소 변환하기 위해서 다음과 같이 작성한다.
display: block를 하게 되면
화면에 파란 내모가 생기게 된다.

7. 선택자_속성 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <input type="text" />
  <input type="password" />
  <span data-fruit-name="apple">사과</span>
</body>
</html>

[type="password"] {
  background-color: orange;
}
[data-fruit-name] {
  color: red;
}

8. 스타일 상속: inherit

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

div 부모 안에 div 자식 있음

.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 200px;
  background-color: orange;
}

다음과 같은 창이 등장한다.

.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

과 같이 하게 되면 inherit 이라고 입력 되며 상속이 가능하다

.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
  position: fixed;
  top:100px;
  right:10px;
}

하게되면 다음과 같이 표현된다.

inherit 이라는것은 parent의 크기가 그대로 상속이 되는 것이다.

9. 선택자 우선순위

우선순위란, 같은 요소가 여러 선언에 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법.
1. 점수가 높은 선언이 우선함!
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함

!important: 중요도 무한
#color_yelow = id 선택자 : 100점
.color_green = class선택자: 10점
div = 태그선택자: 1점
* = 전체선택자 : 0점
body = 상속 안됌 : 계산 안함

ex)

div {
  font-size: 70px;
}
#hello {
  color: blue;
}
.hello {
  color:red;
}

라고 하면 hello world! 가 파란색이다.

ex)

div {
  font-size: 70px;
}
.hello {
  color:blue;
}
.hello {
  color:red;
}

라고 하면 hello world!가 빨강으로 보인다.
점수가 같은것이면 나중에 작성한것의 색으로 표시가 된다.

div {
  font-size: 70px;
}
div.hello {
  color:green;
}
.hello {
  color: red;
}

라고 작성하게된다면 위는 11점 아래는 10점으로 초록색으로 색이 나타나게 됨

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div id="hello" class="hello" style="color: orange;">HELLO WORLD!</div>
</body>
</html>

라고 하게 div 안에 인라인으로 작성하면 style을 작성해서 1000점이 되게 된다 .

인라인 안에 쓰는것은 하지 않는것이 좋다. 수정이 어렵기 때문이다.
하지만 css에 !important html에 인라인으로 작성한 색이 있다고 하더라도 css의 important 색이 나오게 된다.
하지만 important를 되도록 사용하지 않는것이 좋다. 수정을 하려고 할때 수정이 불가능하고 다시 important를 써야함. 어쩔수없을때만 써야한다.
인라인과 important는 잘 사용하지 않는것이 필요하다.

div {
  font-size: 70px;
}
div.hello {
  color:green;
}
.hello {
  color: red !important;
}

앞서서 # 3. 선택자_기본 을 배웠다. 내용은다음과 같다.

3-1. 전체선택자 :0점
*
모든 요소를 선택

3-2. 태그선택자 : 1점
ABC
태그 이름이 ABC 인것을 선택

3-3. 클래스선택자 : 10점
.ABC
태그 이름이 Class 속성의 값이 ABC인 요소 선택

3-4. 아이디 선택자 : 100점
#ABC
HTML id 속성의 값이 ABC인 요소 선택

DDANG

LET'S GO

이전 포스트

HTML 개요

다음 포스트

CSS 개요