[Web] CSS(Cascade Style Sheet) - 1

CSS(Cascade Style Sheet) - 1

HTML을 설명하는데 있어서 뗄레야 뗄수 없는 관계 바로 CSS이다

CSS는 HTML과 다른 독립적 언어임에도 불구하고, 개별적으로 사용되기 어렵다.

이유는 CSS가 HTML을 디자인하기 위해 제작되었기 때문이다.

초기에는 HTML에도 디자인을 담당하는 태그가 있었으나 현재는 CSS에 흡수 되었다.

쉽게 말해 웹페이지에서 HTML은 정보를, CSS는 디자인을 담당한다고 할 수 있다.

이러한 CSS를 HTML문 내에서 구분할수 있게 만드는 것은 <Style>태그이다.

상단에서부터 브라우저는 HTML 코드를 읽다가 <Style>이 나오는 순간 CSS 코드임을 인식한다.

범위는 </Style>이 나올 때 까지이다.

<style> 내부의 문법은 다음과 같다.

먼저 선택자는 누구에게 스타일을 적용할 것 인가를 나타낸다.

서술은 어떤효과를 적용할것인가를 나타낸다.

마지막으로 이를 통틀어 속성이라고 부른다.

  

 

간단한 예제를 통해 CSS를 배워보도록 하자

먼저 다음과 같이 코드를 작성 했을때 결과는 우측과 같다.

   

 h1과 h2에 폰트 크기와 색상을 부여했다.

결과는 우측과 같다.

  

다음은 h2에 개별적으로 밑줄을,

header로 지정된 h1에 외곽선을 그리는 코드이다.

이와같이 <Style> 내부에서 CSS 코드를 이용하여 웹페이지를 디자인할 수 있다.