Jade_o.o

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..

ver1. html 코드 .container{ position: relative; width: 500px; height: 300px; } .bug1{ width: 50px; height: 50px; background-color: green; border-radius: 50%; position: relative; top:150px; left: 155px; z-index: 1; } .bug2{ width: 50px; height: 50px; background-color: yellowgreen; border-radius: 50%; position: relative; left:185px; top: 125px; z-index: 2; } .bug3{ width: 50px; height: 50px; backgro..

1) 가로 방향으로 아이템 쌓도록 설정 시작점 기준으로 가로 쌓기 설정 flex-direction: row; 끝점을 기준으로 가로 쌓기 설정 flex-direction: row-reverse; 2) 세로 방향으로 아이템이 쌓이도록 설정 시작점 기준으로 세로 쌓기 설정 flex-direction: column; 끝점을 기준오로 세로 쌓기 설정 flex-direction: column-reverse; 3)컨테이너 안에 한줄이 되도록 설정 display: flex; 4)컨테이너 안에 두줄이 되도록 설정 display: flex; flex-wrap: wrap; 5) flex-wrap: wrap; 1.컨테이너 안에 한줄이 되도록 설정 1-1 해당 아이템을 가로 수직 정렬 flex-direction:row; 1-2..