제1과목 1-9 CSS
페이지 정보
본문
1-9. CSS
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 CSS(Cascading Style Sheet) 이다. 간단히 스타일시트라고도 한다.
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄 간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지보수도 간편하게 할 수 있다.
각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다.
■ 외부 스타일시트 (external) - 외부에 스타일 시트 파일 (확장자 css)을 작성해 놓고 해당 css 파일의 내용이 필요한 웹페이지에서 <link> 요소를 이용하여 연결하는 방법. 예) <link rel=stylesheet type=text/css href=anchor.css>
■ 내부 스타일시트 (=문서 스타일시트 / embeded) - 해당 웹 페이지에 스타일을 정의하고 활용하는 방법.
예)<style type=text/css>
body { background-color:#cdcdcd; font-size:30px; font-family:고딕;}
p {text-align:left; font-size:10px; font-family:궁서;}
.kim {font-family:돋움; color:pink;}
</style>
■ 한줄 스타일시트 (Inline) - 웹페이지의 <body> 요소 내에서 스타일의 정의가 필요한 부분에 html의 style 속성을 이용하여 직접 스타일을 정의하는 방법. 예) <tr style="{background-color:white; line-height:40px;}">