[HTML/CSS] 개요, 선택자(selector)

자두·2021년 9월 29일
1

HTML-CSS

목록 보기
6/14
post-thumbnail

1. HTML CH9-10

CH1. 개요

1) CSS 소개

  • CSS : Cascading Style Sheets
  • CSS는 모듈별 버저닝 함

2) CSS는 어떻게 생겼을까

  • CSS는 룰 기반(Rule-based)의 언어 ➡ 여러가지 규칙을 나열한 것
  • CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음
    h1 {
    	color: red;
    	font-size: 12px;
    	/* 주석 */
    }
  • selector를 통해 스타일을 지정할 HTML 요소를 선택
    ➡ 하나의 h1를 작성하더라도 모든 h1에 적용됨
  • {} (선언블록) 안에는 하나 이상의 선언이 존재함
  • 속성: 값; 형태로 선언

3) CSS를 적용하는 방법

내부스타일 (embedded)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>

인라인 스타일 (inline)

<body>
	<h1 style="color:red; background:yellow;">welcome!</h1>
</body>

외부 스타일 (extend)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>CSS</title>
</head>
<body>
	<h1>welcome!</h1>
</body>

4) 캐스캐이딩 원칙

스타일 우선순위

  • 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
    • 1 사용자가 구성한 스타일(일반적X) > 2 개발자가 선언한 스타일 > 3 브라우저에 의해 정의된 스타일
  • 적용 범위가 적을수록 우선
    • 1 inline style > 2 id style > 3 class style > 4 tag style
  • 소스코드의 순서가 뒤에 있으면 덮어씀 (앞쪽이 무시됨)

스타일 상속

  • 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨
    • 자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어씀
  • 상속이 되지 않는 속성도 있음
    • ex) 배경 이미지, 배경 색

5) MDN 활용하기

👉 [속성명] MDN 검색
ex) text color css MDN

👉 can i use 검색
ex) grid gap 검색 ➡ 브라우저에서 작동되는지 확인할 수 있음



CH2. 선택자(selector)

1) 주요 선택자

Type (요소 셀렉터)

  • tag name selector
    ex) h1, strong, div
  • 한 파일의 모든 태그에 대해 적용됨
    ➡ 보통 하나의 태그에 대해 일관성 있게 작성할 때 사용됨
  • css 파일 상단에 모아둠

Class

  • html 태그 내에 class를 추가하여 사용
  • css에서는 .class-name으로 사용
  • 여러 곳에서 중복으로 사용 가능
  • 한 태그 내에서 space로 구분된 여러 class 사용 가능
.class-name {
	color: blue;
}

ID

  • html 태그 내에 id를 추가하여 사용
  • css에서는 #id-name으로 사용
  • 한 파일 내에서 유일무이한 존재
  • 한 태그 내에는 하나의 id만 사용 가능
#id-name {
	color: red;
}

2) 속성 선택자 (attribute selector)

[attr]

  • 해당 태그에 []안의 속성을 가진 태그만 선택
a[target] {
	color: hotpink;
}

[attr=value]

  • 속성이 어떤 값을 갖고 있는지까지 구분하여 선택
a[input="submit"] {
	/* a 태그 중 input 속성의 속성값이 submit인 선택자 */
	color: green;
}

[attr^=value]

  • 해당 속성 중, 속성값이 다음으로 시작하는 것들을 선택
a[input^="sub"] {
	/*sub로 시작하는 submit은 포함됨*/
	color: green;
}

[attr$=value]

  • 해당 속성 중, 속성값이 다음으로 끝나는 것들을 선택
a[href$=".com"] {
	/*.com로 끝나는 주소 전부 포함*/
	color: green;
}

[attr*=value]

  • 해당 속성 중, 속성값에 다음이 포함되는 것 전부 선택
a[input^="text"] {
	/*text를 포함하는 text, textarea 모두 선택됨*/
	color: green;
}

3) 가상클래스 선택자

  • 요소의 범위를 좁히는 조건으로 사용

first-child

  • 요소 list의 형제 요소 중 첫 번째 요소 선택
  • 만약 요소 list가 여러 개 있다면, 한 파일 내에서도 여러 개의 요소에 style이 적용될 수 있음
    ex) table이 여러 개 존재할 때, 각 테이블의 최상단 부분의 색깔만 변경
