CSS란 웹문서의 모양과 위치를 지정할 수 있는 언어(?)
CSS를 통해 스타일을 미리 저장해 두면 웹페이지의 전체 내용이 한꺼번에 변경되어 작업시간의 단축 및 문서 전체의 일관성 유지에 편리하다.
간단히 개념정리를 해보자면 HTML은 웹문서의 내용 작성, CSS는 웹문서의 모양, JavaScript는 웹문서에서 제공하는 액션이다.
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.
[네이버 지식백과] CSS [cascading style sheets] (두산백과)
CSS (Cascading style sheets)의 작성규칙
CSS 는 HTML요소와 규칙의 연결에 의해 동작한다.
선택자와 선언(프로퍼티와 값)
ex) p {font-family:Arial;}
p : 선택자
{} : 선언
font-family : 프로퍼티, 세미콜론으로 구분하여 여러 프로퍼티를 지정가능.
Arial : 값
1.대문자와 소문자를 구별하지 않는다.
(단, ID와 Class속성값은 구분)
2.인용부호("")로 둘러싸인 부분은 문자열로 해석된다.
3.주석표시
HTML의 경우 <!-- 주석 -->
CSS /* 주석 */
CSS의 지정방식
css는 그 지정방식이 몇가지 있습니다.
내부 CSS 사용
<style> : <head>영역에 <style>을 지정하는 방식
ex)
<style type="text/css">
body{font-family:arial;}
h1{color:red;}
</style>
외부 CSS 사용
<link> : 외부파일을 만들어 연결하여 head영역에 선언하는 방식
ex)
<link href="main.css" type="text/css" rel="stylesheet"/>
href : CSS파일의 경로. 대체로 css or styles 폴더에 위치
type : 연결할 문서의 타입. 값은 text/css
rel : HTML 페이지와 연결된 파일간의 관계지정. CSS파일과 연결할때는 값이 stylesheet 여야 한다.
인라인 스타일 : 태그에 직접 스타일을 부여한다.
<h1 style="color:red;">본문내용</h2>
임포트방식
@i-port url("main.css");
CSS의 선택자
HTML문서에 있는 특정 요소에 규칙을 적용할 수 있는 다양한 타입의 CSS선택자(selector)가 있다.
전체 선택자 / 타입선택자 / class선택자 / id 선택자 등등
'웹디자인관련 > HTML/CSS' 카테고리의 다른 글
| HTML tag <a> (0) | 2015.11.30 |
|---|---|
| CSS menu 샘플을 구할 수 있는 사이트 (0) | 2015.10.07 |
| table 만들기와 usemap (0) | 2015.09.30 |
