CSS란? (HTML과 CSS의 차이)
CSS는 Cascading Style Sheets 약자로,
HTML, XHTML, XML 같은 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어입니다.
HTML로 문서의 뼈대를 만들면
CSS는 이 문서의 화장을 맡고 있는 셈인데요.
글꼴이나, 배경색, 너비와 높이, 위치 등을 지정하거나,
웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정할 수도 있습니다.
CSS는 1996는 12월 W3C(웹 문서 표준을 만드는 기관)가 도입 했는데
그 전엔 HTML언어 하나로 문서의 뼈대도 만들고, 꾸밈도 같이 했습니다.
그러다 보니 HTML 문서를 수정할 때 모든 문서를 하나씩 수정해야 하는 번거로움이 있었습니다..
CSS는 문서의 내용(content)과 표현(presentation)을 분리하여
CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정되는 엄청난 장점이 있습니다~
[이미지출처:html.net]
[스타일을 꾸미는 법]
스타일을 꾸미는 방법은 세 가지가 있는데요,
1. 속성처럼 style 적용
2. style tag를 사용
3. css 파일을 별도로 만들어 html 문서에 연결.
이중 여러 문서를 수정하기엔 2, 3번이 좋으며, 그 중에서도 3번으로 작성하는 것이
제일 좋습니다.
1. HTML 문서 안에 style 속성을 사용함 (In-line)
|
<html> <h1 style="color:blue; text-align:center;"> CSS 첫번째 강좌</h1> </body> |
2. style 태그를 사용함 (Internal)
|
<html> color: blue; text-align:center; } </head> <h1>CSS 첫번째 강좌 </h1> </body> |
3. css 파일을 별도로 만들어, html 문서에 연결 시킴 (External)
㉠확장자 .css로 저장 (예:test.css)
|
color: blue; text-align:center; } |
㉡확장자 .htm으로 저장(예:main.htm)
|
<html> </head> css 첫번째 강좌 |
[css 실행 화면]
[CSS 작성법]
css 작성법은 다음과 같습니다.
|
|
예문:
|
color: blue; text-align:center; } |
html 작성 방법과 다르다는 점 유의해주세요!
열고 닫기는 { } 를 사용하며
하나의 속성값이 끝날 때마다 세미콜론 ; 을 씁니다.
중괄호를 연 후 태그를 밑에 쓰는 것은, 코드 작성 시 오류를 줄이기 위해서입니다....
아래 처럼 작성해도 틀린 것은 아닙니다~
예문:
|
|
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)
[HTML 기초] head 에 들어가는 태그 (title, style, script, meta 태그)
'css' 카테고리의 다른 글
| DIV 태그를 이용하여 레이아웃 만들기 (1) | 2014.03.19 |
|---|---|
| [css 기초] float 속성에 대하여 (3) | 2014.03.18 |
| [html/css] span, div 태그 차이 (1) | 2014.03.14 |
| [html/css기초] span, div (0) | 2014.03.11 |
| [HTML, CSS 기초] class, id 선택자 (6) | 2014.03.10 |
댓글