CSS 개요, 정의| 인라인, 내부, 외부, css 문법, 선택자, 색상값

2020. 11. 26. 17:50퍼블리싱/CSS

반응형

 

 

CSS

Cascade style sheet

 

종류 (작동 우선순위 순)

1. 인라인 : jQuery 이용하여 css 변경 명령 시 인라인으로 적용

<태그 style="속성:값">

 

2. 내부

<style>

      css 문법

</style>

 

3. 외부 (웹표준 권장사항)

- link

<link rel="stylesheet" href="파일명.css">

- import

<style>

    @import url(파일명.css)

</style>

 

 

CSS 문법

선택자{

속성:값;

}

 

참고

css 파일은 style 태그 없이 바로 문법 작성

css 주석 : /* 내용 */ (ctrl+/)

 

선택자

전체 선택자 : * asterisk

태그 선택자 : p,h1~h6,ul,li,a,img,form,input,span,div,header,footer,article,section,aside

클래스 선택자 : .클래스명

아이디 선택자 : #아이디명

자식 선택자 : >

 

색상값

1. 컬러명
2. 16진코드값: #RRGGBB 
3. RGB 10진값: rgb(red,green,blue) 0~255/ 0~100%

4. RGBA 10진값+투명도 : rgba(red,green,blue,alpha) / alpha=0~1 소수점 적용

5. HSLA (hue색상,saturation채도,light명암,alpha)

 

https://hslpicker.com/#89cfeb

 

HSL Color Picker - by Brandon Mathis

What's so great about HSL HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, hsl(36, 73%, 10%), it's clear that if we desaturate 40 steps and lighten 70 steps we get hsl(36, 33%, 80%), a

hslpicker.com

 

반응형