CSS란
Cascading Style Sheets의 약자로 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 쉽게 생각하면 HTML의 디자인과 가독성을 높일 수 있는 디자인 언어
버튼에 마우스를 올리거나 버튼을 클릭했을 때와 색상이 변하는 등 특정 이벤트에 따른 스타일도 지정할 수 있어 다채로운 사용자 경험을 제공
CSS 기본 문법
CSS 문법은 크게 셀렉터와 선언 블록으로 나뉨.
셀렉터로 스타일을 지정할 HTML 요소나 Id,Class등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호 {} 사이에 지정하는 방식
CSS 우선 순위
- 순서
- 나중에 적용한 속성값의 우선순위가 높음
/* <p>Hello World</p> */
p { color: red; }
p { color: blue; }
- 디테일
- 더 구체적으로 작성된 선택자의 우선순위가 높음
header p {color: red; }
p { color: blue; }- 선택자
Type Selector : 특정 태그에 스타일 적용
<style>
h2 { color: red;}
</style>Class Selector: 클래스 이름으로 특정 위치에 스타일 적용
<style>
.coding {color: blue;}
</style>ID Selector: ID를 이용해 스타일 적용
<style>
#coding {color: green;}
</style><h3 style="color: pink" id="color" class="color"> color </h3>
#color { color: blue; }
.color { color: red; }
h3 {color: green; }style > id > class > tag 순으로 우선순위가 높음
##CSS 연동 방법 세 가지
1.Inline Style Sheet: 태그 안에 직접 원하는 스타일 적용
<h1 style=”color: red;”> coding </h1>2.Style Sheet :
<style>태그 안에 넣기
<head>
<style>
h1 { background-color: yellow;}
</style>
</head>3.External Style Sheet:
<link>태그로 불러오기
<haed>
<link rel="stylesheet" href="style.css">
</head>- html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움
개발자가 되기 위한 노트