CSS 기본 (1)_문법,선택자 Kassid

728x90

역할

HTML 태그를 선택해서 디자인하고 배치하는 역할

링크하는 방법

1. 내부 스타일 : html파일 <head>...</html> 사이에 <style>...</style>

2. 외부 스타일 : html파일 ... <head>...</html> 사이에 css파일 링크

<link rel="stylesheet" href="style.css">

기본 문법

선택자 {
  속성:값;
}

선택자의 순서는 더 큰 개념을 먼저 써준다.

(기본적인 작성 순서, 뒤바뀌어도 적용에 문제는 없음!)

ex)

body {
    background-color: orange;
}
h1 {
    font-size: 50px;
    color: red;
}

선택자

종류

태그 선택자

p {
  font-size: 50px;
  color: red;
}

클래스 선택자

.mycontent {
  text-align: center;
  font-size: 30px;
}

아이디 선택자

#mycontent {
  text-align: center;
  font-size: 30px;
}

태그+클래스 or 아이디

p.mycontent {
    font-style: italic;
    color: blue;
}
h1#title {
    font-size: 50px;
    color: black;
}

해당 클래스or 아이디를 가진 태그에 적용된다. (레이아웃 등을 설정하는 특별한 경우에 사용함!)

그룹 선택자

h1, p {
  text-align: center;
  color: green;
}

css 속성이 완전히 일치하는 선택자가 있을 경우

위처럼 한 번에 작성한다.

전체 선택자

* {
  color: blue;
}

전체에 공통으로 적용할 때 사용한다.

하위 선택자

p>span {
  color: orange;
}
p span {
  color: orange;
}

> 혹은 공백 으로 하위 선택자에 대해 설정할 수 있다.

우선순위

!important > 인라인 > 아이디 > 클래스 > 태그

ex 1)

<h1 class="text">TEXT</h1>

h1 {
    color: red !important;
}
.text {
    color: blue;
}

우선 순위 상으로 클래스가 태그보다 위에 있지만

!important를 적어주었기 때문에 최우선순위가

달라졌다!

ex 2)

<h1 id="text" style="color : gold">TEXT</h1>

#text {
    color: green;
}

id 선택자보다 인라인이 우선순위가 높기 때문에

색상이 gold로 출력이 되었다.

'🌌 | WEB DEV > HTML CSS' 카테고리의 다른 글

CSS 기본 (4)_박스(border, border-radius) (0)	2022.01.01
CSS 기본 (3)_자손, 자식 선택자 (0)	2021.12.31
CSS 기본 (2)_서식 (0)	2021.12.31
HTML 핵심 태그들 (0)	2021.12.31
HTML&CSS EMMET (w.VSCODE) (0)	2021.12.30

CSS 기본 (1)_문법,선택자

역할

링크하는 방법

기본 문법

선택자

종류

우선순위

'🌌 | WEB DEV > HTML CSS' 카테고리의 다른 글

댓글

티스토리툴바

CSS 기본 (1)_문법,선택자

역할

링크하는 방법

기본 문법

선택자

종류

우선순위

'🌌 | WEB DEV > HTML CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바