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 작성 방법과 다르다는 점 유의해주세요!
열고 닫기는 { } 를 사용하며
하나의 속성값이 끝날 때마다 세미콜론 ; 을 씁니다.
중괄호를 연 후 태그를 밑에 쓰는 것은, 코드 작성 시 오류를 줄이기 위해서입니다....
아래 처럼 작성해도 틀린 것은 아닙니다~
예문:
|
'IT기술 > html' 카테고리의 다른 글
| class, id 선택자 (0) | 2017.03.23 |
|---|---|
| HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이) (0) | 2017.03.23 |
| margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2017.03.23 |
| padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (0) | 2017.03.23 |
| table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (0) | 2017.03.23 |
