728x90
반응형

keyframes 2

비주얼 스튜디오 코드 _ 35 로딩 애니메이션

박스 3개 만들기 #wrap > .container > .box > .clock / p-clock 박스 영역 잡아주기 ● display: inline-block 인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음 이런 경우에는 float으로 옆으로 나열해준다. ● float을 띄우면 부모가 높이를 잃게 된다. >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 박스를 개별로 수정해주기 .box:nth-child(1){} / .box:nth-child(2){} .... >> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다. 박스를 짝수, 홀수로 수정해주기 짝수 .box:nth-of-type(2n){} 홀수 .box:nth-of-..

비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제

html 골격잡아주기 body 안에 section태그로 박스 잡아주기 css에서 편집해주기 1. body에 화면 배경색과 크기를 잡아준다. 2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다. h1 태그로 제목 넣어주기 css 에서 h1 편집 position띄워서 위치를 잡아준다. 구글폰트에서 웹폰트 가져오기 h1에 font-family: .. 웹폰트를 가져온다. 폰트 명령어 간소화하기 ▼ font: 폰트크기 / 줄간격 '폰트종류' ; section 안에 article태그를 넣어준다. article에 class이름을 sky이라고 지정 article에 이미지를 넣어준다. css > article 편집해주기 이미지 sky, sun위치 잡아주기 각각 이미지에 positi..

728x90
반응형