분류 전체보기 (269) 썸네일형 리스트형 [CSS] tansition ▶ transition - css 속성의 전환 효과를 지정. - css 속성의 시작과 끝을 지정(전환 효과)해 중간 값을 애니메이션 처리. [속성] - transition-property: 전환 효과를 사용할 속성의 이름. 기본값은 all. - 전환 효과를 적용할 특정한 속성을 일부 지정할 수도 있고, 지정하지 않으면 전체 속성에 전환 효과가 지정됨. - transition-duration: 전환 효과의 지속 시간 설정. 기본값은 0s. - s는 second. 0초가 기본값. 1s, 0.5s, .5s, ... - s 단위는 초 단위를 의미하지만 millisecond 단위로 적용할 수도 있음. ex. 1000ms = 1s - transition-timing-function: 타이밍 함수 지정. 기본값은 e.. [CSS] background-size ▶ background-size - 배경 이미지의 크기를 지정. [속성 값] - auto: 배경 이미지가 원본 크기로 표시됨. 기본 값. - 단위: px, em, % 등 단위로 지정. - width/height 형태로 입력 가능. ex. 120px 370px - width만 입력하면 비율에 맞게 지정됨. ex. 120px. - cover: 배경 이미지의 크기 비율을 유지하여 요소의 더 넓은 너비에 맞춰짐. - 이미지가 잘릴 수 있음. - contain: 배경이미지의 크기 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐. - 이미지가 잘리지 않음. - contain은 이미지 전체가 다 나오지만 요소에 빈 공간이 보일 수 있는 문제점도 일부분 가지고 있다는 점에 유의. [사용 예시] - 이미지가 출력되기는 하.. [CSS] background-attachment ▶ background-attachment - 요소가 스크롤될 때 배경 이미지의 스크롤 여부를 설정. [속성 값] - scroll: 배경 이미지가 요소를 따라 같이 스크롤됨. 기본 값. - fixed: 배경 이미지가 viewport에 고정되어 요소와 같이 스크롤되지 않음. - 요소는 스크롤되지만 배경 이미지는 스크롤되지 않는 것. - local: 요소 내 스크롤 시 배경 이미지가 같이 스크롤됨. - 많이 사용되지는 않음. [사용 예시] - background-attachment: scroll;은 기본 값이므로 지정하지 않아도 값이 적용된 것과 동일함. - 스크롤 시 배경 이미지도 스크롤되어 함께 올라감. - background-attachment: fixed; 지정 시 배경 이미지는 화면에 고정된 상태... [CSS] background-position ▶ background-position - background-position을 통해 배경 이미지가 해당 요소의 어느 부분에 위치할 것인지에 대한 실질적인 위치 정보를 지정 가능. - right top은 우측 상단을 의미. - 배경 이미지의 위치를 설정하는 것. [속성 값] - %: 기본값은 0% 0%. - 앞의 값은 x축, 뒤의 값은 y축을 의미. - 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%. - 방향: 방향을 입력하여 위치 설정. - top, bottom, left, right, center. - 100% 100% = right bottom. - 단위: px, em 등의 단위로 지정. [사용 방법] - 속성 값이 방향일 경우. background-position: 방향1.. [CSS] background-repeat ▶ background-repeat - 배경 이미지의 반복을 설정 [속성 값] - repeat: 배경 이미지를 수직, 수평으로 모두 반복. 기본 값. - repeat-x: 배경 이미지를 수평으로 반복. - repeat-y: 배경 이미지를 수직으로 반복. - no-repeat: 반복 없음. [사용 예시] - background-repeat: repeat-x; - background-repeat: repeat-y; - background-repeat: no-repeat; [CSS] background-image ▶ background-image - 요소의 배경에 하나 이상의 이미지 삽입. - 하나의 이미지만 삽입하는 것이 보통이지만 하나 이상을 삽입할 수도 있음. [속성 값] - none: 이미지 없음. 기본값 - url("경로"): url() 함수의 인자 값으로 경로를 지정. [사용 방법] background-image: url("경로"); [사용 예시] .box{ background-image: url("../image.jpg"); width: 100px; height: 100px; } // 개별 속성 사용 예시 .box{ background-image: url("../image1.jpg"), url("../image2.jpg"), url("../image3.jpg"); } // 단축 속성 사용 예시 .bo.. [CSS] background-color ▶ background-color - 요소의 배경 색상을 지정. - 개별 속성. [속성 값] - 색상: 값을 입력해 요소의 배경으로 해당 색상 지정. - transparent: 투명하다는 의미. 기본 값. [CSS] background ▶ background - 요소의 배경을 설정. - background-color, background-image, background-repeat, background-position, background-attachment의 개별 속성들의 집합인 단축 속성. [background의 개별 속성] - background-color: 배경 색상 지정. 기본 값: transparent. - background-image: 하나 이상의 배경 이미지. 기본 값: none. - background-repeat: 배경 이미지의 반복. 기본 값: repeat. - background-position: 배경 이미지 위치. 기본값 0 0. - background-attachment: 배경 이미지의 스크롤 여부(특성). .. 이전 1 ··· 12 13 14 15 16 17 18 ··· 34 다음
