CSS
CSS 캐스케이딩 스타일 시트(Cascading Style Sheets) 언어입니다.
CSS란?
CSS(Cascading Style Sheets)은 HTML을 꾸며주는 디자인 언어입니다.
상속
상속(inherit)이란 상위 요소에 적용된 속성들이 하위 요소까지 상속 받는 것을 말합니다. CSS 속성에는 상속이 되는 속성도 있고 그렇지 않은 속성도 있습니다.
주석
주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다.
/* 주석 */
스타일 선언
HTML 문서에 스타일을 선언하는 방법은 여러가지가 있습니다.
- 내부 스타일 : head 태그 안에 설정하는 방법입니다.
- 외부 스타일 : 외부 파일을 연결하는 방법입니다.
- 인라인 스타일 : 요소에 직접 설정하는 방법입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
<!-- 내부 스타일 -->
<style>
h1 {color: #fff}
</style>
<!-- 외부 스타일 -->
<link href="경로" rel="stylesheet">
</head>
<body>
<!-- 내부 스타일 -->
<h1 style="color: #fff"></h1>
</body>
</html>
CSS
/* 외부 스타일 */
@import url(경로)
벤더 프리픽스(Prefix)
CSS3는 현재 완료된 속성도 있지만 개발을 하고 있는 속성도 있습니다. 최신 속성은 브라우저마다 다른 방식으로 지원하기 때문에 접두사(Prefix)를 붙여 호환성을 맞추어 줍니다. 시간이 지나고 표준화가 되면 접두사를 쓰지 않아도 됩니다.
| 접두사 | 설명 |
|---|---|
| -webkit- | 웹킷 방식의 브라우저(크롬, 사파리, 웨일, 오페라) |
| -moz- | 게코 방식의 브라우저(파이어 폭스) |
| -o- | 오페라 브라우저(12버전 이하), 12버전 이상은 -webkit-으로 표현 |
| -ms- | 마이크로소프트 인터넷 익스플러러 |
이미지 형식
웹에서 사용하는 이미지 형식입니다.
| 형식 | GIF | JPEG | PNG-8 | PNG-24 | SVG |
|---|---|---|---|---|---|
| 색상수 | 256색 | 모든 색상 | 256색 | 모든 색상 | 모든 색상 |
| 압축률 | 중 | 고 | 고 | 저 | - |
| 투명도 | 사용 가능 | 사용 안됨 | 사용 가능 | 사용 가능 | 사용 가능 |
| 애니메이션 | 사용 가능 | 사용 안됨 | 사용 안됨 | 사용 안됨 | 사용 가능 |
| 방식 | 비트맵 | 비트맵 | 비트맵 | 비트맵 | 벡터 |
크로스브라우징
사용자마다 사용하는 브라우저가 다르고 OS가 다릅니다. 그래서 보이는 화면이 다를 수 있습니다. 사용자가 어떤 브라우저를 사용하더라도 사용자가 어떤 운영체제를 사용하더라도 웹 문서를 동일하게 나올 수 있도록 하는 기법입니다.
웹표준
웹 문서를 제작하는 기본 표준을 말합니다.