li:first-child {
	/*li list의 형제 요소 중 첫 번째 요소만 선택 */
	color: green;
}

⚠ 해당 태그(or 선택자) 중 첫 번째 요소가 아닌 ! 해당 태그(or 선택자)의 형제 노드 중 첫 번째 요소를 뜻함
👉 만약 해당 태그(or 선택자)의 형제 노드의 첫 번째 요소에 해당하는 태그(or 선택자)가 없다면 style은 적용되지 않음 !
EX ⬇

<ul>
	<li>영화1</li>
	<li class="movie">영화2</li>
	<li class="movie">영화3</li>
	<li class="movie">영화4</li>
</ul>
.movie:first-child { ~ }

last-child

  • 요소 list의 형제 요소 중 마지막 요소 선택
  • first-child와 사용방법 동일
li:last-child {
	/*li list의 형제 요소 중 마지막 요소만 선택 */
	color: green;
}

nth-child

  • 요소 list의 형제 요소 중 n번째 요소 선택
  • n의 위치에 2n+1 또는 even odd 와 같이 작성할 수도 있음
li:nth-child(3) {
	/*li list의 형제 요소 중 3번째 요소만 선택 */
	color: green;
}

first-of-type

  • 요소 list의 형제 요소 중 해당하는 type만을 기준으로 첫 번째 요소 선택
  • 형제 노드 중 type에 해당하는 모든 요소를 기준으로 삼음
<div>영화1</div>
<p>영화2</p>
<p>영화3</p>
<div>영화4</div>
<p>영화5</p>
p:first-of-type {
	color: black;
}
  • 위와 같은 경우, p태그의 형제들 중(영화1-5), p태그만 찾아서(영화2,3,5) 그 중 첫 번째만 style을 적용

⚠ [~]-of-type의 경우, 해당 형제 노드의 selector 중 type을 기준으로 선택
👉 만약 type의 종류가 여러가지라면, 각 type별 [~]에 해당하는 것이 모두 선택됨
EX ⬇

<div class="movie">영화1</div>
<p class="movie">영화2</p>
<p class="movie">영화3</p>
<div class="movie">영화4</div>
<p class="movie">영화5</p>
.movie:first-of-type {
	color: black;
}
  • 위의 경우, movie의 형제 노드 중, div와 p의 첫 번째 요소인 영화1과 영화2가 모두 선택됨

last-of-type

  • 요소 list의 형제 요소 중 해당하는 type만을 기준으로 마지막 요소 선택
p:last-of-type {
	color: black;
}

nth-of-type

  • 요소 list의 형제 요소 중 해당하는 type만을 기준으로 n 번째 요소 선택
p:nth-of-type(n) {
	color: black;
}

not

  • not 이하의 selector들을 제외한 나머지 selector를 선택
input:not(.pw) {
	/*input 중 pw class만 제외하고 선택 */
	background: blue;
}

input:not([type=submit]) {
	/*input 중 type이 submit만 제외하고 선택 */
	background: blue;
}

4) 동적 가상클래스 선택자 (html 상태가 변경)

link

  • link에 style 적용 (링크 방문 시, 적용 X)
a:link{
	color: yellowgreen;
}

visited

  • 방문한 곳에 style 적용 (이미 visit한 곳)
a:visited{
	color: green;
}

hover

  • user가 마우스를 올릴 때 상태 변경
input[type=button]:hover{
	color: yellow;
}

active

  • user가 클릭할 때 상태 변경
  • 버튼을 누른 후, 떼기 전까지의 상태
input[type=button]:active{
	color: green;
}

🙆‍♀️ 작성 순서 (a.k.a LVHA)
link → visited → hover → active

focus

  • 특정 요소에 초점이 맞춰졌을 때의 상태
  • 다른 곳을 누르기 전까지 유지됨
input[type=text]:focus{
	color: yellowgreen;
}

enabled

  • 활성화된 상태에 적용
input[type=button]:enabled{
	color: yellowgreen;
}

disabled

  • 비활성화된 상태에 적용
input[type=button]:disabled{
	color: yellowgreen;
}

checked

  • 선택된 상태에 적용
  • checkbox나 radio에서 적용
  • background 같은 몇 가지의 속성은 보이지 않을 수 있음
