[웹 소프트웨어] Lec. 4. CSS Foundation(1)

3/23

 

Part 1. CSS Basics

웹페이지의 스타일

CSS = Cascading Style Sheets

모든 페이지가 같은 CSS 파일로 설정될 수 있다.

 

css3 문법

• <Selector> { <property>: <value>;}
• 주석은 /* */
• <style>태그 안에 넣는다.

선택자(Selector)의 구분

• Type selector: 일반적인 HTML 태그
• Universal selector: 전부 선택. *(별)을 이용
• ID selector: ID속성을 이용. #(샾)을 사용. unique하다.
• Class selectors: class를 이용. .(점)을 사용. unique하지 않을 수 있다.(ID와 차이)
• Attribute selector: 특수한 속성 이용. []를 사용
• Pseudo-class selector: 특수한 상태를 이용한다.

 

Part 2. CSS Insertion and Specificity

css를 사용하는 3가지 방법

• external style sheet
• internal style sheet
• Inline

참고로 우선도는

Inline > Internal> External> 기본 세팅

 

External

• 하나의 외부파일로 스타일 sheet 저장
• 문법 예시 - <link type="text/css" rel="stylesheet" href="mystyle.css">

Internal

• 파일 내의 <style> 태그 이용

Inline

• 각 HTML element에다가 사용.
• 스타일을 설정할 때에는 ;로 구분해야한다.

 

Specificity란? Priority(우선순위)와 유사

• selector의 우선순위는
• Inline > ID's > Classes, pseudo-classes, attribute selectors >  Elements and pseudo-elements
• 우선순위의 계산은 덧셈에 가깝다.
• 시작시 0. ID는 100, class와 attribute는 10, elements는 1. 그리고 Inline은 1000이다.
• (같은 경우는 가장 최근것으로 지정. universal이나 상속된 값은 0