CSS : 문서의 스타일 ( Cascading Style Sheets)
HTML5 : 문서의 내용
JAVASCRIPT : 문서의 동작
처리가중치
하나의 요소에 여러개의 CSS가 충돌할 경우 우선 순위(가중치)가 계산되고 계산 결과에 따라 CSS 충돌이 처리된다.
외부 CSS 파일 가중치가 가장 낮음
<style> 에 정의된 CSS 가중치 중간
인라인 CSS 가중치 가장 높음
CSS3 의 기능
선택자 (selectors)
요소(태그), 전체(*) , id(#) , Class(.)
박스모델 (Box Model)
배경 및 경계선(Backgrounds and Borders)
텍스트 효과(Text Effects)
2차원 및 3차원 변환(2D/3D Transformations)
애니메이션(Animations)
다중 컬럼 레이아웃(Multiple Column Layout)
사용자 인터페이스 (User Interface)
css 의 문법
선택자(selector) { 속성 : 값; }
끝에 반드시 ; 를 적어준다.
p { color : blue ; }
주석 : /* */ , //
css 삽입 위치
-외부 스타일 시트 : 외부 스타일 시트변경 -> 모든 html 문서가 영향
<head>
<link type="text/css" rel="stylesheet" gref="mystyle.css">
</head>
-내부 스타일 시트
html 파일안에 있는 <style></style>
-인라인 스타일 시트
다중 스타일 시트
우선순위가 높은 순서
1. 인라인 스타일 시트
2. 헤드섹션에 저장된 내부 스타일 시트
3. 외부 스타일 시트
4. 웹브라우저 디폴트 값
공통적으로 사용되는 스타일은 <body> 요소의 스타일에 정의하는 것이 편리하다.
p { color : blue; }
p : 선택자(selector)
color : 속성 (property)
blue; : 값 (value)
선택자의 종류
- 타입 선택자 (type selector )
- 전체 선택자(universal selector )
- 클래스 선택자 (class selector)
- 아이디 선택자 (ID selector)
- 속성 선택자(attribute selector)
- 의사 선택자 (pseudo-class)
1) - 타입 선택자 (type selector )
HTML 요소 이름을 사용한다.
ex) h1 { color : green; }
2) - 전체 선택자(universal selector )
* { color : green ; }
전체 요소를 선택한다.
3) - 클래스 선택자 (class selector)
.target { color : red; }
또는
p.target{ border : 1px solid red; }
클래스가 target 인 애
<p class="target"> Hello World!</p>
4) - 아이디 선택자 (ID selector)
특정한 요소를 선택
#target { color : red ; }
id 가 target인 요소를 선택한다.
<p id="target">Hello World!</p>
* 선택자 그룹
선택자를 콤마(,) 로 분리하여 나열 할 수 있다.
h1, h2, h3 { font-family : sans-serif ; }
자손, 자식 선택자
s1 s2 : s1 요소에 포함된 s2 요소를 선택한다. ( 후손관계 )
s1 > s2 : s1요소의 직계 자식 요소인 s2를 선택한다 ( 자식관계)
ex)
body em { color : red; }
body > h1 {color : blue; }
5) 의사 클래스 (pseudo - class)
: 클래스가 정의된 것처럼 간주 상태나 구조에 의해서 선택이 이루어 진다.
예시 1 )
a:link { color : blue; }
a:visited { color : green; }
a: hover { color : red; } : 마우스 가져다가 댔을 떄
a:active { color : pink; }
예시 2 )
td : nth-child(2n) -> 0 2 4 6 8
td : nth-child(2n+1 ) -> 1 3 5 7 9
td : nth-child(2n+2) -> 2 4 6 8
css 의 속성들
color : 텍스트 색상
font-weight : 볼드체 설정
padding : 요소의 가장자리와 내용간의 간격
font-size : 폰트의 크기
background-color : 배경색
border : 요소를 감싸는 경계선
font-style : 이탤릭체 설정
background-image : 배경 이미지
text-align : 텍스트 정렬
list-style : 리스트 스타일
색상
1) 이름으로 표현 "red"
2) 16진수로 표현 #FF0000
3) 10 진수로 표현 rgb (255, 0, 0 )
4) 퍼센트로 표현 rgb(100% , 0 % . 0% )
16진수로 색상 나타내기
16 진수 코드는 빨간색, 녹색 청색 값을 각각 2자리 16 진수로 표시한 것
16진수 코드는 항상 # 으로 시작한다. # ff 00 00
ex)
body {
background-color : rgb ( 60% , 40% , 10% ) ;
}
body {
background-color : rgb(153, 102, 25 ) ;
}
41p
댓글
댓글 쓰기