[두잇 HTML5+CSS3 웹표준의 정석] CSS Part5
CSS 기초
왜 스타일을 사용할까?
1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다
-웹 문서 내용과 디자인이 구분되어 있기 때문에 사이트 내용을 수정해야 할 때도 디자인에 전혀 영향 미치지 않고 내용수정만 가능하다.
2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다
-대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있습니다.
스타일 형식
p { text-align: center; }p 를 선택자/셀렉터, text-align: 을 스타일 속성, center; 을 속성 값이라고 한다.
- 스타일 속성에는 : (콜론)이 붙고, 속성 값에는 ; (세미콜론)이 붙는다.
스타일을 표기하는 방법
아래의 소스는 모두 다 같은 소스이지만 공백의 차이이다. 공백을 최소화 하면 파일 크기를 작게 만들고, 개발자가 읽기 쉽고 유지.보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋다.
h2{font-size:20px; color:orange;}h2{
font-size:20px;
color:orange;
}h2
{
font-size:20px;
color:orange;
}
스타일 주석
: 소스에 대한 설명을 덧붙여 이해하기 쉽게 만든다.
/* 설명을 적는다 /
내부 스타일 시트
- 스타일 정보를 <head> </head> 태그 안에, <style> </style> 태그 사이에 작성한다
외부 스타일 시트
- 각 문서마다 똑같은 스타일 시트를 만든다면 서버 공간은 물론 문서를 다운로드하는 시간까지 낭비하게 된다. 그렇기 때문에 스타일을 별도 파일로 저장해놓고 필요할 때마다 사용하는 것이다. 외부 스타일 시트는 .css라는 파일 확장자를 사용한다.
< link rel="stylesheet" href="외부 스타일 파일 경로">
인라인 시트
- 간단한 스타일 정보일 경우 스타일을 적용할 대상에 직접 표시한다.
style="속성: 속성값;"
주요 선택자
전체 선택자
: 모든 요소에 스타일 적용하기
-스타일을 모든 요소(웹 문서 전체)에 적용할 때 사용합니다.
* (별표)를 사용한다
태그 선택자
: 특정 태그를 사용한 요소에 스타일 적용하기
태그{ 스타일 }
태그와 요소는 어떻게 다를까?
태그는 말 그대로 태그 자체를 가리키고 요소는 태그가 적용된 것을 가리킨다.
<p> 텍스트 단락을 지정하는 태그 </p>
: <p></p>가 태그이고 '텍스트 단락을 지정하는 태그'를 요소라고 부른다
클래스 선택자
: 특정 부분에 스타일 적용하기
- 같은 태그라도 어떤 곳에서는 다른 스타일을 사용하고 싶을 때 특정 부분에만 스타일을 적용하는 것을 클래스 선택자라고 한다.
클래스 이름은 임의로 지정하면 되고 스타일시트에서 반드시 이름앞에 .(마침표)를 붙여야한다.
.bluetext{
color:blue;
}* 텍스트 일부에만 클래스 스타일을 적용할 땐 <span>태그를 사용한다*
<style>
.bluetext[
color:blue;
}
</style>
<h2 class="bluetext"> 이지스퍼블리싱의 미션 </h2>
<p>사람에게 구체적으로 <span class="bluetext">도움을 주는 책</span></p>*같은 태그이지만 적용되는 스타일이 다를 때*
<style>
h2.accent{
background-color:#222;
color:#fff;
padding:5px;
}
</style>
<h2 class="accent"> ㅇㅇㅇ </h2>
...
<h2 class="bluetext"> xxx </h2>* 한꺼번에 둘 이상의 클래스 스타일을 적용할 수 있다. 공백으로 구분해서 두개의 스타일을 나란히 적는다*
<style>
.browntext{
color: brown;
}
.boldtext{
font-weight: bold;
}
</style>
<h2 class="accent">사람을 구체적으로 도와주는 책</h2>
<p>이지퍼블리싱의 책에는 <span class="browntext boldtext"> 사람들에게...
id 선택자
: 특정 부분에 스타일 적용하기
- 클래스 선택자와 마찬가지로 특정부분에 스타일을 지정하며 #기호를 사용한다.
클래스와 사용법은 같지만 큰 차이는 클래스 선택자는 문서 안에서 여러번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한번만 적용할 수 있다. 중복이 안되기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정할 때 자주 사용한다.
그룹 선택자
: 둘 이상 요소에 같은 스타일 적용하기
- 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 된다.
h1, h2{
text-align:center;
}
캐스케이딩 스타일 시트
스타일 우선순위
1.인라인 스타일 - 2.id 스타일 - 3.클래스 스타일 - 4.태그 스타일
-인라인 스타일을 지정하더라도 태그 스타일을 정의할 때 !important를 사용해 중요 스타일로 지정해여 인라인 스타일보다 우선순위가 높아진다.
<style>
h2{
color:brown !important
}
</style>
스타일 상속
- 웹 문서에서 사용하는 여러태그들은 서로 포함 관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식요소라고 한다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식요소로 전달되는데 이걸 스타일 상속이라 한다.
* 단, 배경색과 이미지는 스타일이 상속되지 않는다. *