CSS(Cascading Style Sheet)란?
- W3C가 개발한 스타일 시트 언어
- HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술함.
HTML로 웹 페이지를 만들 수 있게 됨과 동시에, 당연하게도 사람들은 내 웹 페이지를 예쁘게 꾸미고 싶은 욕구를 가지게 됩니다. 이러한 이유로 등장한 HTML 태그에는 <font>, <i>, <b> 등이 있습니다.
이러한 태그들은 얼핏 봐도 큰 문제가 있습니다. 만약에 내가 꾸미고 싶은 태그가 100개가 된다면, 또는 극단적으로 그 이상이 된다면 이런 디자인 관련 태그들을 모두 적어줘야 한다는 점입니다. 이런 편의성 문제를 제외하더라도, 이런 디자인 관련 태그들은 HTML 문서가 나타내고자 하는 정보가 아니기 때문에, 문서의 질이 떨어지게 됩니다.
이러한 이유 때문에, WC3에서는 HTML에서 디자인적인 요소를 분리해 보다 구조화된 문서를 만들기 위해 CSS를 개발해 발표하게 됩니다.
CSS 사용법
css의 작성 방법은 다음과 같습니다.
h1 {
font-size: 50;
color: red;
}
p {
font-weight: 600;
color: orange;
}
/* 태그명(class, id 명...){
속성: 값;
속성: 값;
....
속성: 값
}
<태그명(class, id 명...)>: 내가 스타일을 주고 싶은 태그를 다양한 방법으로 지정
<속성: 값>: 중괄호{} 안에 작성하며, 정하고 싶은 스타일 속성과 그 값을 정한다.
만약 여러 속성을 정하고 싶으면 값 뒤에 ;를 붙여 속성들을 구분한다(마지막은 생략 가능)
*/
태그의 클래스, id에 대해서는 추후 서술하도록 하겠습니다.
작성한 css를 HTML 문서에 적용하는 방법은 아래와 같습니다.
1) <style> 태그
HTML 문서의 <head> 태그 안에 <style> 태그를 사용할 수 있습니다. 이 스타일 태그 안에서 "태그명(클래스, id명...){스타일 속성}"의 형식으로 작성할 수 있습니다.
2) 외부 CSS 파일 import
또는 원하는 경로에 ".css" 확장자의 파일을 만들고 css를 작성한 다음, 적용시키고자 하는 HTML 문서 <head> 태그 안에 <link> 태그를 사용해 import 할 수 있습니다.
<link rel="stylesheet" type="text/css" href="./hi.css">
<!-- rel: 현재 리소스와 외부 리소스의 연관관계를 명시
rel="stylesheet": 외부 스타일시트(css 파일)를 불러옴=> 필수 속성
type: 링크된 외부 리소스의 미디어 타입을 명시(href 속성이 있어야만 사용 가능)
html5에서는 생략 가능(생략하는 것을 권장)
href: 불러올 외부 리소스의 경로
-->
3) 태그에 직접 사용
또는 스타일을 적용하고 싶은 태그의 시작 부분 안에 직접 작성하는 방법이 있습니다.
이 경우는 해당 태그에만 스타일이 적용됩니다.
위와 같은 방법으로 css를 사용해 HTML 문서를 보다 아름답게 꾸밈과 동시에, <font> 등과 같은 태그를 사용해서 발생하는 문제점을 개선할 수 있습니다.
또한, 따로 css를 파일로 분리해 import 하는 방식을 활용하면 웹 사이트에 사용되는 모든 HTML 문서들이 공통으로 사용하는 스타일들을 하나의 css 파일에 정리해 두고 각 문서에 <link> 태그만 추가하면 되기 때문에 코드 작성 시간을 단축시키고 재사용성을 크게 높일 수 있습니다.