YoonStudyNote

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

배경 이미지의 반복을 설정 속성 값 값 의미 기본값 repeat 배경 이미지를 수직, 수평으로 반복 repeat repeat-x 배경 이미지를 수평으로 반복 repeat-y 배경 이미지를 수직으로 반복 no-repeat 반복 없음 1. repeat-x .box{ width: 550px; height: 350px; border: 2px solid lightgray; background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png"); background-size:100px; background-repeat: repeat-x; } 이미지의 크기를 100px로 하고 가로만 반복 출력하게 만들었다. 2.repeat-y .box{ width:..

요소의 배경에 하나 이상의 이미지를 삽입 (주로 1개만 삽입하는 경우가 많다.) 속성 값 값 의미 기본값 none 이미지 없음 none url("경로") 이미지 경로(URL) 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. 사용방법 .box{ /* 개별속성 */ background-image: url("./img/i1.jpg"), url("./img/i2.jpg"), url("./img/i3.jpg"); } .box2{ /* 단축속성 */ background: url("./img/i1.jpg") no-repeat, url("./img/i2.jpg") no-repeat 100px 50px, url("./img/i3.jpg") repeat-x; } 하나 이상의 배경 이미지..

요소의 배경 색상을 지정 속성값 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent div{ width: 200px; height: 100px; background-color: tomato; }

요소의 배경을 설정 속성 값 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; .box1 { background: red url("./img/image.jpg") no-repeat left top scroll; /* 색상 이미지경로 반복 위치 스크롤특성 */ } .box2{ background: url("./img/image.jpg") ..

absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. (static, relative, sticky랑 상관이 없다) 지정값 변화값 inline block inline-block block inline-table block table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block flex flex/ position 속성 효과없음 inline-flex inline-flex/ position 속성 효과 없음 그외..

요소 쌓임 순서(Stack order) 요소가 쌓여있는 순서를 통해 어떤요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축) 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관) 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임 3. position속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소)) position > z-index > HTML 마지막코드 1 2 3 4 5 사진에서 보면 알 수 있듯이, 가장먼저 시작한 1번박스는 제일 밑에있고 맨뒤에있는 5번은 가장 위에 있는것을 알 수 있다. 하지만 CSS로 쌓이는 순서를 변경 할..

1. relative 1 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative{ position: relative; bottom: 20px; right:30px; } relative의 문제점 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성 값 값 의미 기본값 static 유형(기준) 없음/ 배치 불가능 static relative 요소 자신을 기준으로 배치 absolute 위치 상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 .parent{ width: 400px; height: 300px; border : 4px dashed lightgray; position: relative; } .child{ width: 150px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; position: absolute; /* ab..

float 속성이 적용되지 않도록 지정(해제) 속성 값 값 의미 기본값 none 요소 띄움 허용 none left 왼쪽 띄움 해제 right 오른쪽 띄움 해제 both 양쪽(왼쪽, 오른쪽) 모두 띄움 해제