Jade_o.o

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

display : inlilne-block background-image: url('https://') background-position background-repeat background-size 활용하여 css 배경을 적용해 보았다.

선택자들을 활용하여 요소를 쌓고 순서에 대해 알아보자 z-index 또한 활욯해서 기능을 구현해보자 z-index 란? 우선 순위 주기 & 요소의 수직 위치를 정하는 속성 item1 item2 item3 z-index : 1; 주석 처리 되었을때 보이는 결과창 z-index : 1; 주석이 해제 되었을때 결과창