CSS (59) 썸네일형 리스트형 [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: 배경 이미지의 스크롤 여부(특성). .. [CSS] position의 display 수정 ▶ position의 display 수정 - position: absolute, position: fixed이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. - cf. float 속성과 유사. float의 display 수정: developing-move.tistory.com/124 [CSS] float의 display 수정 ▶ CSS float 참조: developing-move.tistory.com/123 - float 속성이 추가된 요소는 display 속성의 값이 대부분의 경우 block으로 수정됨. - 의 전형적인 inline 속성. - 에 display: block; 적용 시 결과 화.. developing-move.tistory.com - position: stati.. [CSS] position과 요소의 쌓임 순서 ▶ position과 요소의 쌓임 순서 - stack order? 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 쌓이는지)를 결정. z축. - z축: 우리의 시선과 동일한 축을 가짐. 눈에 보이지는 않지만 무언가가 더 앞에 있거나 뒤에 있는 개념. [요소의 쌓임 순서] 1. static을 제외한 position 속성의 값이 있을 경우 위에 쌓임. 값은 무관. - relative, absolute, fixed, sticky 중 값에 상관 없이 특정 값이 있으면 일단 위에 쌓이는 것. 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을수록 위에 쌓임. 3. position 속성의 값이 있고 z-index 속성의 숫자 값이 같다면 HTML의 마지막 코드.. 이전 1 2 3 4 5 ··· 8 다음
