CSS ?
HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능이다.
기능 확장성 : HTML의 기능을 확장 한다. 태그에 다양한 기능 추가 및 HTML에서 지원하지 않는 다양한 스타일등을 사용할 수 있다.
양식의 모듈화 : 흐름이 같은 문서 양식으로 전체를 구성할 수 있다.
간편성 : 문서의 형식을 손쉽게 다양하게 구성할 수 있다.
일관성 및 유지 보수의 편리성 : 사용 환경의 영향을 받지 않으며, 일관성 있는 문서들을 만들 수 있다. 그리고 유지 보수의 편리성이 있다.
CSS 형식
선택자 {속성:value | keyword; 속성: value | keyword;}
- CSS 구문은 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성된다.
- CSS의 기본 형식은 '선택자{속성:값;}'의 형식으로 표현되며 여러 속성을 사용할 경우 세미콜론(;)으로 구분한다.
- 대소문자를 구별하지 않는다.
- inline style을 제외한 모든 style property 와 value, keyword는 중괄호({})속에 들어간다.
CSS 지정 방법
인라인 스타일(inline style)
- inline Style은 HTML tag 속에 style 속성을 사용하여 직접 지정한다.
- 예 <div style="color:red;>HTML</div>
내부 스타일 시트(embedded style sheet)
- 스타일 시트의 기본적인 사용 방법으로 html의 <head>~</head>사이에 삽입하여 <style type="text/css">~<style>사이에 정의하며, 같은 스타일을 중복해서 지정 했을 때는 나중에 지정한 것이 적용된다.
외부 스타일 시트(linked style sheet)
- <head> ~ </head> 사이에 link element를 사용하여 css file(확장자가 .css 인 파일)을 연결시켜서 사용하는 방식이다.
- 형식 <link rel="stylesheet" href="파일명.css" type="text/css">
imported style sheet
- 이 방식은 결과적으로 linked style sheet와 같고 위치는 embedded 방식과 마찬 가지로 style block 속에 들어간다.
- 형식 @import url("파일명"); 또는 @import"파일명";
상속과 캐스캐이딩(Cascading Order)
명시도 - 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
적용 순서
(1) !important
(2) 인라인 스타일
(3) 아이디 선택자
(4) 클래스/어트리뷰트/가상 선택자
(5) 태그 선택자
(6) 전체 선택자
(7) 상위 요소에 의해 상속된 속성
선언순서 - 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0923_CSS : Z-index (0) | 2021.09.23 |
|---|---|
| 0923_CSS : 포지셔닝 position (0) | 2021.09.23 |
| 0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0) | 2021.09.15 |
| 0914_HTML : table 태그 사용 이력서 만들기 숙제 (2) | 2021.09.14 |
| 0913_HTML : 레이아웃 관련 태그(2) div 태그 (0) | 2021.09.14 |