CSS (47) 썸네일형 리스트형 CSS position에서 relative와 absolute의 차이 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: relative; background-color: bisque; } 자식의 position이 relative인 경우 공간을 차지하지만 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: absolute; background-color: bisque; } absolute인 경우 공간을 차지하지 않는다. absolute의 부모 중.. 아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법 의 경우 width 속성을 설정해주면 이미지 비율에 따라서 height가 자동으로 설정된다. 때문에 width를 100%로 하면 부모 엘리먼트의 width에 따라 비율을 유지하면서 이미지 크기를 조절할 수 있게 된다. 그러나 은 그렇지 않다. 유튜브 영상을 불러올 때에는 을 사용하고 유튜브 영상의 크기를 반응형으로 조절하려면 다른 방법이 필요하다. 위처럼 #area로 을 감싸서 #area의 크기에 iframe 크기를 맞추는 방법이 있다. 먼저 iframe의 width와 height를 100%로 한다. #area의 padding-bottom에 % 값을 줘서 #area의 가로세로 비율을 조절한다. 유튜브 영상의 비율인 16:9로 하려면 padding-bottom에 56.25%를 넣는다. #area { pos.. 박스(div)의 내용과 겹치는 박스를 만드는 방법 1111 2222 3333 .parent { background-color: plum; position: relative; } .child { background-color: pink; position: absolute; top: 10px; left: 10px; } relative 안에 absolute를 설정하면 relative인 부모를 따라서 자식이 움직이고 box로 공간을 차지 하지 않는다. absolute 속성을 빼면 다음과 같이 변한다. 참고 : https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1 CSS 트랜스폼을 이용한 트랜지션 예제 1. 버튼 div { width: 100px; height: 100px; background-color: mistyrose; transition-property: transform; transition-duration: 300ms; transform: scale(1); } div:hover { transform: scale(1.1); /* 마우스를 올려 놓을 때 크기가 부드럽게 살짝 커진다. */ } 2. 시계 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: rotate; animation-.. CSS 애니메이션 예제 div { width: 100px; height: 100px; position: relative; background-color: antiquewhite; /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */ animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; /* 반복 횟수 */ } @keyframes move { 0% { left: 0; } 50% { left: 300px; } 100% { left: 0; } } /* 아래와 같이 할 수도 있다. */ @keyframes move { from { left: 0; } /* 0에서 300px로 */ to { left: 300px; }.. CSS 트랜지션 예제 마우스를 올려 놓고 내릴 때 애니메이션을 주는 방법이다. div { width: 100px; height: 100px; background-color: mistyrose; /* width와 background-color에 transition을 준다. */ transition-property: width, background-color; /* 변화 속도를 지정한다. */ transition-duration: 1s, 2s; } /* 마우스를 엘리먼트 위에 올려 놓을 때 */ div:hover { width: 200px; background-color: honeydew; } 참고 : https://poiemaweb.com/css3-transition CSS 그라디언트 사이트 그라디언트 디자인 할 수 있는 사이트 https://www.colorzilla.com/gradient-editor/ 엘리먼트를 배경처럼 활용하는 CSS 예제 엘리먼트를 배경처럼 활용하기 body, ul { margin: 0; padding: 0; } body { background-color: #d2d1d1; } .backGround { position: fixed; z-index: 0; height: 100vh; top: 0px; right: 0; left: 0; width: 75vw; margin: auto; background-color: white; box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.1); } .main { position: relative; z-index: 1; padding: 20px; } li { display: flex; flex-direction: row; .. 이전 1 2 3 4 5 6 다음 목록 더보기
