[css] 정리
[font]
font-family, font-size, font-style, font-weight
* { rgba (0,0,255,0.5); } /*네번째 숫자는 불투명도*/
text-align : start, end, left, right, center, justify, match-parent
line-height : 줄 간격을 조절
텍스트를 세로로 가운데 정렬하기 - height : 100px; line-height : 100px 두 개의 속성값을 똑같이 추가
text-decoration : 텍스트의 줄을 표시하거나 없애줌 (none, underline, overline, line through)
text-shadow : 텍스트에 그림자 효과 (가로 거리*, 세로 거리*, 번짐 정도, 색상)
text-transform : 텍스트의 대소문자를 변환하는 속성 (영문자에만 해당)
[spacing]
letter-spacing, word-spacing
[list]
list-style-type : 목록 스타일 (none, disc, circle, square...)
list-style-image: 불릿 대신 이미지 사용 url(....);
list-style-position: 목록을 들여 쓰는 속성 (inside, outside);
->list-style로 다 사용할 수 있다
[table]
caption-side: 표 제목 위치 (top, bottom) /*표 제목은 <caption>으로 지정*/'
border-spcing: 셀 사이의 여백
border-collapse: 표와 셀 테두리를 합쳐주는 속성 (collapse, separate)
[box model]
block : h1, div1, p
inline : span, img, strong
box-sizing: border-box
box-shadow
border-type: none, hiddeb, silid, dotted, ...
border-width: 테두리 두께
border-color:
-> border로 다 적용 가능
border-radius: 둥근 테두리 만드는 속성 (크기, 백분율)
margin 가운데 정렬하기 : margin-left: auto; margin-right: auto;
/*웹브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산한다*/
/*마진을 지정할 때 주의 할 것. 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐진다(마진 중첩, 마진 상쇄). 30px의 마진을 가진 컨테이너를 세로 정렬할 경우 마진은 60이 아닌 30이 된다 왜? 마진이 지나치게 커지는 걸 방지하기 위해서. 좌우 마진은 중첩되지 않는다*/
/*가로 중앙 정렬을 하려면 margin-left/right: auto 을 하면 되는데 이렇게 하기 위해서는 컨테이너의 너빗값이 지정되어야 한다 margin: 0 auto;*/
display: block, inline, inline-block, none
float: 웹요소를 문서 위에 떠있게 한다 (left, right, none)
clear: float 속성이 더이상 유용하지 않음을 알려주는 속성 (left, right, both) float: left/right/both를 해제한다
*display: inline-block 과 float:left의 차이
display: inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만 float: left로 배치하면 가로로 배치될 때 요소에 기본 마진과 패딩이 없다 그리고 clear로 float를 해제해야 한다
position: static, relative, absolute, fixed
/*absolute라고 하고 위치값을 지정하면 요소 중에서 relative를 사용한 요소를 기준으로 위치를 결정한다 relative값을 사용한 상위 요소를 기준으로 위치를 배치한다*/
background-color: 글꼴, 글자 크기 등처럼 상속되지 않는디
background-clip: (birder-box, padding0box, content-box)
baclground-image: url(...);
background-repeat: (repeat, repeat-x, repeat-y)
background-position: (수평위치:legt,center;right, 수직위치:top,center,bottom);
background-origin: 배경이미지의 적용범위를 조절하는 속성
background-attachment: 배경이미지를 고정하는 속성 (scroll, fixed)
->background: url(....) no-repeat center bottom fixed
background-size: 배경 이미지 크기를 조절하는 속성 (auto, contain, cover)
form의 label을 통해 폼 정렬하기
속성선택자: 태그 안에 있는 속성값에 따라 요소를 선택
a[href] {
}
transform: 변형 (translate, scale, lotate, skew)
transition: 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
(transition-property, transition-duration, transition-delay, transition-timing-function)