CSS 개요

CSS 기본 문법

html의 요소에 스타일을 적용할 수 있다.

span { /* span 요소 내용에 */
  font-size: 50px;  /* 글자 크기 */
  color: blue;  /* 글자 색상 */
  text-decoration: underline;  /* 글자에 밑줄 */
}

기본 문법: 선택자 {속성: 값;}

• 선택자: 스타일(css)를 적용할 대상
• 속성 예제
  • color: red; - 요소 내용의 색상
  • margin: 20px; - 요소 외부 여백

주석
/* 주석내용 */

CSS 선언 방식

1. 내장 방식
2. 인라인 방식
3. 링크 방식
4. @import 방식
   
   

1. 내장 방식

html head에 style 요소내용으로 css 작성
css코드가 길고 복잡해진다면 관리 어려움

<style>
  div {
    color: red;
    margin: 20px;
  }
</style>

2. 인라인 방식

요소에 style 속성을 추가하여 css 작성
다른 css보다 우선하여 적용되므로 유지보수 어려움

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

3. 링크 방식

html head에 link 태그를 통해 외부의 css파일을 연결하여 적용
병렬로 연결되는 방식으로 먼저 해석이 끝나는 css가 먼저 적용된다.

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

4. @import 방식

링크 방식으로 html과 연결된 css파일에서 다른 css파일을 import하여 css 적용
직렬로 연결되는 방식으로 다른 css파일을 import하는 상위 css파일의 해석과 적용이 완료되어야 import되어지는 css가 해석, 적용된다.
이는 의도적으로 특정 css의 적용을 늦추는데 이용될 수 있다.

@import url("./sub.css") /*box.css 파일의 css코드를 불러와 적용한다.*/

div {
  color: blue;
  padding: 15px;
}

CSS 선택자

키워드: 기본, 복합, 가상 클래스, 가상 요소, 속성

기본 선택자

1. 전체 선택자, Universal Selector: 모든 태그/요소를 선택

형식: *

* {
  color: orange;
}

2. 태그 선택자, Type Selector: 태그로 식별

형식: 태그

div {
}

span {
  font-size: 50px;
}

3. 클래스 선택자, Class Selector: HTML 태그에 부여된 class속성값으로 식별

형식: dot(.) + class_value

<!-- html 코드 -->
<div class="class_0"></div>

/* css 코드 */
.class_0 {
  margin: 15px;
}

4. 아이디 선택자, ID Selector: HTML 태그에 부여된 id속성값으로 식별

형식: # + id_value

/* css 코드 */
#id_0 {
  margin: 15px;
}

<!-- html 코드 -->
<div id="id_0"></div>

복합 선택자

일반 선택자를 조합한 선택자

1. 일치 선택자, Basic Combinator / ABCXYZ - ABC, XYZ를 모두 만족하는 요소를 식별

형식: 선택자선택자
ex) ABC와 XYZ를 모두 만족하는 요소 ➡ ABCXYZ

태그 선택자는 별도의 기호가 없어므로 클래스 선택자, 아이디 선택자와 함께 일치 선택자를 구성할때 앞에 위치해야한다.

• ex) 태그 선택자 + id 선택자
  • span#id_0: span 요소 중 id속성값이 id_0인 요소 식별
  • #id_0span: id속성값이 id_0span인 요소 식별 -> 일반 식별자 중 id 식별자로 처리됨.

span#id_0 {  /* span 요소 중에 id값이 id_0인 요소 */
    ...
}

span.class_0 {  /* span 요소 중에 class값이 class_0인 요소 */
    ...
}

2. 자식 선택자, Child Combinator / ABC>XYZ: ABC 요소의 "자식" 요소 중 XYZ 요소 식별

형식: 선택자 > 선택자
ex) ABC를 만족하는 요소의 자식 요소 중 XYZ를 만족하는 요소 ➡ ABC > XYZ

