2015.11.21 T아카데미 CSS 수업.
HTML:
<p><a href="http://w3.org">Link to the W3C website</a></p>
CSS:
a:link{color:green;text-decoration:underline}a:visited{color:red}
Output:
CSS 에서 띄어쓰기와 '>' 차이점
띄어쓰기면 그 섹션 안에 있는 모든 자식, 손자 태그를 다 포함
'>'면 섹션 안에 있는 자식 태그만 포함
ol 태그 안에 있는 3번째 li를 선택 함. 괄호에다가 2n으로 하면 짝수행에.. odd, even도 가능
ol li:nth-child(3){
color:red
}
속성
| Selector | 내용 | 버전 |
|---|---|---|
| E[attr] | 'attr' 속성이 있는 E 요소 선택 | 2.1 |
| E[attr="name"] | 'attr' 속성의 값이 'name'=인 E 요소 선택 | 2.1 |
| E[attr$="name"] | 'attr' 속성의 값이 'name'으로 $끝나는 요소를 선택 | 3 |
| E[attr*="name"] | 'attr' 속성의 값에 'name'이 *포함되는 요소를 선택 | 3 |
a[href*=".naver.com"] { color:red}
#thirdSection input[type="radio"]:checked]{
margin-left: 50px;
}
#thirdSection input:disabled{
background: gray;
}
#thirdSection button[type="submit"]{
border:3px solid red;
}
#thirdSection input:not([type=radio]){
width:200px;
}
CSS Color - W3C 색상표 : http://www.w3.org/TR/css3-color/#svg-color
CSS 속성 - http://2107.co.kr/tacademy/css3_properties.html
버튼을 text-align 할 수 없어. 그래서 그 위에 div 태그를 써써 align 시켜줘야해
position:absolute 쓰고 꼭 위에 태그에 position:relative를써주어야 relative 써준 태그 기준으로 absolute 될 수 있음.
2개의 박스가 겹쳐있을 때 z-index: 값이 높으면 높은 박스가 위에 보인다.
인라인 요소를 블럭 요소로 바꾸고 싶을 때 display:block을 해주면 돼
float:left 쓰고 꼭 끝나는 곳 태그 안에 clear:both를 넣어주어야 함
레이어 넣을 때 화면 중간에 배치하기.
var left = ( $(window).scrollLeft() + ($(window).width() - obj.width()) / 2 );
var top = ( $(window).scrollTop() + ($(window).height() - obj.height()) / 2 );