전체 글 (894) 썸네일형 리스트형 12장 예제 - 주축에서 플렉스 항목 간의 간격 적용하기 DOCTYPE html> 주축에서 플렉스 항목 간의 간격 적용하기 .container { width:800px; display:flex; background-color:#eee; border:1px solid #222; margin-bottom:30px; } #opt1 { justify-content:flex-start; /*주축 시작점 기준*/ } #opt2{ justify-content:flex-end; /*주축 끝점 기준*/ } #opt3 { justify-content:center; /*주축 중앙 기준*/ } #opt4{ justify-content:space-between; /*시작점과 끝점 배치한 후 같은 간격*/ } #opt5{ justify-content:space-around; /*전체 .. 12장 예제 - 플렉스 항목의 배치 방향과 줄바꿈 적용하기 DOCTYPE html> 플렉스 항목의 배치방향과 줄바꿈 적용하기 .container { width:400px; display:flex; background-color:#eee; border:1px solid #222; margin-bottom:10px; } #opt1 { /*왼쪽에서 오른쪽으로, 여러줄 */ flex-flow:row wrap; } #opt2 { /*왼쪽에서 오른쪽으로, 한줄*/ flex-flow:row nowrap; } .box { padding: 5px 45px; margin:5px; background-color:#222; } p { color:#fff; text-align:center; } 1 2 3 4 5 6 1 2 3 4 5 6 12장 예제 - 플렉스 항목의 줄 바꾸기 DOCTYPE html> 플렉스 항목의 줄 바꾸기 .container { width:800px; display:flex; /* 플렉스 컨테이너 지정 */ background-color:#eee; border:1px solid #222; margin-bottom:30px; } .box { padding:5px 45px; margin:5px; width:80px; background-color:#222; } #opt1{ flex-wrap: nowrap; /* 한 줄에 표시 */ } #opt2{ flex-wrap: wrap; /* 여러 줄에 표시 */ } #opt3{ flex-wrap: wrap-reverse; /* 시작점과 끝점 바꿔 여러 줄에 표시 */ } p { color:#fff; text-align:.. 12장 예제 - 플렉스 항목 배치하기 DOCTYPE html> 플렉스 항목 배치하기 .container { width:700px; display:flex; /*플렉스 컨테이너 지정*/ background-color:#eee; border:1px solid #222; margin-bottom:30px; } .box { padding: 5px 45px; margin: 5px; width: 80px; background-color:#222; } #opt1 { flex-direction:row; /*왼쪽에서 오른쪽으로*/ } #opt2 { flex-direction:row-reverse; /*오른쪽에서 왼쪽으로 */ } #opt3 { flex-direction:column; /*위에서 아래로*/ } #opt4 { flex-direction:colu.. 12장 예제 - 미디어 쿼리 화면 학인하기 DOCTYPE html> 미디어 쿼리 사용하기 body { background:url(images/bg0.jpg) no-repeat fixed; /*기본 배경 이미지 지정*/ background-size:cover; /*배경 이미지로 요소를 모두 덮도록 이미지 확대 및 축소*/ } @media screen and (max-width:1024px) { /*가로가 1024px 이하이면 bg1.jpg 지정 */ body { background:url("images/bg1.jpg") no-repeat fixed; background-size:cover; } } @media screen and (max-width:768px) { /*가로가 768px 이하면 bg2.jpg 지정*/ body { background:.. 11장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 #container { width:200px; margin:30px auto; } img { border:1px solid #ccc; border-radius:50%; box-shadow:5px 5px 30px 2px #000; animation:rotateBear 2.5s infinite; } @keyframes rotateBear { from{transform: perspective(200px) rotateY(0deg);} 50% {transform: perspective(200px) rotateY(-180deg);} to {transform:perspective(200px) rotateY(-360deg);} } 11장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 * { box-sizing: border-box; } .top-menu { margin:50px auto; padding:0; list-style:none; width:605px; height:35px; box-shadow:0 3px 4px #8b8b8b; background-color:#dadada; } .top-menu li { float:left; border-right:1px solid #929292; } .top-menu li a:link{ color:black; text-decoration:none; text-align:center; display:block; width:100px; height:35px; line-height: 35px; transit.. 11장 예제 - 애니메이션 2개를 한꺼번에 지정하기 DOCTYPE html> 무한 반복하는 애니메이션 만들기 .box { width:100px; height:100px; margin:60px auto; animation: rotate 1.5s infinite, background 1.5s infinite alternate; } @keyframes rotate { /*0도 ->x축 -180도 회전 -> y축 -180도 회전 */ from {transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(120px) rotateX(-180deg) rotateY(0deg);} to {transform: perspective(120px) rotateX(-180deg) ro.. 이전 1 ··· 101 102 103 104 105 106 107 ··· 112 다음
