04 CSS의 기본 문법

CSS >>

Cascading Style Sheet

(종속형 시트)

(캐스케이딩 스타일 시트)

 

1.

03장에서 말했듯이,

HTML과 CSS는 완전히 다른 언어이므로,

웹 페이지에 CSS를 포함시킬 때는 웹 브라우저로 하여금

어디서부터 어디까지가 CSS 인지를 알려줘야 한다.

 

2.

<style> 태그가 그런 역할을 한다.

 

 

다른 방법으로는 태그를 통하는 것이 아니라, 속성을 이용하는 방법 이다.

 

3.

 

 

위와 같은 코드로는 웹 브라우저 입장에서,

color:blue 부분이 HTML인지 ? CSS인지 알 수 없다.

 

그래서, HTML과 CSS를 만든 사람들은,

위 태그에 대해 CSS 효과를 주고 싶으면 style 이라는 속성을 사용하기로 약속 했다.

 

 

style = "color:blue" 를 하게되면, 페이지의 CSS 라는 글자가 파란색이 된다.

 

 

이는, <a> 태그에 지정한 style 이라는 속성이라고 말할 수 있다.

 

style 이라는 속성을 사용하면, 그 속성의 값을 

웹 브라우저가 CSS 문법에 따라 해석해서 그 결과를 style 속성이 위치한 태그에 적용 한다.

 

그리고, style = "" 는 HTML의 속성 이다.

 

뿐만아니라, style 이라는 속성은 값으로 반드시 CSS 효과가 들어온다고 약속이 되어있다.

 

4.

 

 

위의 코드는 <style> 태그고, 효과만 있으면 누구에게 지정할지를 모르니까,

앞에서 말했듯이 대상이 필요 하다.

 

대상은 a 이다.

 

이렇게 효과를 누구에게 줄 것인가를 선택 한다는 점에서

이것을 선택자 라고 부른다.

 

선택자에 지정될 효과를 효과 또는 정의 한다. (선언 한다) 라고 말한다.

 

3과 4를 정리하면,

style 속성을 직접 사용한 경우는,

style 속성이 위치한 태그에 효과를 직접 적용하니까 선택자가 필요 없고

 

style 태그를 사용한 경우는

어디에 효과를 부여할것인지 대상이 있어야 하기 때문에, 선택자가 필요 하다.

 

즉,

정리하면, 웹 페이지 안에 CSS를 삽입하는 두가지 방법은

 

<style> 태그를 쓰기 

랑

style 속성을 쓰기

 

두가지 이다.

 

5.

 

파랑 글씨 CSS를 누르면 어딘가의 링크를 타고 들어가게 되는데,

디폴트 세팅으로 밑줄이 쳐져있는 모습을 확인할 수 있다.

 

만약에, 이 밑줄이 보기 싫어져서 없애고 싶다면 ?

 

CSS를 이용해 링크에 밑줄을 없앨 수 있다.

 

 

text-decoration : none; 을 a 선택자 내부에 넣으면

모든 a태그에 대한 밑줄이 없어진다.

 

 

세미콜론 ( ; ) 이란 ?

 

세미콜론이 없다 치고 한 줄로 계속 쓰면 각 줄을 구분할 수 없다.

 

즉, 세미콜론은 구분자 이다.

 

효과를 지정한 다음에 세미콜론을 적으면 된다.

 

6.

 

정리 >>

 

1)

웹 페이지에 CSS를 삽입하는 방법으로

두가지 방법이 있다.

 

>> <style> 태그를 사용하기

>> style 속성을 사용하기

 

2)

하나의 선택자에 여러 개의 효과를 지정할 수 있다.

이때, 세미콜론으로 구분을 지어주기.