깔끔한! CSS 조사 보고서 - 정의/구성/활용/예시

목차

1.CSS의 정의

1) CSS의 정의

2) CSS의 구성
(1) Selector
(2) Function
(3) Web safe fonts
(4) 단위
(5) 색상 입력
(6) 지원 브라우저

2. CSS의 사용

1) CSS의 삽입 방식
① 링크 방식
② 임베디드
③ 인라인

2) CSS의 활용
① background
② weight
③ height
④ border
⑤ border-collapse
⑥ position
⑦ z-index
⑧ float
⑨ font
⑩ text-align
⑪ vertical-align
⑫ margin
⑬ padding
⑭ overflow
⑮ text-decoration
⑯ list-style
⑰ display
⑱ transition
⑲ box-sizing
⑳ box-shadow

본문내용

1. CSS의 정의
1) CSS의 정의
CSS란 Cascading Style Sheet의 줄임말로써, 웹 문서를 편리하고 예쁘게 만들기 위해 개발된 스타일 시트의 표준안이다. CSS를 사용할 경우 아래와 같은 장점이 있다.

● 각 요소마다 일일이 스타일을 설정해줄 필요가 없다.
● 일관성 있는 웹 문서를 만들 수 있다.
● 중복된 코드를 줄일 수 있다.
● 유지, 보수 시간이 단축된다.

2) CSS의 구성
(1) Selector
CSS에서는 스타일을 적용할 요소를 설정할 때 Selector를 사용한다.
주로 쓰이는 Selector는 아래와 같다.

Selector
예시
설명
.class
.test{ }
class가 test인 요소를 선택한다.
#id
#test{ }
id가 test인 요소를 선택한다.
*
*{ }
모든 요소를 선택한다.
element
div{ }
모든 div 요소를 선택한다.
element, element
div, h1{ }
모든 div와 h1 요소를 선택한다.
element element
div h1{ }
div 안에 있는 h1 요소를 선택한다.
element > element
ul > li{ }
부모가 ul인 li 요소를 선택한다.
element + element
h1 + div{ }
h1 요소의 바로 뒤에 위치한 div 요소를 선택한다.
element1~element2
h1 ~ div{ }
div 요소의 바로 앞에 위치한 h1 요소를 선택한다.
[attribute]
[border] { }
border 속성을 가진 모든 요소를 선택한다.
[attribute=value]
[border=1] { }
border=1이라는 속성을 가진 모든 요소를 선택한다.
:hover
img:hover{ }
img에 마우스를 올렸을 때 나타낼 스타일을 설정할 수 있다.
:link
a:link{ }
아직 누르지 않은 링크의 스타일을 설정할 수 있다.
:visited
a:visited{ }
방문한 링크의 스타일을 설정할 수 있다.

참고 자료

없음