Jade_o.o

해변 이미지 3개로 transition & transform 활용하여 이미지 연달아 나열하기(각 다른 방식으로) ver1. html 코드 .img1{ position: absolute; top: 300px; left: 400px; width: 400px; height: 300px; transform: skewY(30deg); transition: transform 1s; z-index: 3; } .img2{ position: absolute; top: 250px; left: 600px; width: 400px; height: 300px; transform: skewY(30deg); transition: transform 1s; z-index: 2; } .img3{ position: absolute; to..

css 종합 실습 backgrund & flex를 활용하여 오버워치 캐릭터창 만들기 body { background-image: url('./img/overwatch/bg.jpg'); background-repeat: no-repeat; background-attachment: fixed; } .container { display: flex; position: relative; /*flex-direction: row;*/ flex-direction: column; justify-content: center; align-items: center; } .container .heroes { display: flex; flex-wrap: wrap; /*justify-content: space-around;*/ ..

background를 통해서 인스타 프로필 만들어 보자! html 코드 .item{ border-radius: 50%; width: 500px; height: 500px; } .background{ position: absolute; background: linear-gradient(50deg, hotpink,rgb(252, 220, 90)); } .background-img{ position: absolute; width:470px; height: 470px; background-image:url(./img/i17033941953.jpg); border: 7px solid white; /*background-size: auto;*/ background-size: cover; top:15px; left:..

ver2 css 파일에 height 100%를 주는 이유는? >> ul의 높이는 콘텐츠의 크기만큼 할당되어 있기 때문에 처음의 height는 li 와 ul가 같음. 하지만 li들은 .header2 기준으로 세로 중앙정렬을 해야하기 때문에 ul.menus는 .header2의 높이를 그대로 가져와서 li의 기준이 되어야함. border:1px solid black; 으로 ul.menus가 어느정도를 차지하는지 확인해야함 height:100%가 있을 때와 없을 때를 비교해보자! Flex를 이용해 여러 종류의 Header를 만들어보자! LOGO MENU1 MENU2 MENU3 MENU1 MENU2 MENU3 LOGO MENU1 MENU2 MENU3 LOGIN html 코드! * { box-sizing: bord..