CSS란?

CSS

CSS(CAscading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치이다. HTML은 틀을 담당하고, CSS 는 장식을 담당한다고 생각하면 된다. 

즉, CSS를 활용해서 글꼴,배경색, 너비높이, 테두리 등 여러가지를 지정할수있다.

그래서 그런지, CSS 를 '스타일시트'라고도 부른다.

 

예전에는 HTML 에서 꾸미는 역할도 담당해서 HTML 문서를 수정할때 일일히 수정해야 하는 번거로움이 있었지만, CSS를 활용해서 틀과 장식부분을 분리해 그런 부담을 줄였다. css 파일에 스타일시트를 다 모아두어서 틀과 장식을 분리해서 활용하면 css 파일을 수정하면 HTML 전체가 수정되는 엄청난 장점이 있다.

 

---

CSS 작성하는 방법

CSS를 작성하는 방법에는 크게 세가지가 있다.

1. style 속성으로 지정하는 방법

2. style 요소를 사용해 동일한 파일안에서 지정하는 방법

3. 외부 파일로부터 읽어 들이는 방법(css 파일 만들어서 적용)

 

이중 CSS 의 장점을 살린다면 3번 방법이 가장 좋다

 

---

1. style 속성으로 지정하는 방법

 

HTML 태그 안에 style 속성을 지정하여 요소에 스타일을 적용한다. 꾸밀 곳에 하면 된다.

 

<div style = "color:red;">적용!</div>

 

이런식으로 body 태그에 넣으면 적용이 된다.

적용!

 

 

---

2. style 요소를 사용하여 동일한 파일 안에서 지정하는 방법

이번 방법은 head 태그에 style 를 넣어서 body 태그 안의 내용전체에 적용시키는 방법이다.

모든text에 빨간색으로 적용시켜보자.

head 태그에 <style type="text/css" >  를 넣고 #a1 안에 설정을 하면 된다. 여기서 a1 은 일종의 함수가 된다고 생각하면 된다. 그래서 #a2 ,#a3 로 중가로로 구분만 해준다면 언제든지 적용할 수 있다.

body 태그에서 id="a1" 으로 적용된 경우는 a1 이 글씨를 빨간색으로 설정해놨기 때문에 <p id="a1"> 안에 있는 모든 text 는 적용이 된다. 하지만 id 를 안 넣으면 적용이 안된다.

 

위 HTML 결과

 

---

3. 외부 파일로부터 읽어 들이는 방법

css 파일은 텍스트 편집 프로그램이면 금방 만들 수 있다. 윈도우인 경우는 메모장을 쓰면 된다.

 

이렇게 메모장에다 쓰고 a1.css 라고 저장을하면 css 파일이 하나 만들어진다.

이 css 파일을 html 파일이 있는 폴더에 넣고 코드를 넣으면 적용이 된다. href 에 경로를 써도 된다.

실행을 시키면 다음과 같이 나온다.

 

 

 

 

 

 

섬뜩하게 생겼지만 어쨋든 적용이 되었다!

 

 

각자 적용해야 하는 일도 가끔 있지만 자주 써야 하는 꾸미기 방식이라면 미리 css 파일을 만들고 3번과 같은 방법으로 적용하는 것을 추천한다.