[HTML5] 스타일시트(CSS) 소개 및 기술 소개

목차

1. Style Sheet(CSS)란?
2. Rule Set
3. CSS 선택자
4. CSS 기본형식
5. 외부 스타일 시트
6. 가상 요소와 가상 클래스
7. 상속(Inherit)
8. 스타일 우선순위
9. CSS 주석
10. 단위(Units)
11. 색상(color & background)
12. CSS font
13. background
14. 하이퍼링크 (Hyperlink)
15. List CSS
16. 박스 모델 (Box Model)
17. 플로트 (float)
18. 포지션 (position)
19. 웹표준 Layout
20. border-collapse, overflow
21. Display, visibility, z-index

본문내용

∎ Style Sheet(CSS)란?
웹 페이지에 “디자인”이라는 시각적 가치를 부여하기 위한 언어이다.
스타일 시트를 사용하지 않는다면 사용한 태그를 모두 찾아 일일이 수정해야 하지만, 스타일 시트를 사용한다면 스타일시트 코드에서 선택자 지정부분만 수정하면 된다.

단점 : 브라우저의 호환성 문제가 완벽하게 해결되지 않았음

∎ Rule Set
⋅ Selector { property : Value ; }
예) body { color : gray ; font-size : 12px ; }
// 문서(웹 페이지) 전체에 폰트 컬러를 ‘회색’으로 하고 폰트 사이즈를 12px로 하라는 의미

선택자에게 { } 안의 스타일 내용을 적용하도록 명령
selector (선택자) : 스타일을 적용하는 대상
property (속성) : 스타일의 종류
value (값) : 속성이 가질 수 있는 값

∎ CSS 선택자
⋅ 요소(태그)명을 선택자로 사용
예) p { color : orange; }
// p 태그 부분에 폰트 컬러를 오렌지로 설정

⋅ *(asterisk)를 선택자로 사용 (주로 페이지 초기화에 사용)
예) * { margin : 0 ; padding : 0 ; }
// 모든 요소의 바깥여백과 안쪽여백을 0px로 설정

⋅ class 선택자 (특정(세부) 부분의 스타일을 지정, 여러개의 태그에 적용 가능, 문서에서 주로 사용되는 스타일을 클래스명으로 지정하여 문서에 통일감을 줌)
사용태그 : <p> <div> <span> 등
예) .note { color : blue ; }
// ‘note'라고 class로 호출된 부분의 폰트 컬러를 파란색으로 설정

⋅ id 선택자 (문서 내 한 번만 적용, 문서에서 고유하게 사용되는 스타일을 아이디명으로 지정하여 해당 부분에 특정한 스타일을 줌)
사용태그 : <div> 등
예) #gnb { list-style-type : none ; }
// 'gnb'라고 id로 호출된 부분의 리스트의 앞머리 부분의 블릿을 없애기

참고 자료

없음