... [CSS] 하고 CSS라고하면 먼가 이상할 것 같아서 거창하게 이름을 붙여봤다.
그러면 웹을 디자인하는 CSS에 대해서 알아보도록하자.
1. CSS란?
- Cascading Style Sheet의 약자로 HTML문서가 어떻게 화면에 나타내는지에 대해서 기술한다.
- 기존에 HTML에서 style을 구현시 관리 유지 비용이 많이 드는 것에 의해 이를 방지하기 위해 만들어졌다.
- 관리 유지 비용을 줄이기 위해 만들어진 것 만큼 작성및 관리 유지를 편하게 해주었다.
2. CSS의 문법
- CSS의 문법의 형식은 다음과 같다 : SELECTOR{PROPERTY:VALUE;}
ⓐ selector : 디자인 될 테그를 선택한다.
ⓑ declaration : property+value를 의미 하며 선택된 태그에 적용할 스타일을 작성해준다.
- /* 주석 */
3. Selector
html문서 하나에는 수많은 tag가 존재 할 것이다. 이것을 선택하는 방법에 대해서 알아보자
- 종류
ⓐ id(html에서 지정한 특정 테그의 id값) : 문서내에서 유일해야 된다.
> 형식 : #name
ex) #mainp : mainp라는 id를 가진 테그선택
ⓑ class(html에 지정한 특정 테그의 class값) : 문서내 여러번 등장하며 해당 클래스 값을 가진 것에 모두 적용
> 형식 : .name
ex) .select : select라는 class값을 가진 모든 태그 선택
ⓒ tag : 말 그대로 태그 모든 것을 가르킨다.
> 형식 : name
ex) div : div 테그에 모두 적용
- selector의 조합
ⓐ p.box : p 태그중에서 클래스 이름이 box인 테그를 모두 선택
ⓑ p#box : p 태그중에서 id 값이 box인 테그 선택
ⓒ p.box, p.line : p태그중 class가 box또는 line인 태그를 모두 선택 (',' : or의 개념)
ⓓ p div : p tag 아래 있는 모든 div
ⓔ p > div : p tag 아래에 있는 div중 가장 처음에 오는 div
4. CSS의 적용
이제 열심이 만든 CSS를 적용하는 방법에 대해서 알아보자. 3가지의 방법이 있지만 맨 위의 방법을 추천한다.
- External style sheet : 지금 우리가 추가하는 것으로 html과 완전히 분리한 css파일을 link해서 사용하는 것
> 해드테그에 다음과 같이 작성하여 임폴트한다.
> <link rel = "stylesheet" type = "text/css" href = "cssfile">
- Internal style sheet : html문서내에 style 태그를 사용하여 작성해준다. 따로 css파일을 두지 않고 스타일 정의
> <style type="text/css" > style정의 </style> 형식으로 html문서내에 구현해준다.
- Inline style : tag속에 직접적으로 구현하는 것 (안좋다!!)
> <p style = "font-size:12pt">...<p>
그러면 웹을 디자인하는 CSS에 대해서 알아보도록하자.
1. CSS란?
- Cascading Style Sheet의 약자로 HTML문서가 어떻게 화면에 나타내는지에 대해서 기술한다.
- 기존에 HTML에서 style을 구현시 관리 유지 비용이 많이 드는 것에 의해 이를 방지하기 위해 만들어졌다.
- 관리 유지 비용을 줄이기 위해 만들어진 것 만큼 작성및 관리 유지를 편하게 해주었다.
2. CSS의 문법
- CSS의 문법의 형식은 다음과 같다 : SELECTOR{PROPERTY:VALUE;}
ⓐ selector : 디자인 될 테그를 선택한다.
ⓑ declaration : property+value를 의미 하며 선택된 태그에 적용할 스타일을 작성해준다.
- /* 주석 */
3. Selector
html문서 하나에는 수많은 tag가 존재 할 것이다. 이것을 선택하는 방법에 대해서 알아보자
- 종류
ⓐ id(html에서 지정한 특정 테그의 id값) : 문서내에서 유일해야 된다.
> 형식 : #name
ex) #mainp : mainp라는 id를 가진 테그선택
ⓑ class(html에 지정한 특정 테그의 class값) : 문서내 여러번 등장하며 해당 클래스 값을 가진 것에 모두 적용
> 형식 : .name
ex) .select : select라는 class값을 가진 모든 태그 선택
ⓒ tag : 말 그대로 태그 모든 것을 가르킨다.
> 형식 : name
ex) div : div 테그에 모두 적용
- selector의 조합
ⓐ p.box : p 태그중에서 클래스 이름이 box인 테그를 모두 선택
ⓑ p#box : p 태그중에서 id 값이 box인 테그 선택
ⓒ p.box, p.line : p태그중 class가 box또는 line인 태그를 모두 선택 (',' : or의 개념)
ⓓ p div : p tag 아래 있는 모든 div
ⓔ p > div : p tag 아래에 있는 div중 가장 처음에 오는 div
4. CSS의 적용
이제 열심이 만든 CSS를 적용하는 방법에 대해서 알아보자. 3가지의 방법이 있지만 맨 위의 방법을 추천한다.
- External style sheet : 지금 우리가 추가하는 것으로 html과 완전히 분리한 css파일을 link해서 사용하는 것
> 해드테그에 다음과 같이 작성하여 임폴트한다.
> <link rel = "stylesheet" type = "text/css" href = "cssfile">
- Internal style sheet : html문서내에 style 태그를 사용하여 작성해준다. 따로 css파일을 두지 않고 스타일 정의
> <style type="text/css" > style정의 </style> 형식으로 html문서내에 구현해준다.
- Inline style : tag속에 직접적으로 구현하는 것 (안좋다!!)
> <p style = "font-size:12pt">...<p>