전체 글

트랜지션 태그가 특정 동작 (마우스 클릭, 마우스 호버)에 의해 변형 (이동, 확대, 찌그러짐) 되는 것 태그 이동 (translate) translate 함수를 이용하면 설정된 태그가 특정위치로 이동하게됨 슬라이드바 등에 활용됨 transform : translate(x축,y축) : 태그를 이동시킬 수 있음 tramslateX(x축) : 가로로 이동 tramslateY(y축) : 세로로 이동 perspective(원근감px) tramslateZ(px); : 3D 변형 perspective : 원근 효과, 깊이와 거리감 부여 (클 수록 더 멀리 있는 것처럼 보임) tramslateZ : 3D 공간에서 Z 축을 기준으로 원소를 이동 (양수는 가까이, 음수는 멀리) .translate:hover{ trans..

content 영역의 크기를 조절하는 속성 (width, height) width : 가로 길이 조정 height : 세로 길이 조정 px (고정크기) : 요소 크기가 변하지 않음 % (가변크기) : 부모 요소 크기와 화면 크기에 따라 요소 크기가 달라짐 vh : 현재 화면 높이 (현재 화면의 vh%만큼의 비율) 화면 배치 방법 변경 (display) 블럭요소와 인라인요소의 속성을 변경해서 배치 방식을 변경할 수 있음 inline : 블럭 요소를 인라인 요소로 변경 inline-block - 인라인 요소로 배치를 하나 width, weight 의 크기는 유지됨 block - 기존 인라인 요소를 블럭 요소로 변경 none - 화면에 안보임, 공간 차지X 선택자{ display:inline/inline-bo..

배경색 지정 (background-color) background-color: 색상; 배경색 적용 범위 지정 (background-clip) border-box (기본값) : content, padding, border까지 배경 적용 padding-box : content, padding까지 배경 적용 content-box : contents 영역만 배경 적용 background-clip : border-box; 배경으로 이미지 적용 방법 background-image:url : 적용할 이미지 경로 지정 background-repeat : 배경 이미지 반복 여부 지정 repeat : 가로 세로로 반복, 기본값 repeat-x : 가로로만 반복 repeat-y : 세로로만 반복 no-repeat : 반복x..