CSS cascading Style Sheet ?
워드 프로세스의 스타일 적용과 유사
cascading : 계단형의 의미로 스타일 적용에 특정도, 또는 우선순위가 있고 우선 순위가 정해지는 것이 계단식 스타일 시트 라는 의미
HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.
CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문.
CSS는 HTML과 달리 문법에 엄격하다. 구두점 하나만 빼먹는 실수를 해도 전체 CSS파일의 로딩에 실패한다.
필요한 이유 :
1 HTML에 직접 스타일 적용함으로써 생기는 HTML문서 자체의 무거움을 줄일 수 있다.
2 하나의 스타일로 다수의 페이지에 같은 속성을 적용함으로써 작업시간 단축
3 웹 표준의 원칙 : HTML마크업을 통해 구조를 잡고, CSS로 디자인을 입힘
CSS의 진화 과정
- W3C을 통해 표준 관리
- 현재 최신 브라우저는 정부 CSS2 규격을 준수
- CSS3도 표준안이 완성되었고 대부분 브라우저에 지원(완벽하게 지원X)
CSS와 HTML의 상호작용
- 웹페이지 = HTML + CSS + JavaScript
디자인 라이브러리
CSS를 주로 사용하는 유명한 라이브러리로 트위터 부트스트랩# 이 있다. 거대한(약 120KB정도) 단일 CSS파일 하나로 된 라이브러리이다. 일종의 웹 사이트 테마 라이브러리로 디자이너 없이도 준수한 퀄리티의 사이트 UI를 뽑아낼 수 있다. 부트스트랩 라이브러리를 또 확장하는 서드 파티 라이브러리도 많이 나와 있다.
부트스트랩과 같은 디자인 라이브러리이다. 부트르트랩과는 다른 분위기를 줄 수 있다.
W3 Schools에서 밀어주는 CSS 라이브러리이다. 심플한 분위기를 낼 수 있다.
-
기능 보완 라이브러리
자바스크립트로 된 CSS 라이브러리이다. CSS Vendor Prefix 작업을 자동으로 진행하여준다.
벡터 이미지로 된 아이콘을 HTML에 추가할 수 있게 해 주는 CSS 라이브러리이다. 소개된 방법을 익히면 CSS에서의 조작을 통해 아이콘의 색을 바꾸고 회전시키는 등의 효과를 줄 수 있다.
일반적인 양식 예
일반적으로 CSS 속성영역은 <head>태그 안, <title>태그 아래에 쓴다.
<style></style>태그 안에 원하는 CSS 코드를 작성하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
태그명 {
속성명 : 값;
속성명 : 값;
....
}
</style>
<!-- style자체가 css만 적용 가능 -->
javascript
</head>
'폴리텍 광명융합기술원 > WEB' 카테고리의 다른 글
| [CSS] Padding, Margin (0) | 2020.06.12 |
|---|---|
| [CSS] 임베디드 & 인라인 방식 & 기초 사용법 (0) | 2020.06.12 |
| [HTML] <form> <input> (0) | 2020.06.12 |
| [HTML] Table 응용 (0) | 2020.06.11 |
| [HTML] Table 기초 (0) | 2020.06.11 |