프론트-03 CSS3 기초

aggapang·2025년 3월 9일

kb IT's Your Life

목록 보기

4/20

Cascading Style Sheet

html 문서의 스타일을 정의하는 시트언어

외부 스타일 시트
- 별도의 CSS 파일을 생성하여 HTML 문서와 연결
- 유지보수 쉬움
내부 스타일 시트
- html 문서의 head 태그 내에 style 태그를 사용하여 css 정의
인라인 스타일
- html 요소의 속성을 이용해 직접 스타일을 적용

선택자 { 스타일 속성 : 스타일 값 }

선택자의 우선순위

!important 가장 높은 우선순위 (강제화라서 자주 사용 X ) color: red !important;

인라인 스타일

아이디 선택자 #

클래스 선택자 .

태그 선택자

전체 선택자 *
→ 동일한 우선순위일 경우에는 나중에 선언된 스타일이 적용된다.

선택자 종류

종류	형태
전체 선택자	*
태그 선택자	태그 ex) h1
id 선택자	#아이디이름
class 선택자	.클래스이름
속성 선택자	선택자 `[속성 등식 값]`
후손 선택자	선택자 선택자
직계자손 선택자	선택자 > 선택자
반응 선택자	`선택자 : action` or `: hover`
상태 선택자	`선택자:checked` etc…
구조 선택자	`선택자:nth-of-type()` etc…

전체 선택자

모든 요소를 선택하여 적용
유지보수 어려움

id 선택자

html 요소의 id 속성을 선택
# 기호를 사용하여 선택

class 선택자

html 요소의 class 속성을 선택
여러 요소에 동일한 스타일을 적용할 때 사용
하나의 요소에 여러 클래스를 한번에 적용 가능 (클래스 이름 사이에 공백으로 구분하여 지정)
- class=”a b”

특정 html 요소의 클래스에 CSS적용이 가능하다

[태그명].[클래스명]

<style>
    li.apple {
      color: red;
    }
</style>

<body>
    <li class="apple">사과</li>
</body>

id와 class를 함께 사용할 수 있음 ul#sample.test

속성 선택자

선택자[속성 등식 값]

특정 속성을 가진 html 요소에 css 적용하는 방식

선택자	설명
`선택자[속성 = 값]`	정확히 일치하는 요소 선택	`input[type = "text"]`
`선택자[속성 ~= 값]`	속성이 공백으로 구분된 값들 중 하나와 일치하는 요소 선택	`div[data-role ~= row]`
`선택자[속성 != 값]`	속성이 특정 값과 일치하지 않는 요소 선택	`div[data-role != row]`
`선택자[속성 ^= 값]`	속성이 특정 값으로 시작하는 요소 선택	`div[data-role ^= row]`
`선택자[속성 $= 값]`	속성이 특정 값으로 끝나는 요소 선택	`div[data-role $= 9]`
`선택자[속성 *= 값]`	속성이 특정 값을 포함하는 요소 선택	`div[data-role *= row]`

후손 선택자 : 띄어쓰기

특정 요소의 모든 후손 요소에 스타일을 적용하는 방식
a b : a인 요소의 후손 요소들 중 b요소에 스타일을 적용

직계 자손 선택자 : `>`

특정 요소의 자식(직계자손)에 스타일을 적용하는 방식
a > b : a인 요소의 직계자손 요소 중 b요소에 스타일을 적용
문제점 : table은 크롬에서 자동으로 tbody가 wrap한다
- table > tbody > tr > th : 코드에 tbody가 없어도 적어줘야함 그래서 사용x

태그 관계

부모 자손 관계 >

<div>
   <p>div의 자손(직계)</p>
 </div>

조상 후손 관계

<div>
  <section>
    <p>section의 자식 & div의 후손인 p 태그</p>
  </section>
</div>

형제 관계 : 같은 부모를 가진 요소들

<div>
  <h1>1번 형제</h1>
  <p>2번 형제</p>
  <div>3번 형제</div>
