1. CSS (Cascading Style Sheet, 종속형 스타일 시트)
ㅇ HTML 만으로 쓰여진 구조(structure) 위주의 웹 페이지 상에,
ㅇ 다양한 표현(presentation)을 주기 위해,
ㅇ 스타일 속성 정보를 추가 가능케 함으로써,
ㅇ 결국, 유연하고,깔끔하고,다채로운 웹 화면 구성을 가능하게 함
※ [참고]
- HTML : 일반 텍스트 문서 상에 구조화된 표현을 가능케하는 마크업 언어
- 스타일 속성 : 문서 내 요소(문자 등)의 활자,색,크기,위치,레이아웃 등에 관한 정보
- 스타일 시트 : 문서의 표현 서식(디자인 스타일 특성)을 묶어 따로 등록해 두는 시트
2. CSS 역사
ㅇ W3C에 의해 개발됨 ☞ W3C CSS home
ㅇ 역사
- 현재 CSS는 레벨 3까지 나와 있음
. CSS1 : 1996년12월, CSS2 : 1998년5월, CSS2.1 : 2011년6월
. CSS3 (버젼별 구분 없이, 모듈 단위로 묶어 정리하면서, 지속적으로 개별 권고를 시작함)
- CSS3는 표준 작업이 지속적으로 진행되면서,
. 혁신적이며 다소 복잡함을 더해가고 있음 (다단, 변형, 변환, 애니메이션 등)
- 한편, HTML에서는 HTML 3.2 부터 CSS를 본격 지원하기 시작함
3. CSS 특징
ㅇ 문법이 단순하고 유연하여, 사용하기 쉽고 편리함
- CSS 구문 형식 : selector { property : value }
. 즉, 선택자 { 속성명 : 속성값 }
* [참고]
- CSS 선택자 (단순 선택자, 그룹 선택자, 결합 선택자, 가상 선택자)
- CSS 속성 (CSS 텍스트, CSS 색상, CSS 배경, CSS 여백, CSS 정렬 등)
- CSS 속성값 참조
ㅇ 상속성 있음
- 부모 태그의 어떤 스타일 속성을 자식 태그에서 상속 받을 수 있음
. 하나의 태그로 정의된 스타일 속성을,
. 이 태그와 관련된 모든 하위 태그에 종속적으로 전달되게 함
ㅇ HTML 문서의 표현을 확장시켜줌 ☞ 웹디자인, 스타일시트 참조
ㅇ 한편, CSS 모든 것이 전역 범위(Global Scope)로 선언되므로,
- 서로 간섭할 가능성이 높음
4. CSS 적용
※ (스타일 형식을 HTML 문서에 부가하는 방법)
ㅇ Inline Stlye : html 매 요소 마다 스타일을 적용시킴
- 例) <p style="color: red; background: yellow;">inlined style</p>
ㅇ Embeded Style Sheet : html 문서내에 포함시킴
- 例) <style type='test/css'> @import url("/path/stylesheet.css"); </style>
ㅇ External style Sheet : 외부 .css 파일화하여 링크로 걸어줌
- 例) <link rel="stylesheet" href="mystyles.css" type="text/css">
. rel : (relation) 링크된 파일이 현재 웹페이지와 어떤 관계인지를 설명하는 속성
.. 주로, 검색 엔진을 위한 정보 제공용 임
. href : 링크시킬 파일명 및 경로 위치
.. 연결할 리소스의 URL
.. 절대 URL과 상대 URL 모두 가능
ㅇ @import : CSS 파일 안에서 다른 CSS 파일을 불러오는 경우 ☞ CSS @ 규칙 참조
- 例) <style type='test/css'> @import url("/path/stylesheet.css"); </style>
5. CSS 문법
ㅇ CSS 기본 구문 : selector { property : value }
- CSS 선택자 (selector) ☞ CSS 선택자 참조
. HTML 요소들의 선택/접근
. HTML 요소들과 스타일 속성들 간의 관계를 맺어주기 위함
- CSS 속성 및 값 ( { property : value } ) ☞ CSS 속성 참조
. 선택된 HTML 요소에 대한 속성별 값 지정
. [참고] 특별한 CSS 속성명 ☞ Vendor Prefix(벤더 접두사) 참조
ㅇ CSS @ 규칙 (@-rule)
- 종류 : @charset, @import, @font-face, @media, @keyframe 등
6. CSS에서, Cascading Style의 의미?
ㅇ 동일 요소에, 여러 스타일 규칙들을, 연이어 다중 적용할 수 있음을 말함
ㅇ cascading (다중 적용)에 따른 규칙 충돌을 피하려면, => specificity (특정 적용)
* (우선순위에 의해, 특정 적용 가능해짐) ☞ CSS 선택자 참조
- (높음) inline style > id 선택자 > 가상 선택자 > 속성 선택자 >
class 선택자 > 요소 선택자 (특정요소 > 모든 요소) (낮음)
7. CSS 박스 모델 (Box Model)
※ ☞ CSS 박스 모델 참조
- CSS는, 웹 페이지 안에 모든 요소(Element)를 사각형 즉, 박스 모델로써 다루고 있음
※ ☞ block 요소, inline 요소 참조
- html 태그별 보이기 성격( block,inline) 구분