[TIL] CSS 3: Selectors & Visual Rules

송나은·2021년 1월 14일

HTML 5 & CSS 3

목록 보기

1/15

CSS (Cascading Style Sheets) 세팅방법

구조 {property: value;}

1. Inline

<p style="color: red; front-size: 20px;">I'm learning to code!</p>

2. 태그형식

<head>
  <title>Vacation World</title>
  <style>
    p
    {font-family: Arial;
    }
  </style>
</head>

3. 파일형식

<link href="https://www.codecademy.com/stylesheets/style.css" type="text/css" rel="stylesheet">
<!--같은 위치에 파일이 존재할 때-->
<link href="./style.css" type="text/css" rel="stylesheet">

4. @media 규칙

하나의 HTML 문서를 다양한 장치에서 서로 다르게 css를 설정할 수 있다.

@media screen and (min-width:960px) PC환경
@media screen and (max-width:767px) 모바일환경

CSS 선택자

1. Class 선택자 "."

Multiple 선택자
class="hello" 속성 중 h1에만 적용하는 방법

<h1 class="hello">Heading 1 & class="hello"</h1>
<h2 class="hello">Heading 2</h2>

h1.hello {
;}

하나의 속성에 여러개의 class를 추가하는 방법

<h1 class="title uppercase">Top Vacation Spots</h1>

.uppercase{
 text-transform: uppercase;
 }
.title{;
 }

2. ID 선택자 "#"

가장 Specific한 선택자.
(id > class > id+tag > class+tag > tag)

<p id="bye">Paragrape id="bye"</p>

#bye
{color:Yellow;
}

Id는 중복 지정이 불가하다. Class는 중복지정이 가능하다.

3. 전체 선택자 "*"

HTML 문서 내의 모든 요소를 선택한다.

4. 부정 선택자 ":not"

선택한 요소를 제외한 모든 요소를 선택한다.

Visual Rules

1. Font

font-family 글씨체
{font-family: Arial;}
font-size 크기
{font-size: 10px;}
font-weight 두께: bold, normal or 100~900 (100의 배수)
{font-weight: bold;}
{font-weight: 200;}
font-style
{font-style: italic;}