CSS
Cascading Style Sheet
정보(HTML)와 디자인(CSS)의 분리
문서의 레이아웃과 스타일 정의
HTML로 작성된 정보를 꾸며주는 언어
CSS 구성요소
선택자 { 속성 : 속성값; }
- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력
색상 적용방법
- 키워드
브라우저에서 지원하는 색상의 이름을 사용
ex) green, red, blue ···
- RGB
0부터 255의 숫자를 사용하여 표기
ex) rgb(0, 0, 255)
···
- Hex Code
16진수로 이루어진 숫자와 알파벳의 조합
ex) #f9f9f9, #ff6060 ···
- 투명도 적용법
- rgba
0부터 1까지의 숫자를 사용하여 표현 가능
ex) rgba(0, 0, 255, 0.5) - Hex Code
00부터 99까지의 숫자를 사용하여 표현가능
ex) f9f9f999
CSS 적용방법
- 인라인 스타일 시트 (Inline style sheet)
태그 속에 직접 스타일 속성값(attr)을 넣는 방법
style적용 최우선순위<h1 style="color:red;"> 인라인 스타일 </h1>
- 인터널 스타일 시트 (Internal style sheet) (내부참조)
<style>태그를 추가하는 방법<head> <style> h1 { Background-color: yellow; } </style> </head>
- 익스터널 시타일 시트 (External style sheet) (외부참조)
외부 css 확장 파일을<link>태그로 연결
html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움<head> <link rel="stylesheet" href="style.css"> </head>
CSS 선택자
선택자 (Selector)
HTML의 어떤 요소에 CSS를 적용할 것인가
CSS 선택자 종류
Type 타입 (태그)
: 특정 태그에 스타일을 적용
<h2> Type Hello World </h2><style> h2 { color: red; } </style>
Class 클래스 (태그 별명)
선택자 = .
<h2 class="coding"> Class Hello World </h2><style> .coding { color: blue; } </style>
ID 아이디 (태그 이름)
선택자 = #
<h2 id="coding"> Class Hello World </h2><style> #coding { color: green; } </style>
CSS의 우선순위를 결정하는 세 가지 요소 (캐스케이딩)
순서
<p> Hello World </p> // style.css // p { color: red; } p { color: blue; }
나중에 적용한 속성값의 우선순위가 높음 ( blue 적용 )
디테일
<header> <p> Hello World </p> // style.css // header p { color: red; } p { color: blue; }
더 구체적으로 작성된 선택자의 우선순위가 높음 ( red 적용 )
선택자
<h3 style="color: pink" id="color" class="color"> color </h3> // style.css // #color { color: blue; } .color { color: red; } h3 { color: green; }
style > id > class > type 순으로 우선순위가 높음 ( pink 적용 )
id는 한 개에만 적용해서 사용할 수 있고 class는 여러 개에 적용할 수 있음.
