코딩/과제11 과제 CSS에 애니메이션 적용하기 @keyframes moving{ from { padding-top: 100%; transform: rotate(720deg); } to { padding-top: 0%; transform: rotate(0deg); } } @keyframes rolling { from { left: 70px; /* 초기 위치: 부모 요소의 왼쪽 끝 */ transform: rotate(0deg); } to { left: calc(100% - 120px); /* 최종 위치: 부모 요소의 너비에서 요소의 너비를 뺀 값만큼 이동 */ transform: rotate(2880deg); } } #icon1 { animation: rolling 5s linear infinite alternate; animation-delay: 4.. 2024. 4. 12. CSS 과제 닷홈 CSS적용시키기 홈페이지를 css 미디어 쿼리를 이용해 모바일 환경을 만들어 보았다 메인페이지 css @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } * { margin: 0; padding: 0; } header { display: flex; width: 100%; background-color: black; color: white; } header > img { filter: opacity(0.5) drop-.. 2024. 4. 11. CSS 과제2 과제 '닷홈' 페이지의 회원가입, 로그인 페이지를 css 폼을 적용하여 완성 http://hyeon9502.dothome.co.kr/ 로그인 css 코드 body { margin: 0; padding: 0; text-align: center; justify-content: center; display: flex; } h2 { margin: 0; padding: 0; display: inline; } .header { display: flex; width: 100%; position: absolute; justify-content: center; text-align: center; top: 20px; } div { border-style: solid; padding: 10px; width: 300px; h.. 2024. 4. 9. CSS 과제1 과제 '뉴스기사' 페이지를 CSS 선택자, CSS텍스트를 사용하여 자유롭게 스타일을 적용 http://hyeon9502.dothome.co.kr/ @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } #newsdiv { border: 2px solid; width: 500px; height: 100px; overflow: hidden; } #newsdiv:hover { width: 500px; heig.. 2024. 4. 9. 이전 1 2 3 다음
