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)
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
'퍼블리싱 > CSS' 카테고리의 다른 글
html, css 종합 예제 클론코딩 실습 (0) | 2020.12.04 |
---|---|
css: position, float, 알마인드 이용한 돔트리 만들기, 실습 (0) | 2020.12.02 |
css: 속성선택자, 상태 선택자, position, z-index, 실습(클론코딩) (0) | 2020.12.01 |
CSS: box model, border-radius, margin, padding, 가상요소선택자, 순서선택자, 구조선택자, 이후선택자, display, overflow (0) | 2020.11.30 |
css: size, text, font, list, cursor, background, 선택자, 가상선택자pseudo (0) | 2020.11.27 |