/* css 코드 */
div > .class_0 { /* div의 자식 요소 중 class속성값이 class_0인 요소 */
  ...
}

<!-- html 코드 -->
<div>
  <span class="class_0"> ... </span> <!-- 선택자를 만족 -->
</div>
<span class="class_0"> ... </span> <!-- div의 자식 요소가 아니므로 만족하지 않음 -->

*여러 선택자가 조합되었다면 뒤에서부터 해석하면 쉽다.
ex) ABC > XYZ: XYZ 선택자를 만족하는 요소 중 부모요소가 ABC 선택자를 만족하는 요소

3. 하위(후손) 선택자, Descendant Combinator / ABC XYZ - ABC 요소의 "하위" 요소 중 XYZ 요소 식별

형식: 선택자 선택자
ex) ABC를 만족하는 요소의 하위 요소 중 XYZ를 만족하는 요소 ➡ ABC XYZ

/* css 코드 */
div .class_0 { /* div의 하위 요소 중 class속성값이 class_0인 요소 */
  ...
}

<!-- html 코드 -->
<div>
  <span>
    <span class="class_0"> ... </span> <!-- 선택자를 만족 -->
  </span>
  <span class="class_0"> ... </span> <!-- 선택자를 만족 -->
</div>
<span class="class_0"> ... </span> <!-- div의 하위 요소가 아니므로 만족하지 않음 -->

4. 인접 형제 선택자, Adjacent Sibling Combinator / ABC+XYZ - ABC 요소의 "인접한" "다음 형제 요소"가 XYZ 요소라면 선택

형제 요소: 같은 부모 요소의 자식 요소들
이전/다음 형제 요소: 기준이 되는 요소보다 먼저/나중에 선언된 형제 요소

형식: 선택자 + 선택자
ex) ABC를 만족하는 요소의 바로 다음 형제 요소가 ZXY를 만족하면 선택 ➡ ABC + XYZ

/* css 코드 */
.class_0 + span { /* class속성값이 class_0인 요소의 다음 형제 요소 중 태그가 span인 요소 */
  color: red;
}

<!-- html 코드 - 1 -->
<div>
  <span>1</span>
  <span>2</span>
  <span class="class_0">3</span>
  <span>4</span> <!-- 선택자를 만족 -->
  <span>5</span>
</div>

결과:
1 2 3 4 5

<!-- html 코드 - 2 -->
<div>
  <span>1</span>
  <span>2</span>
  <span class="class_0">3</span>
  <div>ho!</div> <!-- span이 아님 -->
  <span>4</span>
  <span>5</span>
</div>
<!-- 아무것도 선택되지 않음 -->

결과: class속성값이 class_0인 요소의 다음 형제 요소가 div 요소이므로 두번째 선택자를 만족하지 않음.

5. 일반 형제 선택자, General Sibling Combinator / ABC~XYZ - ABC 요소의 모든 다음 형제 요소 중 XYZ 요소 식별

형식: 선택자 ~ 선택자
ex) ABC를 만족하는 요소의 다음 형제 요소들 중 ZXY를 만족하는 모든 요소 ➡ ABC ~ XYZ

/* css 코드 */
.class_0 ~ span { /* class속성값이 class_0인 요소의 다음 형제 요소 중 태그가 span인 요소 */
  color: red;
}

<!-- html 코드 -->
<div>
  <span>1</span>
  <span>2</span>
  <span class="class_0">3</span>
  <div>ho!</div>
  <span>4</span> <!-- 선택자를 만족 -->
  <span>5</span> <!-- 선택자를 만족 -->
</div>

결과: 인접 형제 선택자와는 다르게 모든 다음 형제 요소들에 대해서 두번째 연산자를 시험한다.

가상 클래스 선택자, Pseudo-Classes

🔹유저의 행동을 식별하는 가상 클래스 선택자

유저의 행동에 따라 요소가 어떤 동작을 할지 정의할 수 있다.

