2023/HTML17 [HTML] 입체적인 슬라이드 보호되어 있는 글 입니다. 2023. 8. 21. [HTML] 입체적인 애니매이션 표현하기 z-index: n; position을 같이 사용해야 한다 @charset "utf-8"; body { height: 100vh; background-color: cadetblue; } .wrap { display: flex; justify-content: center; align-items: center; height: 100vh; } .wrap div { width: 400px; height: 300px; padding: 20px; perspective: 1000px; position: relative; } .wrap div img { width: 100%; display: block; } .wrap div .front { position: absolute; left: 0; top: 0; z-inde.. 2023. 7. 10. [HTML] $(".banner>.list>.imgs:first-child").fadeOut(1500).next().fadeIn(500).end(1000).appendTo(".banner>.list");},3000) li 중에 첫 번째 값을 서서히 사라지게 하는 명령어 다음에 있는 li를 선택하는데 1초 안에 선택하라는 명령 방금 정에 사라진 li를 선택하는데 1초 안에 선택하라는 명령 . end()를 선택한 li값을. list 맨 위에 추가하라는 명령 #contents .gallery>ul>li { float: left; margin: 10px; position: relative; overflow: hidden; } #contents .gallery>ul>li:last-child { margin-right: 0; .. 2023. 4. 19. [HTML] display: flex; 자식들을 정렬하도록하는 명령어 justify-content: center; 가로 가운데 정렬 align-items: center; 세로 가운데 정렬 /* header */ #header{width: 100%;} #header .logo{ width: 200px; height: 100px; display: flex; justify-content: center; align-items: center; background-color: black; float: left; } #header .logo>a{} #header .logo>a>img{} #header .nav{float: right;} #header .nav ul{} #header .nav ul li{ width: 150px; .. 2023. 4. 18. [HTML] 필터 filter: @(n); blur 요소의 흐림효과를 조절하는 명령어 brightness 요소의 발기를 조정 contrast 요소의 명도 대비를 조절합니다. grayscale 요소의 흑백을 지정합니다. hue-rotate 요소의 색상 단계를 조절합니다. invert 요소의 생삭을 반전를 조절합니다. saturate 요소의 채도를 조절합니다. sepia 요소의 갈색 톤 단계를 조절합니다. opacity 투명도 조절 scale rotate skew translate 2023. 4. 14. [HTML] show 나타남 fadeIn/out 서서히 나타나고 사라짐 @charset "utf-8"; *{margin: 0;padding: 0; box-sizing: border-box;} li{list-style: none;} a{text-decoration: none; color: whitesmoke;} img{display: block;} .clearfix::after, clearfix::before{content: ""; display: block;clear: both;} /* wrap */ #wrap{width: 1000px; margin: 0 auto; position: relative;} /* header */ #header{width: 200px;height: 650px; float: left; ba.. 2023. 4. 14. 이전 1 2 3 다음
