CSS는 HTML의 구조를 시각적으로 아름다움을 더해줌으로써 접근성 뿐만 아니라 사용자로 하여금 매력적인 웹을 만드는데 중요한 역할을 하는 문서이다.
HTML에 Style을 적용시키기위해 사용하는 CSS는 글자, 여백, 레이아웃 등 시각적으로 보여지는 모든 부분을 처리하기 위한 언어이다. W3C에서 공인한 표준으로써 운영체제나 프로그램에 관계없이 누구나 같은 형식으로 볼 수 있다는 장점이 있다.
CSS의 장점
- 기능확장성 : 단순한 HTML요소들의 기능에 다양한 기능을 추가할 수 있다.
- 양식의 모듈화 : HTML문서와 CSS문서를 따로 관리함으로써 유지보수가 간단하고 코드가 간결해진다.
- 기능성 : 효과적인 레이아웃에 의한 풍부한 디자인 설계가 가능
- 일관성 : 사용환경에 영향을 받지 않는다.
- 웹접근성 향상
CSS의 단점
웹브라우저마다 다른 방식으로 지원.(특히 Internet Explorer가 가장 표준을 잘 지키지 않았으나 지금은 표준을 지키려고 노력하고 있음)
그렇다면 어떻게 CSS를 HTML에 적용시킬까?
스타일 적용에는 4가지 방법이 있다.
1. Inline Style
해당 태그 속에 직접 스타일을 지정해주는 것인데 잘 안쓴다. 그러나 다른 스타일 적용방식보다 우선순위가 높기 때문에 적절히 잘 사용하면 좋다.
2. Embedded Style sheet
HTML문서 내에 <head>안에 <style>태그 안에서 스타일을 지정해준다.
3. Linked style sheet
<head>안에 <link>을 사용하여 외부 CSS파일과 연결
예) <link rel="stylesheet" type="text/css" href="CSS문서">
4. Imported style sheet
style sheet 안에서 다른 style sheet들을 가져오는 기법
실제 HTML에서는 하나의 style sheet만 <link>로 가져온다.
예) @import "CSS문서"; 또는 @import url("CSS문서");
선택자(Selector)
CSS에서 가장 중요한 개념이다. 잘 알아야 스타일을 적절히 원하는데로 지정할 수 있다.
선택자란 HTML의 태그를 선택하는 것을 말한다. 구조적인 문서의 태그를 적절히 선택하여 스타일을 지정해야하기 때문이다.
선택자의 종류에 대해 알아보자.
* : 모든 태그지정
A : 태그 A 지정
.A : 클래스 A태그 지정
#A : 아이디 A태그 지정
복합 선택자
A B : 태그 A로 감싸져 있는 태그 B지정
A>B : 태그 A로 감싸져 있는 태그 B중 한 단계 아래의 태그 지정(부모의 자식 지정)
A+B : 연속된 태그 A와 B를 지정
그외 선택자
E[attr] : attr속성을 지니는 태그 E를 지정
E[attr="attrVal"] : attr속성값이 attrVal인 태그 E를 지정
E[attr~="attrVal"] : attr속성값이 attrVal이고 뒤에 (공백 + 값)으로 지정된 E태그를 지정
E[attr^="attrVal"] : attr속성값이 attrVal로 시작하는 E태그를 지정
E[attr$="attrVal"] : attr속성값이 attrVal로 끝나는 E태그를 지정
E[attr*="attrVal"] " attr속성값이 attVal과 같은 내용이 있는 E태그를 지정
가상 클래스 선택자
A:first-child : A태그 중 첫 번재 자손태그 지정
A:lang(B) : A태그 중 언어가 B인 태그 지정
A:link : A태그 중 link가 걸려있는 태그 지정
A:visited : A태그 중 link가 걸려있고 이미 클릭한 태그 지정
A:active : A태그 중 마우스로 클리한 태그 지정
A:hover : A태그 중 마우스를 올려놓은 태그 지정
A:focus : A태그 중 키보드 입력을 받는 태그 지정
동적선택자
A:first-line : A태그의 문단 중 첫 번째 줄 지정
A:first-letter : A태그의 문단 중 첫 번째 글자 지정
A:before : A태그의 문단 앞을 지정
A:after : A태그의 문단 뒤를 지정
댓글 없음:
댓글 쓰기