[2주차] 2022.04.19 - CSS 개요 및 선택자

CSS 사용하기

선택자 {속성:값;} 와 같이 사용한다.

선택자: 스타일(CSS)을 적용할 대상 (selector)
속성: 스타일(CSS)의 종류 (property)
값: 스타일(CSS)의 값 (value)

div {
  color: red;
  margin: 20px;
}

CSS 선언 방식

1. 내장 방식

<style></style>의 내용으로 스타일을 작성하는 방식
css파일을 만들지 않아도 html파일 안에서 스타일 지정할 수 있음
하지만 유지보수 측면에서 프로젝트를 할 때는 되도록 사용하지 말자!

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

2. 링크 방식

요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)
우선순위가 높기 때문에 이 방식도 유지보수 측면에서 적절하지 않음
병렬방식
- 링크 방식으로 연결된 모든 CSS는 순서대로가 아닌 한 번에 가지고 와서 해석하기 때문에 빨리 해석되는대로 연결이 된다.

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

3. 인라인 방식

<link />로 외부 CSS 문서를 가져와서 연결하는 방식

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

4. @import 방식

CSS @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
직렬방식
- 고의로 해당하는 css가 늦게 연결되기를 바라는 상황에 유용하게 쓰임
- main.css가 html에 연결이 돼서 해석이 끝나야지만 @import로 가져온 box.css가 html에 연결될 수 있음

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

div {
  color: red;
  margin: 20px;
}

CSS 선택자

1. 기본 선택자

1) 전체 선택자

모든 요소를 선택

* {
  color: red;
}

2) 태그 선택자

태그 이름으로 요소 선택

li {
  color: red;
}

3) 클래스 선택자

HTML class 속성의 값으로 요소 선택
class 속성의 값 앞에 .을 붙여 표현

.orange {
  color: red;
}

4) 아이디 선택자

HTML id 속성의 값으로 요소 선택
id 속성의 값 앞에 #을 붙여 표현

#orange {
  color: red;
}

2. 복합 선택자

1) 일치 선택자

선택자 여러개를 동시에 만족하는 요소를 선택
↓ span 태그 중에 orange라는 class 속성의 값을 가진 요소 선택

span.orange {
  color: red;
}

2) 자식 선택자

선택자의 자식 요소를 선택
선택자 뒤에 >을 붙여 자식 요소를 선택
↓ ul 태그의 자식 요소 중 class 속성의 값이 orange인 요소

ul > .orange {
  color: red;
}

3) 하위 선택자

선택자의 하위 요소를 선택
띄어쓰기가 선택자의 기호
↓ div 태그의 하위 요소 중 class 속성의 값이 orange인 요소

div .orange {
  color: red;
}

3) 인접 형제 선택자

선택자의 다음 형제 요소 하나를 선택
선택자 뒤에 +을 붙여 형제 요소를 선택
↓ class 속성의 값이 orange인 요소의 다음 형제 요소 li 하나 선택

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>망고</li>
  <li>사과</li>
</ul>

.orange + li {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 오렌지 바로 뒤에 있는 망고를 선택한다!

4) 일반 형제 선택자

선택자의 다음 형제 요소 모두를 선택
선택자 뒤에 ~을 붙여 형제 요소를 선택
↓ class 속성의 값이 orange인 요소의 다음 형제 요소 li 모두 선택

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>망고</li>
  <li>사과</li>
</ul>

.orange ~ li {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 오렌지 뒤에 있는 망고, 사과를 선택한다!

3. 가상 클래스 선택자

.box:hover와 같이 선택자 바로 뒤에 :가상클래스를 붙여 사용한다
어떠한 행동을 했을 때 동작하는 개념

1) hover

선택자 요소에 마우스 커서가 올라가 있는 동안 선택
선택자 뒤에 :hover을 붙여 사용

a:hover {
  color: red;
}

2) active

선택자 요소에 마우스를 클릭하고 있는 동안 선택
선택자 뒤에 :active을 붙여 사용

a:active {
  color: red;
}

3) focus

선택자 요소가 포커스 되면 선택
선택자 뒤에 :focus을 붙여 사용
HTML 대화형 콘텐츠에 사용 가능
- input, a, button, label, select 등

input:focus {
  background-color: orange;
}

4) first child

선택자 요소가 형제 요소 중 첫째라면 선택
선택자 뒤에 :first-child을 붙여 사용

<div class="fruits">
  <span>딸기</span>
  <span>오렌지</span>
  <div>망고</div>
  <h3>사과</h3>
</div>

.fruits span:first-child {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 딸기를 선택한다!

5) last child

선택자 요소가 형제 요소 중 막내라면 선택
선택자 뒤에 :last-child을 붙여 사용

<div class="fruits">
  <span>딸기</span>
  <span>오렌지</span>
  <div>망고</div>
  <h3>사과</h3>
</div>

.fruits h3:last-child {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 오렌지를 선택한다!

주의할 점은 fruits 클래스 내의 h3중 막내를 찾는 것이 아니라 fruits 클래스 하위 요소 중 막내인데 h3이면 선택되는 것이다!
만약에 .fruits span:last-child을 하면 fruits 클래스 하위 요소 중 막내 요소가 span이 아니므로 아무것도 선택되지 않는다.

6) nth child

