Programmers

1) transition CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니매이션 속성 값 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정(타이밍 함수란?) ease transition-delay 전환 효과의 대기시간 설정 0s 사용법 1. transition, transition-property, transition-duration html css .box { width: 100px; height: 100px; background: tomato; margin: 50px; transition: width 1s, back..

1) background-size 배경 이미지의 크기를 지정 속성 값 값 의미 기본값 auto 배경 이미지가 원래의 크기로 표시됨 auto 단위 - px, em, % 등 단위로 지정 - width height 형태로 입력 가능(E.g. 120px 370px) - width 만 입력하면 비율에 맞게 지정됨(E.g. 120px) cover - 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 - 이미지가 잘릴 수 있음 contain - 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 - 이미지가 잘리지 않음 사용법 html css .box1 { width: 300px; height: 200px; border: 2px solid red; margin: 50px; backg..

1) background-attachment 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정 속성 값 값 의미 기본값 scroll 배경 이미지가 요소를 따라서 같이 스크롤 됨 scroll fixed 배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음 local 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨 사용법 1. background-attachment: fixed; html css section { height: 300px; /* border: 2px dashed lightgray; */ } .section2 { background-image: url("https://www.starbucks.co.kr/common/img/main/fav_prod_bg_ne..

1) 배열의 마지막 요소 값을 구하는 방법 인덱스 값에 배열길이의 마지막 인 -1 을 찾으면 된다. 속성 값 값 의미 기본값 border-width 선의 두께(너비) medium border-style 선의 종류 none border-color 선의 색상 black 사용법 arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] console.log(arr[arr.length-1]) 출력결과

1) background-position 배경 이미지의 위치를 설정 속성 값 값 의미 기본값 % 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100% 0% 0% 방향 방향을 입력하여 위치 설정 top, bottom, left, right, center 단위 px, em, cm 등 단위로 지정 사용법 값이 방향일 경우 background-position: 방향1 방향2; 값이 단위(%, px등)일 경우 background-position: x축 y축; 1. 방향 html css .box { width: 260px; height: 200px; border: 2px dashed lightgray; background-image: url("https://heropy.blog/css/images..

1) background-repeat 배경 이미지의 반복을 설정 속성 값 값 의미 기본값 repeat 배경 이미지를 수직, 수평으로 반복 repeat repeat-x 배경 이미지를 수평으로 반복 repeat-y 배경 이미지를 수직으로 반복 no-repeat 반복 없음 html css .box1 { width: 260px; height: 200px; border: 2px dashed lightgray; background-image: url("https://heropy.blog/css/images/vendor_icons/html5.png"); background-size: 100px; } .box2 { width: 260px; height: 200px; border: 2px dashed lightgray;..

1) background-image 요소의 배경에 하나 이상의 이미지를 삽입 속성 값 값 의미 기본값 none 이미지없음 none url("경로") 이미지 경로(URL) 사용법 background-image: url("경로"); .box { background-image: url("../img/image.jpg"); width: 120px; height: 80px; } ※ 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. .box1 { /* 개별속성 */ background-image: url("../img/image1.jpg"), url("../img/image2.jpg"), url("../img/image3.jpg"); } .box2 { /* 단축속성 */ backg..

1) background-color 요소의 배경 색상을 지정 속성 값 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent ※ 요소는 기본적으로 투명하다.