CSS를 정의하는 3가지 방법! 2007/01/19 05:49
CSS를 삽입하는 방법은 크게 3가지로 나눌수가 있습니다.
HTML 문서를 만들면서 적당하게 적용해서 사용할수 있겠지요
(1) 문서의 HEAD에 정의하기
HEAD에 정의할 때는 STYLE element를 사용합니다. type 속성은 반드시 함께 써 주어야 하며 주석 표시는 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위해서 의례적으로 넣습니다.(실재로는 스타일이 제대로 적용되지 않아 이상한 모양으로 나타난다.)
스타일을 정의하는 부분은 { } 안에 넣고, 속성과 값은 콜론(:)으로 구분하며, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분하면 됩니다.
HTML에서와 마찬가지로 대소문자나 빈 칸은 구분하지 않습니다.
(2) style 속성 이용하기
특정한 element에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 1번과 같다.
(3) 외부 스타일시트 연결하기
먼저 다음과 같은 내용을 메모장에 쓰고 "1.css"라는 이름으로 실습한것과 같은 폴더에 저장을 해주세요
h3 {font-style : italic; color : green}
HTML 문서를 만들면서 적당하게 적용해서 사용할수 있겠지요
(1) 문서의 HEAD에 정의하기
 |
실습 (메모장을 열어서 똑같이 따라해 입력해 보세요) |
스타일을 정의하는 부분은 { } 안에 넣고, 속성과 값은 콜론(:)으로 구분하며, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분하면 됩니다.
HTML에서와 마찬가지로 대소문자나 빈 칸은 구분하지 않습니다.
(2) style 속성 이용하기
|
실습 (메모장을 열어서 똑같이 따라해 입력해 보세요) |
특정한 element에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 1번과 같다.
(3) 외부 스타일시트 연결하기
먼저 다음과 같은 내용을 메모장에 쓰고 "1.css"라는 이름으로 실습한것과 같은 폴더에 저장을 해주세요
h3 {font-style : italic; color : green}
|
실습 (메모장을 열어서 똑같이 따라해 입력해 보세요) |
rel은 연결하는 문서가 스타일시트 문서임을 말해주며, type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 줍니다. 아무리 많은 문서를 만들어도 스타일은 1.css 파일에서 모두 정의해 주고, 문서들에는 LINK element만 넣어주면 된다. 수정을 할 때는 1.css 파일만을 고치면 된다.
출처 : (주)오늘과내일 웹호스팅 페이지 http://tt.co.kr
http://monoeyes.com/trackback/11