스타일 시트 : 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것
스타일 : 글꼴, 색상, 정렬, 배치방법 등 겉모습을 결정하는 내용
장점1 - 내용과 디자인이 구분되어 있기 때문에-> 웹 문서 내용과 상관 없이 디자인만 바꿀 수 있다.
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
장점2 -다양한 기기에 맞게 탄력적으로 바뀌는 문서 만들 수 있다.
스타일 형식
p {text-align: center;} 선택자(셀렉터) 스타일속성 속성값
스타일 주석
/* /*
스타일과 스타일 시트
1. 내부 스타일
-<head>태그 안에 <style>태그 만들어서 작성한다
2. 외부 스타일 시트
-따로 저장해 놓은 스타일 정보, css 파일 확장자
-<link rel="stylesheet" href="style.css">태그 이용, <head>태그 안에 쓴다
3. 인라인 스타일
-적용할 대상에 직접 표시한다
-<p style="color: blue;">블루베리</p>
주요 선택자
1. 전체 선택자 - 모든 요소에 스타일 적용
* { 속성: 속성값; }
~기본 스타일 초기화 할 때 (여백, 글꼴 크기)
2. 태그 선택자 - 특정 태그를 사용한 요소
p { font-size: 12px; }
~웹 문서의 모든 p요소들에 스타일 적용
3. 클래스 선택자 - 특정 부분에 스타일 적용
.bluetext { color: blue; } <div class="blueprint">
~특정 부분에만 스타일을 적용할 때, 점(.)을 앞에 꼭 쓴다
h2.accent { background-color: #222; }
~특정 태그에만 클래스 선택자 적용할 때
.browntext { color: brown; } .boldtext {font-weight: bold;} <span class="browntext boldtext">
~한꺼번에 둘 이상의 클래스 적용할 때, 공백으로 구분해서 나란히 적는다
4. id 선택자 - 특정 부분에 스타일 적용
#container { width: 600px; } <div id="container">
~문서 안에서 한 번만 적용할 수 있다, # 사용한다
~레이아웃과 관련된 스타일 지정 or 자바스크립트 프로그램에서 웹 요소 구별하기 위해 사용
5. 그룹 선택자 - 둘 이상 요소에 같은 스타일 적용
h1 { color: red; } h2 { color: red; } -> h1, h2 { color: red; }
~쉼표(,) 사용한다
캐스케이딩 - 위에서 아래로 흐르는 스타일 시트
~선택자에 적용된 스타일이 많을 때(동시적용, 충돌) 어떤 스타일 나타낼지 결정
~스타일 우선순위, 스타일 상속 : 2가지 원칙을 따른다
스타일 우선순위
●중요도 - 가장 중요한 것부터 차례로 나열
1. 사용자 스타일 시트 - 저시력자, 색약자 들을 위한 시트
2. 제작자 스타일 시트 !important 붙은 스타일
3. 제작자 스타일 시트 일반 - 가장 많이 사용하는 스타일
4. 기본적 브라우저 스타일 시트
●적용범위 - 정확히 필요한 요소에만 적용할 스타일일 수록 순위 높음
1. 인라인 스타일 - 태그안에 style 속성
2. id 스타일 - 한 문서에 한번 적용
3. 클래스 스타일 - 한 문서에 여러번 적용
4. 태그 스타일 - 특정 태그들에 똑같이 적용
●소스 순서 - 중요도, 적용범위 같을 때 이용, 나중에 온 스타일이 먼저 온 스타일 덮어쓴다.
스타일 상속 - 부모 요소에 있는 스타일 속성들이 자식 요소에도 적용
ex. <body>태그 스타일 속성은 <h2>태그에도 상속
~배경이미지, 배경색은 상속되지X
CSS3는 계속 변하고 있다.
CSS 모듈 - 배경, 글꼴, 박스모델 등 수십 개 기능을 주제별로 규약 따로 만듬
Cascading Style Sheets
Software Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don't need more than a text editor, but there are many tools available that make it even easier. Of course, all software has bugs, even after several
www.w3.org
초록색에 가까울수록 안정화된 규약, 붉은색에 가까울수록 한창 논의 중인 규약
이중에서 웹사이트를 만드는 주요 CSS 모듈만 공부함
브라우저 접두사(prefix)
-아직 표준 규약이 아닌 속성들 이름 앞에는 접두사를 붙여 모든 브라우저에 보여야 한다
-접두사 붙인 속성을 먼저 쓴다, 표준이 정해진 후 사용할 속성은 마지막에 쓴다
-모든 브라우저에 똑같은 결과 만들어내기 위해서이다
자동으로 접두사 붙이기
- prefixfree.mini.js 파일을 다운해서 같은 폴더 안에 저장한다
-<script>태그 이용해서 연결한다
<script src="prefixfree.mini.js"></script>
<style>
.box: hover {
transform: rotate(15deg);
}
</style>
'CSS' 카테고리의 다른 글
| Do it : CSS - 8.박스 모델 (0) | 2020.09.11 |
|---|---|
| Do it : CSS -6.텍스트 관련 스타일 (0) | 2020.09.09 |
| 드림코딩 엘리 : CSS 레이아웃 정리 (0) | 2020.09.01 |
| 드림코딩 엘리 : CSS 셀렉터, 기초이론 정리. (0) | 2020.08.31 |
| 생활코딩 : CSS 정리 -2.박스모델, 중복의 제거, 크롬stylebot (by 웹 어플리케이션 만들기) (0) | 2020.08.29 |