2016. 12. 27. 16:14ㆍHTML.CSS3.JavaScript.jQuery
[1] 기본 개념
<head>
<style>
h1 { color : red }
</style>
</head>
- h1 : 선택자
- color : Style 속성
- red : Style 속성값
- { } : css block
[2] 선택자
[2]-1 전체 선택자( * ) : html, body 에 있는 모든 태그를 선택
[2]-2 아이디 선택자( #id )
[2]-3 태그 선택자 ( tagname )
[2]-4 클래스 선택자 ( .classname )
[2]-5 속성 선택자
- 선택자[속성]
- 선택자[속성=A] : 속성 = A
- 선택자[속성^=A] : 속성의 시작값이 A
- 선택자[속성$=A] : 속성의 끝값이 A
[2]-6 후손 선택자 ( A B )
[2]-7 자손 선택자 ( A > B ) A의 직계자손 B
[2]-8 동위 선택자
- 선택자A + 선택자B { } : A태그 바로 뒤의 B태그
- 선택자A ~ 선택자B { ] : A태그 뒤의 B태그
[2]-9 반응 선택자
- 선택자A:hover : 마우스가 올려있는 태그 ( 태그위에 마우스가 올려져 있는 상태일때)
- 선택자A:active : 클릭한 태그 ( 태그가 클릭 되어졌을때)
[2]-10 상태 선택자
- 선택자A:checked : 체크되어있는 input태그 선택
- 선택자A:focus : 초점이 맞추어진 input태그 선택
- 선택자A:enabled : 사용 가능한 input태그 선택
- 선택자A:disabled : 사용 불가능한 input태그 선택
[2]-11 구조 선택자 ( 형제 관계인 태그들 중 선택) ★★
- 일반구조 선택자
- 선택자A:first-child
- 선택자A:last-child
- 선택자A:nth-child( 수열 )
- 선택자A:nth-last-child( 수열 )
- 형태구조 선택자
- 선택자A:first-of-type
- 선택자A:last-of-type
- 선택자A:nth-of-type( 수열 )
- 선택자A:nth-last-of-type( 수열 )
[2]-12 링크 선택자
- 선택자:link : href속성을 가지고 있는 a태그 선택
- 선택자:visited : 방문했던 링크를 가지고 있는 a태그 선택
[2]-13 부정 선택자
- :NOT(선택자)
[3] Style 속성
[3]-1 css3 크기 단위
- % : 스타일 적용 전 기존의 크기의 %
- em : 현재 요소의 글꼴크기의 배수
- rem : html태그의 크기를 기준으로 배수
- px : 절대적 크기
[3]-2 가시 속성
- display :
none ; -> 태그와 태그가 차지하는 공간 모두 사라짐
block ;
inline ;
inline-block ; -> inline 을 토대로 block 형식처럼 width, height, margin 속성 사용이 가능
- visibility :
visible ;
hidden ; -> 태그를 안보이게 하지만 차지하는 공간은 그대로 존재
collapse ; -> display:none; in tableTag
- opacity :
0~1 -> 투명 ~ 불투명
[3]-3 Background 속성
- Selector { background : URL( "picture.png" bottom / 100% 350px no-repeat fixed ; }
- background-image : url('picture.png') ;
- background-position : 00% 00% ;
or top, bottom, left, right ;
- background-size : width height ;
- background-repeat : no-repeat ;
or repeat, repeat-x, repeat-y ;
- background-attachment : scroll ; (스크롤과 같이 움직임)
or fixed ; (땅바닥에 고정)
[3]-4 Font 속성
- Selector { font-style font-weight font-size / line-height font-family }
-> body { font : 1.5em / 1em sans-serif; }
- font-style : italic normal oblique
- font-weight : lighter normal bold bolder ( 100 ~ 900 )
- font-size : x-large larger large medium small smaller x-small
- line-height : 글자의 높이 ( 수직 중앙 정렬 시 사용 )
- font-family : Serif Sans-serif Monospace
- text-align : center left right justify(양쪽정렬)
- text-decoration : none; -> a태그 밑줄 제거
[3]-5 Position속성 ★★
- position : absolute , relative
- 자식의 위치 속성이 absolute 이면, 부모의 위치속성은 relative 이여만 하고, height 속성값을 주어야한다.
- overflow : hidden, scroll -> 숨길것인지, 스크롤로 만들것인지 ( overflow-x , overflow-y )
- 자식에게 float 속성을 적용하면 부모의 overflow 속성은 hidden 을 주어야한다.
[3]-6 Box 속성
margin
border
padding
[ content ]
padding
border
margin
- 웹 페이지에서 content 영역은 padding, border margin 으로 둘러 쌓여 있다.
따라서 해당 태그의 전체 너비와 높이는 width ( or height ) + 2 * ( padding + border + margin ) 이 된다.
- Box-sizing 속성
box-sizing : content-box ; → width = content
border-box ; → width = content + padding + border
- 테두리 속성
- Selector { border : border-size border-style border-color ;}
- border-width : thick medium thin 0px ;
- border-style : none solid double dashed dotted ;
- border-color : black or #------ ;
- border-radius : -px -px -px -px ( 0~50px 50px→원 / 11시→1시→5시→7시 순으로 적용 )
[3]-7 Shadow 속성
- text-shadow : 오른쪽(-px) 왼쪽(-px) 흐림도(-px) 색상 ;
- box-shadow : 오른쪽(-px) 왼쪽(-px) 흐림도(-px) 색상 ;
'HTML.CSS3.JavaScript.jQuery' 카테고리의 다른 글
| [6] jQuery - Attribute(속성) , Method(메서드) (0) | 2016.12.29 |
|---|---|
| [5] JavaScript - DOM ( Document Object Model ) / Event (0) | 2016.12.28 |
| [4] JavaScript - 객체 (0) | 2016.12.28 |
| [3] JavaScript - 기본개념 (0) | 2016.12.28 |
| [1] HTML5 (0) | 2016.12.27 |