조반짝의 도전일지

화면이 이동하면서 글자들이 나오는 액션 html 마크업 css 편집 #contents css 편집 #header css 편집 #nav css 편집 dot 위치시키기 dot 모양 만들기 **parallax를 사용하지 않아도 링크를 걸면 해당 화면에 페이지로 이동하는 것을 볼 수 있다. @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; } /* header */ #header{ position: fixed; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.3); } #head..

박스 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-..

● cubic-bezier https://cubic-bezier.com/#.17,.67,.83,.67 cubic-bezier.com cubic-bezier.com 베지에 곡선을 이용해서 이벤트 속도를 조절할 수가 있다. 선 화면 중앙에 보내기 애니메이션 주기 ●animation : bar 2s ease-in-out infinite; bar : 애니메이션 이름 2s : 수행시간 ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어 infinite : 수행할 갯수 ( 무한정) ● @keyframes : 움직이는 값을 줄때 사용한다. 선이 제자리에서 움직인다. 0%에서 bar 높이값이 0, 회전 0 에서 시작 25%에서 진행속도 대신에 베지에 곡선을 이용해서 속도를 조절할 수 있다. ● cubic..

html 골격만들기 클래스에 이름을 공통으로 쓰기 위해서는 클래스에 이름을 2개로 사용해줌 figure 태그로 이미지 앞면, 뒷면의 태그를 넣어준다. css에서 효과는 똑같으니까 effect이름으로 스타일을 넣어준다. ● >표시는 바로밑에 자식에게 사용해야한다. figure 피그캡션 수정하기 _효과주기 left / right 각각 front,back 효과를 주어야한다. hover 시 효과 넣어주기 > html 왼쪽이미지 앞면 왼쪽이미지 뒷면 오른쪽이미지 앞면 오른쪽이미지 뒷면 > css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; backgroun..

외부 css 사용시 html에 css 링크 꼭 걸어주기 * web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다. 박스 만들어주기 section으로 만들어주기 01 rotate : 회전 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) CSS3 Transform rotate(45deg) rotateX(45deg) rotateY(45deg) @charset "utf-8"; *, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f3f4; t..

w1920 h500 layout grid > columns으로 변경 margin: 360으로 설정 줄자켜기 줄자로 가이드라인 넣어주기 alt+드래그+shift: 고정이동 + 복사 그리드 설정하기 사각형 10*10px / 사각형 400*200px 로 가이드라인 그려주기 아래이미지 참고 이미지 크기 설정해주기 file > place image 이미지 선택 export > 다른이름으로 저장 plugins_unsplash 생성 file > plugins > find more plugins > 검색창에 unsplash 검색 > unsplash Run 클릭 unsplash 플러그인을 통해 다양한 이미지를 사용할 수 있다. position 이미지 박스 내려가는 동작 만들기 li안에 img와 span(박스)이 동등하게..

section > article section이 article 보다 큰 덩어리지만 간혹 article안에 section이 들어갈 때도 있다. 백그라운드 컬러 투명도 주기 1. background-color: rgba(0,0,255,0.3) (r,g,n,투명도) 2. backgorund-color: blue; opacitiy: 0;(0-완전 투명) 1(완전불투명) 투명도 조절(0~1) section:nth-child(1) article{} 섹션중 첫번째 아이 중에 아티클에 적용하겠다. section:nth-of-type 는nth-child와 비슷하지만 다른형제가 있을 때 바꿀 수 있는 명령어 transform transform: scale(1.3); 배율 조정 transform: skew(30deg); 비..