CSS23 움직이는 애니메이션2 애니메이션2 원 두개가 회전하는 애니메이션을 구현했습니다. HTML코드 css코드 body { overflow: hidden; height: 100vh; background-image: linear-gradient(-60deg, #FF5858 0%, #f09880 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: load 1s ease 100; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .loading .circle2 { display.. 2022. 8. 29. 움직이는 애니메이션 1 애니메이션1 박스가 땅에닿으면 뭉게지는 애니메이션을 만들어봤습니다. HTML코드 css코드 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); position: relative; overflow: hidden; } .box { width: 50px; height: 50px; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; margin: 0 auto; } .box::before { content: ''; width: 50px; height: 5px; position: absolute; top: 58px; left: 0; background-color: #00.. 2022. 8. 29. 색상표현 색상 표현 방법 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, G.. 2022. 8. 24. 단위 CSS 단위! 글자 크기를 명시하지 않을 경우 16px 가 기본 값입니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. font-size: 120%; em 부모 요소의 글자 100% 기준으로 계산한 크기를 100 분의 1단위입니다. font-size: 1.5em; rem 최상의 요소의 크기를 100% 기준으로 100분의 1단위입니다. 즉 root, html 요소를 뜻하므로, html에서 지정한 글자 크기가 1rem 이 됨니다 font-size: 0.8rem; vw vw는 뷰포트 너비값의 100분의 1단위입니다. font-size: 3vw; vh vh는 뷰포트 높이값의 100분의 1단위입니다. .. 2022. 8. 24. 이미지스프라이트 이미지 스프라이트 (image sprite) 이미지 스프라이트란 웹사이트의 로딩 시간을 줄이기 위해, 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말합니다. 이미지 스프라이트 제작 방법 1. 사용하고자 하는 이미지를 일정한 간격, 또는 특정한 간격으로 이미지끼리 겹치지 않도록 배치합니다. 2.배치한 이미지를 하나의 이미지 파일로 저장합니다. .image__sns a { width: 36px; height: 36px; background: #fff; border-radius: 50%; display: block; margin-bottom: 5px; background: url(img/image_bg03_icon.svg) no-repeat; /* background 속성으로 스프라이트 이미지를.. 2022. 8. 22. 백그라운드 background 속성 background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. background 속성 표 속성 설명 작성법 background-color 배경의 색상을 설정합니다. background-color: "색상"; background-color: red; background-color: #000; background-color: rgba(0, 0, 0, 0.5); background-image 배경에 이미지를 설정합니다. background-image: url("이미지 경로"); background-image: url(img/img.svg); background-repeat 배경의 반복을 설정합니다. backgr.. 2022. 8. 22. 이전 1 2 3 4 다음 728x90 반응형