</div>

반응(event) 선택자

사용자의 반응으로 생성되는 특정한 상태
:hover : 마우스 커서를 올린 태그
:active : 마우스로 클릭한 태그

상태 생성자

선택자	설명
`선택자:checked`	체크된 요소 선택
`선택자:focus`	포커스된 요소 선택
`선택자:enabled`	활성화된 요소 선택
`선택자:disabled`	비활성화된 요소 선택

/*checkbox,radio가 선택된 상태*/
input:checked {
  background-color: orange;
}
/*입력 양식에 포커스 둔 상태*/
input:focus {
  background-color: orange;
}
/*입력할 수 있는 상태*/
input:enabled {
  background-color: lightgray;
}
/*입력할 수 없는 상태*/
input:disabled {
  background-color: gray;
}

구조 선택자

선택자	설명
`선택자:first-child`	첫 번째 자식 태그 선택
`선택자:last-child`	마지막 자식 태그 선택
`선택자:nth-child(수열)`	앞에서 수열 번째 태그 선택
`선택자:nth-last-child(수열)`	뒤에서 수열 번째 태그 선택
`선택자:first-of-type`	같은 type 중 첫 번째 태그 선택
`선택자:last-of-type`	같은 type 중 마지막 태그 선택
`선택자:nth-of-type(수열)`	같은 type 중 수열 번째 태그 선택
`선택자:nth-last-of-type(수열)`	같은 type 중 뒤에서 수열 번째 태그 선택

.sample div:nth-of-type(3) {
  /* div 중 3번째에 */
  background-color: aqua;
}
.sample div:nth-of-type(2n or even) {
  /* div 중 짝수들 / 홀수는  odd*/ 
  background-color: rgb(47, 255, 0);
}

:first-child를 사용할 때 선택자 유의 -> first-of-type 사용하는게 좋음

/* 자식 순서가 p -> div 일때 */

/*첫번째 자식이 p이고 div가 아니라서 적용이 안됨*/
.sample div:first-child {
  border: 2px solid rgb(43, 119, 59);
}
 /*첫번째 자식이 p라 of type을 더 많이 사용하는게 정확함*/
.sample div:first-of-type {
  border: 2px solid rgb(251, 0, 255);
}

크기 단위

기본	16px=1rem
%	부모에서 상속되는 넓이의 상대 단위
em	(배수 단위) 부모 요소가 가지고 있는 폰트 사이즈의 배수 → 화면 크기 변할 때 유용
rem	루트에서 선택된 폰트의 배수 (root)
px	(절대 단위)

같은 의미 : 1rem = 1em = 16px = 100% (root가 16px라면)

색상 단위

url

aggapang

이전 포스트

프론트-02 html 태그 (기본, 입력 양식, 구조화)

다음 포스트

프론트-03 CSS3 기초

kb IT's Your Life

Cascading Style Sheet

선택자 { 스타일 속성 : 스타일 값 }

선택자의 우선순위

선택자 종류

전체 선택자

id 선택자

class 선택자

속성 선택자

후손 선택자 : 띄어쓰기

직계 자손 선택자 : `>`

태그 관계

반응(event) 선택자

상태 생성자

구조 선택자

크기 단위

색상 단위

url

프론트-02 html 태그 (기본, 입력 양식, 구조화)

프론트-04 CSS 속성

0개의 댓글

프론트-03 CSS3 기초

kb IT's Your Life

Cascading Style Sheet

선택자 { 스타일 속성 : 스타일 값 }

선택자의 우선순위

선택자 종류

전체 선택자

id 선택자

class 선택자

속성 선택자

후손 선택자 : 띄어쓰기

직계 자손 선택자 : >

태그 관계

반응(event) 선택자

상태 생성자

구조 선택자

크기 단위

색상 단위

url

프론트-02 html 태그 (기본, 입력 양식, 구조화)

프론트-04 CSS 속성

0개의 댓글

직계 자손 선택자 : `>`