1. ABC:hover - ABC 요소에 마우스 커서가 올라가 있는 상태

형식: 식별자:hover
ex) ABC를 만족하는 요소에 유저가 마우스 커서를 올려놓을 때 ➡ ABC:hover

<!-- html 코드 -->
<span>hahahoho</span>

/* css 코드 */
span:hover {
  color: orange;
}

결과: hahahoho 문자열에 마우스 커서를 올리면 오렌지색으로 변한다.

다른 예제: 배경 색상이 들어간 div 요소에 div:hover를 정의하여 가로, 세로, 색상을 정의하면 마우스 커서를 div 요소에 올렸을 때 div 요소의 크기, 색상이 변화한다.

* transition: 가상 클래스 선택자에 의한 요소의 변화가 완료되는 시간을 지정

가상 클래스 선택자가 아닌 각 요소의 스타일에 transition: {시간}s; 속성과 값을 추가하면 가상 클래스 선택자에 의한 요소의 변화가 지정한 시간동안 천천히 진행된다.

/* css 코드 */
div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 5s;
}
div:hover {
  width: 300px;
}

2. ABC:active - ABC 요소를 마우스 클릭하고 있는 상태

형식: 식별자:active

3. ABC:focus - ABC 요소가 포커스된 상태

포커스 될 수 있는 요소: input 등 유저로부터 데이터를 입력받는 요소들

형식: 식별자:focus

<!-- html 코드 -->
<input type="text" placeholder="orange" />

/* css 코드 */
input:focus {
  background-color: orange;
}

결과: 입력창을 클릭하여 입력상태가 되면 입력창의 색상이 오렌지색으로 바뀐다.

div 등의 요소는 포커스가 작동하지 않지만(div:focus를 정의해도 div 요소를 클릭하면 반응이 없다.) 요소 속성 tabindex에 -1 값을 부여하면 focus가 동작한다. 페이지당 focus되는 요소는 하나뿐이므로 다른 요소가 focus된다면 focus 상태였던 요소는 원래대로 돌아간다. tabindex는 탭키를 이용해 focus 할 수 있는 순서를 지정하는 속성. -1이 아닌 값은 논리적 흐름을 방해하므로 권장하지 않음.

<!-- html 코드 -->
<div tabindex="-1"></div>

🔹요소를 식별하는 가상 클래스 선택자

1. ABC:first-child - ABC 요소가 형제 요소들 중 첫번째라면 선택

형식: 식별자:first-child
ex) ABC를 만족하는 요소가 형제 요소들 중 첫번째 요소 ➡ ABC:first-child

/* css 코드 */
div span:first-child {
  color: blue;
}

• 뒤에서부터 읽으면
  • span:first-child - 형제 요소 중 첫번째 요소가 span 요소이다.
  • div span:first-child - 형제 요소 중 첫번째 요소가 span 요소이며 div의 하위 요소이다.

<!-- html 코드 - 1 -->
<div>
  <span>ho</span> <!-- 선택자를 만족 -->
  <h1>first</h1>
  <h2>second</h2>
  <span>ha</span>
  <h3>third</h3>
</div>

<!-- html 코드 - 2 -->
<div>
  <h1>first</h1> <!-- 형제 중 첫번째지만 span이 아님 -->
  <h2>second</h2>
  <span>ho</span> <!-- 선택자를 만족하지 않음: 형제 중 첫번째가 아니므로 -->
  <span>ha</span>
  <h3>third</h3>
</div>
<!-- 식별되는 요소 없음 -->

2. ABC:last-child - ABC 요소가 형제 요소들 중 마지막이라면 선택

형식: 식별자:last-child
ex) ABC를 만족하는 요소가 형제 요소들 중 마지막 요소 ➡ ABC:last-child

/* css 코드 */
div span:last-child {
  color: blue;
}

