CSS를 html 문서에 적용하는 방법

티스토리 뷰

프로그래밍/CSS

rlawlstjd007 2016. 7. 17. 22:14

CSS를 본격적으로 적용하기 위해선 html 문서에 적용을 해야겠죠? 그래서 이번에는 HTML 문서에 CSS를 적용하는 방법을 알아보겠습니다. 크게는 3가지 방법이 있습니다.

1. 인라인 방식( Inline Style Sheet)

- HTML태그에 직접 style 속성을 집어넣는 방식입니다. 태그 단위로 적용되기 때문에 재사용이 불가능 하다는

단점이 있습니다. 하지만 CSS 적용 룰에서는 가장 높은 순위로 적용이 됩니다. ( 이 내용은 뒤에서 설명하겠습니다. )

- 이런 식으로 사용하며 해당 태그(위에서는 P)가 선택자가 됩니다. 그리고 CSS에는 속성(property) 와 값(value)가

들어갑니다. 여러 속성을 사용할 때는 세미콜론( ; ) 으로 추가합니다.

2. 내부 스타일 시트 ( Internal Style Sheet )

- HTML 문서 안의 <style> 태그 안에 CSS를 기입하는 방식입니다. 이 방법은 한 문서안의 여러 요소를 꾸밀수 있지만,

해당 문서안에서만 해당 되기 때문에 다른 문서에는 적용할수 없다는 단점이 있습니다.

- <style> 태그는 보통 <head> 태그 안에 넣습니다. 위와 같은 방식으로 CSS를 적용하며 보시다 싶이 body, #center가

선택자입니다. 속성과 값은 콜론( : )으로 구분합니다. 위 그림에는 넣진 않았지만 스타일 시트를 지원하지 않는 브라우저가

있는 경우를 위해서  의 주석을 넣기도 합니다.

3. 외부 스타일 시트 ( Linking Style Sheet )

- 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방식입니다. 이 방식은 CSS 파일만 있다면 여러 HTML문서와

연결만 해주면 되기 때문에 여러 문서에서 사용이 가능하다는 장점을 가지고 있습니다.

- HTML 문서 상에는 위와 같이 <head> 태그 안에 기입하며 <link> 태그를 이용해서 연결해주게 됩니다.

별도의 style.css 파일을 만들고 href 속성안에 css 파일의 경로를 적어주게 됩니다.

기본적으로 href의 경로의 시작점은 html 문서가 속해있는 경로가 됩니다.

위 같은 경우에는 같은 폴더 안에 style.css 파일이 있음을 알수 있고 만약 style 이라는 폴더를 만들고

css 파일을 이 곳에 넣었다면 경로는 "style/style.css" 이 됩니다.

이를 상대경로 라고 하고 절대 경로로도 적어주어도 됩니다.

- CSS 파일 안에서는 별도의 선언 없이 CSS 문법 대로 선택자에 스타일을 적용해주면 됩니다.

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함