CSS 기초
1. 스타일과 스타일 시트
<head>
<style>
</style>
</head>-
<head>태그 안에 위치 -
/* 주석 내용 */- 주석 -
<link rel="stylesheet" href="css/style.css">- 외부 스타일 시트 -
태그에 직접 표시하는 경우 - 인라인 스타일 (관리하기 어려움)
2. 주요 선택자
전체 선택자
* {속성: 속성 값; 속성: 속성 값; ...}
- 보통 문서의 기본 스타일 초기화할 때 사용
태그 선택자
태그 {스타일}
클래스 선택자
.클래스 {스타일}
-
텍스트 일부에만 클래스 스타일을 적용
<span class="클래스">이용해서 텍스트 묶고 클래스 입력
-
특정 태그의 클래스에만 스타일 적용
태그.클래스명 {스타일}
-
둘 이상의 스타일 동시 적용
.클래스1 {} .클래스2 {}<span class="클래스1 클래스2"></span>
id 선택자
#아이디 {스타일}
- 클래스 - 중복 사용 가능, 아이디 - 중복 사용 불가능
- 문서 레이아웃 관련 스타일 지정 혹은 자바스크립트 프로그램에서 웹 요소 구별위해 주로 사용
그룹 선택자
이름1, 이름2 {}
- 두개 이상 요소에 동일한 스타일을 적용
3. 캐스케이딩 스타일 시트 (CSS)
Cascading Style Sheet - 위에서 아래로 흐르는 스타일 시트
스타일 우선순위
-
사용자 설정 > 제작자 중요 스타일(!Important) > 제작자 일반 스타일 > 브라우저 기본 스타일
-
제작자 일반 스타일 - 인라인 > id > 클래스 > 태그 스타일
-
나중에 정의된 스타일일수록 우선순위 높음
스타일 상속
-
부모 요소에 적용된 스타일은 자식 요소에 상속됨
-
배경색과 이미지는 상속되지 않음
4. CSS3와 CSS 모듈
-
CSS3는 이전과 달리 모듈 식으로 주제별 규약을 따로 만듦
-
모듈에 따라 표준화 진행 상황이 다름. http://www.w3.org/Style/CSS/ 참고
-
표준화 단계 - LC(최종 검토) > WD(초안) > CR(후보 권고안) > PR(제안 권고안) > REC(권고안)
브라우저 접두사(prefix)
-
아직 표준 규약이 아닌 경우 브라우저 별로 속성 이름 앞에 접두사를 붙여 브라우저별로 구분해야 함
-
접두사 종류
-
-webkit- - 웹키드 방식 브라우저용 (사파리, 크롬 등)
-
-moz- - 게코 방식 브라우저용 (모질라, 파이어폭스 등)
-
-o- - 오페라
-
-ms- - 마이크로소프트 ie
-
-
표준화되지 않은 속성이 모든 브라우저에서 똑같은 결과로 보이려면 이 방법이 최선
-
자동으로 접두사 붙이기
- '-prefix-free' (http://leaverou.github.io/prefixfree/) 파일 다운로드 후
<script src="prefixfree.min.js"></script>를<head>태그에 넣어주기
- '-prefix-free' (http://leaverou.github.io/prefixfree/) 파일 다운로드 후
출처 : Do it! HTML5+CSS3 웹 표준의 정석