• 뒤에서부터 읽으면
  • span:last-child - 형제 요소 중 가장 마지막 요소가 span 요소이다.
  • div span:last-child - 형제 요소 중 마지막 요소가 span 요소이며 div의 하위 요소이다.

3. ABC:nth-child(수식) - ABC 요소가 형제 요소들 중 {수식의 값}번째 요소라면 선택

형식:

• 식별자:nth-child(2) ➡ 두번째 / 괄호에 1보다 큰 자연수

/* css 코드 */
div span:nth-child(4) {
  color: blue;
}

<!-- html 코드 -->
<div>
  <span>ho</span>
  <h1>first</h1>
  <h2>second</h2>
  <span>ha</span> <!-- 선택자를 만족 -->
  <h3>third</h3>
</div>

• 식별자:nth-child(변수n의 수식) ➡ {수식의 값}번째 요소들 / n은 0부터 시작
  • 2n: 짝수번째 요소들
  • 2n + 1: 홀수번째 요소들
  • n + 3: 세번째 요소부터 모든 형제 요소들

/* css 코드 */
div *:nth-child(n+3) {
  color: blue;
  font-size: 50px;
}

<!-- html 코드 -->
<div>
  <span>ho</span>
  <h1>first</h1>
  <h2>second</h2> <!-- 선택자를 만족 -->
  <span>ha</span> <!-- 선택자를 만족 -->
  <h3>third</h3> <!-- 선택자를 만족 -->
</div>

4. 부정 선택자, negation / ABC:not(XYZ) - ABC 요소 중 XYZ 요소가 아닌 요소 식별

형식: 식별자:not(식별자)
ex) ABC를 만족하는 요소 중 XYZ를 만족하지 않는 요소 ➡ ABC:not(XYZ)

/* css 코드 */
div *:not(span) { /* div의 모든 하위 요소 중 span이 아닌 요소 */
  color: blue;
  font-size: 50px;
}

<!-- html 코드 -->
<div>
  <span>ho</span>
  <h1>first</h1> <!-- 선택자를 만족 -->
  <h2>second</h2> <!-- 선택자를 만족 -->
  <span>ha</span>
  <h3>third</h3> <!-- 선택자를 만족 -->
</div>

가상 요소 선택자, Pseudo-Elements

1. ABC::before - ABC 요소의 요소 내용 앞에 내용을 삽입

ABC 요소의 내용 앞의 가상의 요소를 식별한다는 느낌
이 가상의 요소는 inline 요소
필수 속성값 content를 통해 값을 부여한다.

/* css 코드 */
span::before {
  content: "ho?"; /* span의 내용인 ho! 앞에 ho? 추가 */
}

div::before {
  content: "ha?"; /* div의 내용인 span 요소 앞에 ha? 추가 */
}

<!-- html 코드 -->
<div>
  <span>ho!</span>
</div>

결과: ha? ho?ho!
ha?와 ho? 사이의 띄어쓰기는 div 요소 내용간의 줄바꿈때문
html 코드를 줄바꿈 없이 한줄로 작성하면 공백이 없어진다.

2. ABC::after - ABC 요소의 요소 내용 뒤에 내용을 삽입

before의 코드 예제의 ::before를 ::after로 바꾼 결과:
ho!ho? ha?

예제

/* css 코드 */
div {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 25px;
}

.box::before {
  content: "";
  display: block;  /* inline 요소를 block 요소로 변환 */
  width: 30px;  /* 블럭 요소가 되어 width, height 속성이 적용됨 */
  height: 30px;
  background-color: red;
}

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

<!-- html 코드 -->
<div class="box">HO!!</div>

개발자 도구에서 요소 내용 전후로 ::before, ::after가 붙었음을 볼 수 있다.

속성 선택자, Attribute

html 요소의 속성을 통해 요소를 식별

1. [ABC], 속성 ABC를 갖고있는 요소를 식별
형식: [속성이름]
ex) 속성 ABC를 갖고있는 요소를 식별 ➡ [ABC]

