스타일과 스타일시트
한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것을 ‘스타일 시트’라고 부른다.
스타일을 사용하는 이유
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- 다양한 기기에 맞게 탄력저그올 바뀌는 문서를 만들 수 있다.
스타일 형식
1
2
3
선택자 {
스타일속성: 속성값;
}
- 선택자(selector): 앞으로 만들 스타일 규칙을 어디에 적용할 것인지 나타낸다.
- 중괄호 안에 들어가는 속성과 속성 값은 콜론으로 구분해
속성: 속성값과 같은 형식으로 표시하며,;로 구분한다.
스타일을 표기하는 방법
파일 크기를 작게 만들기 위해서는 한 줄로 표기하지만 개발자가 읽기 쉽고 유지보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋다.
스타일 주석
/* */ 안에 주석을 넣는다.
스타일과 스타일시트
- 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데에 묶어 놓은 것을 스타일 시트라고 한다.
스타일 시트의 종류
- 내부 스타일 시트
- 문서 안에서 사용할 스타일을 문서 안에 정리
- 웹문서를 화면에 표시하기 전에 결정되어야 하므로
<head>안의<style>태그 안에 정의한다.
- 외부 스타일 시트: 스타일 파일을 만들어 연결해 사용
- 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없다.
- 디자인의 일관성을 위해 같은 스타일을 여러 웹 문서에 적용한다.
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적이다.
<link rel="stylesheet" href="외부 스타일 파일 경로"@import를 사용해 연결할 수도 있다.
- 인라인 스타일
- 간단한 스타일 정보는 스타일을 적용할 대상에 직접 표시
- 태그에
style="속성: 속성 값;"형태로 스타일을 바꿀 수 있다.
1
2
3
4
5
6
7
<h1>블루베리와 항산화 효능</h1>
<p style="color:blue;">
블루베리는...
</p>
<p>
어쩌구..
</p>
주요 선택자
전체 선택자: 모든 요소에 스타일 적용하기
주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.
태그 선택자: 특정 태그를 사용한 요소에 스타일 적용하기
tag selector: 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
태그와 요소의 차이점
<p> 텍스트 단락을 지정하는 태그 </p>에서<p>와</p>가 태그이고, “텍스트 단락을 ~ 태그”가 요소이다. 따라서 “p태그에 적용되는 스타일”이란 말은 틀렸고,”p요소에 적용되는 스타일”로 표현하는 것이 맞다.
클래스 선택자: 특정 부분에 스타일 적용하기
특정 부분에만 스타일을 적용할 때 사용한다. class="bluetext"처럼 적용해 어느 태그에서나 사용할 수 있다.
특정 태그에만 클래스 선택자를 적용하고 싶다면 클래스 선택자 앞에 태그 이름을 함께 써서 클래스 스타일을 적용할 수 있다. h2.accent처럼 태그 이름과 클래스 스타일 이름을 하나의 선택자로 사용한다
한꺼번에 둘 이상의 클래스 스타일을 적용할 수도 있다. 이 경우 공백으로 구분해서 두 개의 스타일을 나란히 적는다.
id 선택자: 특정 부분에 스타일 적용하기
클래스 선택자는 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있다. 이런 이유로 id 선택자는 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소를 구별하기 위해 자주 사용한다.
1
2
3
4
5
#container {
width:600px;
padding:15px;
boarder:1px dotted gray;
}
1
2
3
<div id="container">
</div>
그룹 선택자: 둘 이상 요소에 같은 스타일 적용하기
여러 선택자에 같은 스타일이 사용되는 경우 쉼표로 구분해 여러 선택자를 나열한 후 스타일은 한 번만 정의한다.
1
2
3
4
5
6
h1 {
text-align:center;
}
h2 {
text-align:center;
}
1
2
3
h1, h2 {
text-align:center;
}
캐스케이딩 스타일 시트
캐스케이딩(Cascading)
- 위에서 아래로 흐르는 스타일 시트
- 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼 지 결정함
- 스타일간의 충돌을 막기 위한 방법이다.
- 원칙
- 스타일 우선순위
- 스타일 상속
스타일 우선순위
어떤 스타일을 먼저 적용할 것인지 결정하는 규칙으로, 다음 세 가지 규칙을 따른다.
얼마나 중요한가; Importance
사용자 스타일 시트가 최우선
사용자 스타일 시트: 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트
윈도우의 고대비 설정 기능을 이용하면 검정 배경과 흰색 글자로 바뀌고 이것이 사용자 스타일 시트로 저장된다. 이 스타일 시트는 시스템을 통해 만들어진 것으로 제작자가 제어할 수 없다.
제작자가 만든 스타일 중
!important가 붙은 스타일제작자 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 이때 어느 스타일보다 최우선으로 적용해야 할 스타일에는
!importance를 붙인다.제작자가 만든 일반 스타일
기본적인 브라우저 스타일 시트
브라우저들마다 기본저긍로 지정하고 있는 스타일이다. 예를 들어 스타일 시트에서 글자 색을 따로 지정하지 않으면 검은색으로 표시되는데 이것은 브라우저에서 기본적으로 글자색을 검정으로 지정하고 있기 때문이다.
적용 범위가 어디까지인가; Specificity
- 인라인 스타일
- id 스타일
- 클래스 스타일
- 태그 스타일
소스에서의 순서; Source Order
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
body {
color:blue;
}
h2 {
color:brown !important;
}
</style>
<body>
<div id="container">
<h2 style="color:green">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책 어쩌구</p>
<p style="color:red; font-style:italic;">이 책이 사람들에게..</p>
</div>
</body>
<h2>의 요소인 ‘이지스퍼브리싱의 미션’은 인라인 스타일을 사용했지만 갈색으로 나타난고 있다. 태그 스타일을 정의할 때 !important를 사용해 중요 스타일로 지정하여 인라인 스타일보다 우선순위가 높아졌기 때문이다.
스타일 상속
포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속이라고 한다.
이 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다. 모든 텍스트에 같은 글꼴을 사용하려면 <body> 태그에 글꼴 스타일을 작성하면 이하의 자식 요소에 같은 글꼴이 적용되기 때문이다.
다만, 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다. 글자 색은 상속되지만 부모 요소의 배경 이미지나 배경 색은 자식 요소에 상속되지 않는다. 만약 body에 배경 이미지가 사용되었을 때 자식 요소에도 배경 이미지가 상속된다면 배경 이미지가 수없이 반복될 것이다. 즉 자식 요소의 배경 색이나 배경 이미지는 상속되지 않고 기본 값인 ‘투명’으로 지정된다.
부모 요소로부터 상속했지만 자식 요소에서 다른 글꼴을 사용하려면 어떻게 해야 할까? 이렇게 스타일끼리 충돌이 생길 경우, 우선수위에서 설명했던 명시도나 소스 순서 등에 따라 해결한다.
CSS3와 CSS 모듈
CSS3
HTML5가 개발되면서 CSS3 기술도 함께 개발되고 있는데 CSS3은 이전보다 정교하고 화려한 화면을 구성할 수 있고, 애니메이션까지 지원한다.
CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있기 때문에 덩치가 크고 복잡해 한 번에 업데이트하기 쉽지 않다는 단점이 있었다. 그래서 CSS3부터는 배경, 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었다. 이를CSS 모듈이라고 한다. 모듈은 완성된 것도 있고, 개발 중인 것도 있고, 제안 단계인 것도 있다. 브라우저에 따라 지원되는 기능도 있고 아닌 것도 있다.
이처럼 모듈별로 진행 속도도 다르고 필요에 따라 새로운 모듈이 생기기 때문에 CSS3은 한번에 표준 규약이 결정되지 않는다. www.w3.org/Style/CSS에서 완료되었거나 진행중인 CSS 규약을 확인할 수 있다.
CSS3와 브라우저 접두사(prefix)
아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 한다.
-webkit-: 웹키드 방식 브라우저용(사파리, 크롬)-moz-: 게코 방식 브라우저용(모질라, 파이어폭스)-o-: 오페라 브라우저-ms-: 마이크로소프트 인터넷 익스플로러
각 브라우저 접두사를 붙인 속성을 먼저 쓰고 표준이 정해진 후 사용할 속성을 맨 마지막에 사용한다. 나중에 표준 속성이 결정된 후 앞에 썼던 브라우저 접두사가 붙은 속성들만 지우면 된다.
예를 들어 화면을 3단으로 편집할 때 사용하는 column-count라는 속성은 아직 브라우저마다 지원하는 방법이 다르기 때문에 다음과 같이 사용해야 한다.
1
2
3
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
브라우저 접두사 자동으로 붙이기
-prefix-free라는 자바크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않고도 편리하게 CSS3 속성을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<script src="prefixfree.min.js"></script>
<style>
.box:hover {
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">
Mouse Over
</div>
</body>