input[type=button]:checked{
	outline: yellowgreen;
}

5) 가상요소 선택자

  • 실제로 존재하지 않는 요소를 만들거나 범위를 생성하여 style 적용

before

  • 선택자가 있는 코드의 앞 부분에 위치
.movie::before {
	/* 코드 앞 부분에 content 안의 내용이 들어간 것처럼 보임 */
	content: '🙆‍♀️';
}
  • content: css로 만들어낸 가상의 코드
    가상요소의 부분은 선택이나 드래그할 수 없음

after

  • 선택자가 있는 코드의 앞 부분에 위치

first-letter

  • 선택자가 있는 코드의 맨 앞 글자에 적용
.lorem::first-letter {
	color: red;
}

⚠ before와 같이 사용할 경우, first-letter보다 before가 먼저 적용되기 때문에 주의해야 함

first-line

  • 첫 번째 줄에 대해서만 적용 (화면 크기에 따라 달라짐)
.lorem::first-line {
	color: red;
}

selection

  • 드래그 했을 때(선택 영역) 표시되는 부분
.lorem::selection {
	background-color: red;
	color: white;
}

6) 선택자 결합

하위

  • 특정 선택자의 모든 하위 선택자를 지정하고 싶을 때 사용
  • spacing을 사용해 구분할 수 있음
ul li:last-of-type{
	color: red;
}

자식

  • 하위의 모든 선택자에 대해 고려하는 것이 아닌, 바로 아래 단계에 위치한 선택자만 고려
ul > li:last-of-type{
	color: red;
}

7) 형제 선택자

일반 형제 선택자 결합

  • 어떤 요소가 특정 요소의 뒤에 위치할 때 사용 (앞 부분은 포함 X)
  • 특정 요소의 모든 형제가 아닌, 요소의 뒷 부분의 형제 노드 중 해당하는 선택자만을 의미
  • selector1 ~ selector2 { ... } 형태로 사용
code ~ p {
	color: red;
}

인접 형제 선택자 결합

  • 특정 선택자의 바로 뒤에 존재하는 선택자의 경우에만 해당 (앞 부분 X)
code + p {
	color: red;
}

8) 그룹화

  • 여러 가지에 한 번에 선택하고 싶은 경우
  • , 로 그룹지어 한 번에 적용할 수 있음
code, p, h1 {
	color: red;
}

8) 범용 선택자

  • 모든 요소에 선택이 됨
  • 따라서 파일의 최상단에 작성하는 것이 좋음
* {
	color: red;
}
  • * : 자체가 선택자로 사용되기도 함
p + * {
	color: red;
}
p > * {
	color: red;
}
  • 위의 코드처럼 p코드의 바로 뒤에 오는 모든 코드에 대해 style을 적용할 수 있음

9) 상속 제어하기

  • 대부분의 경우, 부모의 값을 상속받음
  • 자기 자신에게 값이 없을 경우, 부모의 값을 받아옴

initial

  • 상속을 받지 않음
.child2 {
	color: initial;
	}  /* color에 대해서만 상속X */
.child2 {
	all: initial;  /* 모든 요소에 대해 */
	}

inherit

  • 무조건 상속을 받도록 함
.parent * {
	color: inherit;
	}  /* color에 대해 모든 하위 요소는 상속을 받음 */

unset

  1. 부모로부터 상속받을 값이 있을 때 : inherit
  2. 부모로부터 상속받을 값이 없을 때 : initial
.parent .child {
	color:unset;
	}  /* color에 대해 parent의 모든 하위 요소 child는 상속을 받음 */
  • 상위의 모든 요소에서 X
    👉 바로 위의(부모의) 값에 대해서만

10) 우선순위

  1. 선언된 위치
    • 코드를 위에서부터 읽기때문에 마지막에 위치한 것이 보여짐
  2. 명시도 (적용범위가 적을수록 명시도가 높음)
    • inlilne > ID > class > type > * > inherited
    • !important : 우선순위에 상관없이 항상 0순위
  3. 코드 위치
profile
자두
블로그 이사했어요 https://ktmihs.tistory.com/
이전 포스트

[HTML/CSS] 메타데이터 요소, 전역 속성

다음 포스트

[HTML/CSS] 폰트 관련 속성/단위와 값

0개의 댓글