조반짝의 도전일지

이미지 회전 효과 html 골격 만들어주기 #wrap .effect ho1 > figure > img = figcaption > h3 = p .effect ho2 > figure > img = figcaption > h3 = p css reset 넣어주기 이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기 이미지 양면으로 합쳐주기 피그캡션과 p 태그 수정 ho1- front , back 한번에 style 넣어주기 .front > figure 로 변경하면 한번에 스타일을 적용할 수 있다. 이미지 front 앞면 돌려주기 이미지 back 뒷면 돌려주기 ●backface-visibility : hidden; 뒷면 가려주기 html mosue hover 마우스 오버효과 앞면입니다. mosue ho..

wrap으로 내용을 감싸주는 영역 넣어주기 h3부터 쓴 이유 h3인 이유는 태그 순서에 따라 figcaption 3번째이기 때문에 h3 웹표준에 따르는 것이 좋음 ● 블럭구조: h태그, p태그 ● vh : ex) height: 100vh - 높이값을 가로로 100개를 나눠서 100개를 사용하겠다. ● letter-spacing: 글자 자간 [이미지사이즈] 이미지 사이즈 설정 시에 이미지 width : 100% 로 설정해주는 것이 좋음 이미지 사이즈 수정 시 이미지의 부모 태그 사이즈만 수정하면 된다. 부모의 사이즈가 수정되면 이미지 사이즈도 자동으로 변경된다. ●position 을 넣어주면 너비값을 잃기 때문에 너비값을 넣어줘야함 가상요소 넣어주기(플러스 마우스오버효과) ● 한 태그에 가상요소를 최대 2..

외부 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..