[CSS] 기본 셀렉터

1. 의미, 정의

CSS는 Cascading(작은 폭포, 폭포처럼 쏟아지는 물, 폭포처럼 흐르다) Style Sheet(스타일을 정의 해놓은 문서)의 약자입니다. → 폭포처럼 떨어지듯이 스타일을 정의 해놓은 문서를 말합니다. 즉, 정의된 세부적인 정의가 있다면 그것을 쓰고, 없다면 다음 기본으로 지정된 아이로 넘어가는 것을 말합니다. 계단식으로 스타일을 정의하는 문서

Author style → User style → Browser 순서로 스타일이 지정 됩니다.

2. 선택자 (selector)

Universal (*)
type (Tag)
ID (#id)
Class (.class)
State (:)
Attribute ([])

3. 스타일링

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <body>
    <ol>
      <li id="special">First</li>
      <li>Second</li>
    <ol>
    <h1 id="special">text</h1>
    <button>Button 1</button>
    <button>Button 2</button>
    <div class="blue"></div> 
    <div class="red"></div>
    <a href="naver.com">Naver</a>
    <a href="gogglenaver.com">Google</a>
    <a>Empty</a>
  </body>
</html>

/* selector{
  property: value;
} */

* {
  color: green;
}

li {
  color: blue;
}

#special{
  color: pink;
}

li#special{
  background: pink;
}

.red{ /* div는 블럭 레벨 요소(element)이다. */
  width: 100px;
  height: 100px;
  background: yellow;
}

button:hover {
  color: red;
  background: beige;
}

a[href]{
  color: purple;
}

a[href="naver.com"]{
  color: black;
}

a[href^="naver"]{
  color: green;
}

a[href$=".com"]{
  background: pink;
}

/* 태그 가까이에 지정된 속성들이 우선 순위를 가진다. */

4. 헷갈리는 컨셉

https://developer.mozilla.org/en-US/docs/Web/CSS/border-block

border-block - CSS: Cascading Style Sheets | MDN

The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

developer.mozilla.org

5. 선물 → selector 연습 할 수 있는 게임 사이트

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

https://velog.io/@woohyun_park/CSS-Diner

[CSS] CSS Diner

CSS 태그를 쉽게 배울 수 있는 CSS Diner를 마스터해보자

velog.io

저작자표시

'프레임워크 > CSS' 카테고리의 다른 글

[CSS] Flex Box (0)	2022.01.09
[CSS] 레이아웃(display, position) (0)	2022.01.09
미디어 쿼리 사용법 (2) (0)	2022.01.05
미디어 쿼리 사용법 (1) (0)	2022.01.05
[CSS] input type="file" CSS 적용하기 (0)	2021.12.20