2. [ABC="XYZ"], 속성 ABC의 값이 XYZ인 요소를 식별

형식: [속성이름="값"]

/* css */
[disabled] {
  color: red;
}
[value="2"] {
  background-color: royalblue;
}

<!-- html -->
<div>
  <input type="text" value="1" />
  <input type="text" value="2" />  <!-- value="2": 배경색 royalblue -->
  <input type="text" value="3" disabled />  <!-- disabled: 폰트 red -->
</div>

스타일 상속

부모(조상) 요소에 적용된 스타일이 자식(하위) 요소에까지 적용되는 것을 스타일 상속이라한다.

/* css */
.parent {
  color: green;
}

<!-- html -->
<div class="parent">
  <div class="child_0">ho</div>
  <div>ho</div>
  <div class="child_1">ho</div>
</div>

결과: 부모 요소의 스타일만 정의했음에도 자식 요소들까지 동일한 스타일이 적용되었다.

모든 속성이 상속되는 것은 아니다. 상속되는 속성 대부분은 문자와 관련된 속성이다.

강제 상속, inherit

자동으로 상속되지 않는 속성을 강제로 상속이 되도록 한다.
부모 요소와 같은 속성값을 가져야하는 상황에서 부모 요소의 속성값이 변경되었을때 자식 요소의 속성값을 사람이 직접 변경하는 경우 실수를 할 수 있다.
이런 경우 강제 상속을 설정하여 자식 요소의 속성값이 부모 요소의 속성값을 상속하도록 강제한다.

형식:
css속성: inherit;

/* css */
.parent {
  width: 300px;
  height: 200px;
  background-color: orange;
}
.child {
  width: 100px;
  height: inherit;  /* height 속성값은 부모 요소의 height과 같은 값으로 설정 */
  background-color: rebeccapurple;
}

<!-- html -->
<div class="parent">
  <div class="child"></div>
</div>

결과: 부모 요소의 height 속성값을 어떤 값으로 바꾸던 자식 요소의 height도 같은 값을 갖는다.

선택자 우선 순위

한 요소에 적용될 수 있는 여러 스타일이 선언되었때 어떤 속성들이 우선 적용될지를 결정하는 규칙

• 점수가 높은 속성이 우선 적용
• 점수가 같은 경우 가장 마지막에 해석된 속성이 우선 적용

스타일 선언별 점수 계산 - 명시도

선언	점수
인라인 선언	1000
ID선택자	100
class선택자	10
태그선택자	1
전체선택자	0
!important 키워드	∞
상속	x(명시적인 선언 아님)

<!-- html -->
<div
  id="color_yellow"
  class="color_green"
  style="color: orange;">
  Hello world!
</div>

/* css */
div {color: red !important;}  /* !important: ∞ */
#color_yellow {color: yellow;}  /* id: 100 */
.color_green {color: green;}  /* 클래스: 10 */
div {color: blue;}  /* 태그: 1 */
* {color: darkblue;}  /* *: 0 */
body {color: violet;}  /* 상속: 점수 없음 */

결과: !important 키워드가 붙은 div css의 red가 적용된다.

예제

• .list li.item ➡ 클래스 + 태그 + 클래스 = 21점
• .list li:hover ➡ 클래스 + 태그 + (가상)클래스 = 21점
• .box::before ➡ 클래스 + {(가상)요소 = 태그} = 11점
• #submit span ➡ id + 태그 = 101점
• header .menu li:nth-child(2) ➡ 태그 + 클래스 + 태그 + (가상)클래스 = 22점
• h1 ➡ 태그 = 1점
• :not(.box) ➡ not은 단순히 논리적 반전을 의미하므로 .box 점수만 유효하다고 봐야함 = 10점

인라인 선언과 !important 키워드는 우선순위 점수가 매우 높아 필요에 따라 덮어씌우기가 곤란하므로 사용을 지양한다.