선택자 요소가 형제 요소 중 (n)째라면 선택
선택자 뒤에 :nth-child(n)을 붙여 사용
- n은 1부터 시작
숫자와 함께 n키워드 사용 가능
- 이 상황에서 n은 0부터 시작

<div class="fruits">
  <span>딸기</span>
  <span>오렌지</span>
  <div>망고</div>
  <h3>사과</h3>
</div>

.fruits *:nth-child(2) {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 오랜지를 선택한다!

.fruits *:nth-child(2n) {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 오렌지, 사과를 선택한다!

.fruits *:nth-child(2n+1) {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 딸기, 망고를 선택한다!

.fruits *:nth-child(n+2) {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 오렌지, 망고, 사과를 선택한다!

n은 0부터 시작하므로 n(0)+2=2 부터 끝까지

7) not

선택자 요소가 아닌 요소 선택
선택자 뒤에 :not을 붙여 사용

<div class="fruits">
  <span>딸기</span>
  <span>오렌지</span>
  <div>망고</div>
  <h3>사과</h3>
</div>

.fruits *:not(span) {
  color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 망고, 사과를 선택한다!

3. 가상 요소 선택자

.box::before와 같이 선택자 바로 뒤에 ::가상요소선택자를 붙여 사용한다
가상의 요소를 만들어서 삽입
content 속성을 무조건 사용
- 요소를 삽입해야 되는 선택자이기 때문에 요소의 내용이 무엇인지 명시해야 하기 때문
인라인 요소
- width, height 주고 싶다면 블록 요소로 전환해야함

1) before

선택자 요소의 내부 앞에 내용을 삽입
선택자 뒤에 ::before을 붙여 사용

<div class="box">
  Content!
</div>

.box::before {
  content: "앞!";
}

[출력 화면]
앞! Content!

2) after

선택자 요소의 내부 뒤에 내용을 삽입
선택자 뒤에 ::before을 붙여 사용

<div class="box">
  Content!
</div>

.box::after {
  content: "뒤!";
}

[출력 화면]
Content! 뒤!

4. 속성 선택자

1) attr

주어진 속성을 포함한 요소 선택
속성 값 앞 뒤에 [ ]을 붙여 사용

<input type="text" value="SEUNG" />
<input type="password" value="1234" />
<input type="text" value="ABCD" disabled />

[disabled] {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 속성이 disabled인 input (value=ABCD)을 선택한다!

[type] {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 type 속성이 있는 모든 input을 선택한다!

2) attr = value

주어진 속성을 포함하고 특정 값인 요소 선택
속성 값 앞 뒤에 [ ]을 붙이고 [속성="속성값"]처럼 사용

<input type="text" value="SEUNG" />
<input type="password" value="1234" />
<input type="text" value="ABCD" disabled />

[type="password"] {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 type 속성이 password인 input (value=1234)을 선택한다!

스타일 상속

해당 클래스를 가지고 있는 요소뿐만 아니라 하위 요소들까지 모두 스타일이 상속되어 적용
상속되는 CSS 속성들
- 모두 글자/문자 관련 속성들 (❗️모든 글자/문자 속성은 아님)
- font-style, font-weight, font-size, line-height, font-family, color, text-align 등

<div class="ecosystem">생태계
  <div class="animal">동물
    <div class="tiger">호랑이</div>
    <div class="lion">사자</div>
    <div class="elephant">코끼리</div>
  </div>
  <div class="plant">식물</div>
</div>

.animal {
  color: red;
}

✨ 위와 같이 코드가 작성되어 있으면 동물, 호랑이, 사자, 코끼리의 스타일이 적용된다!

강제 상속

속성의 값에 직접 값을 적어주지 않고 inherit이라는 키워드를 사용하여 부모의 속성값을 상속받는다.

<div class="parent">
  <div class="child"></div>
</div>

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

.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

✨ 위와 같이 코드가 작성되어 있으면 child의 height은 부모의 속성값을 상속받아 200px이 된다!

부모 요소의 속성 값을 바꾸면 하위 요소의 값을 일일이 하나씩 바꿀 필요없이 알아서 부모 요소의 속성 값을 상속하면서 바뀌므로 유용하다.

선택자 우선순위

우선순위란?

같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

점수가 높은 선언이 우선함
점수가 같으면, 가장 마지막에 해석된 선언이 우선함

❗️ 다음과 같은 코드가 있다면 글자색은 무엇일까?

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

div { color: red !important; }
#color_yellow { color: yellow; }
.color_grenn { color: green; }
div { color: blue; }
* { color: darkblue; }
body { color: violet; }

✨ 결과는 빨간색 글씨로 표시된다!

우선순위 점수

!import: 9999999999점
인라인 선언: 1000점
id 선택자: 100점
class 선택자: 10점
- 가상 class 선택자: 10점
태그 선택자: 1점
- 가상 요소 선택자: 1점
전체 선택자: 0점

💡 예시)

.list li.item { }  /* 21점 */
.list li:hover { } /* 21점 */
.box::before { }   /* 11점 */
#submit span { }   /* 101점 */
header .menu li:nth-child(2) { } /* 22점 */
:not(.box) { } /* 10점 */

!import 를 되도록이면 사용하지 않는 것을 권장

Author And Source

이 문제에 관하여([2주차] 2022.04.19 - CSS 개요 및 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sseung95/2주차-2022.04.19-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)