04-1(CSS3로 웹 페이지 꾸미기)~6(시각적 효과)

CSS - HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어, 이것으로 작성된 시트를 '스타일 시트'라고 함

CSS의 기능

• 색상과 배경
• 텍스트
• 폰트
• 박스 모델
• 비주얼 포맷 및 효과
• 리스트
• 테이블
• 사용자 인터페이스

셀렉터는 CSS3 스타일 시트의 이름이나 규칙이다.

CSS3 스타일 시트는 중괄호로 작성한다

CSS3 스타일은 '프로퍼티:값'의 쌍으로 표현되며 세미콜론으로 분리된다.

셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않는다.

 

스타일 시트 작성 방법 3가지

• <style> 태그에 스타일 시트 작성
• style 속성에 스타일 시트 작성
• 별도의 스타일 시트 파일을 작성하고, <link>나 @import로 불러 사용

CSS3 규칙

• CSS3 스타일은 부모 태그로부터 상속된다.
• 스타일 합치기와 오버라이딩

셀렉터

태그 이름 셀렉터

class  셀렉터

id 셀렉터

셀렉터 조합하기

• 자식 셀렉터
• 자손 셀렉터

전체 셀렉터

속성 셀렉터

가상 클래스 셀렉터

 

폰트 패밀리는 여러 개의 폰트를 지정하여 나열된 순서대로 폰트가 선택되도록 한다.

 

박스 모델

박스의 구성

• 콘텐츠
• 패딩
• 테두리
• 여백

width, height, margin, padding

border: width style color