코딩(개발)/웹퍼블리싱(5) CSS 버튼 애니메이션 쇼핑몰이나 홈페이지에 많이 쓰이는 심플한 애니메이션 효과 html 소스 MIIU SOFT CSS SOURCE CODE Slide From Left Slide From Right Slide From Top Slide From Bottom css 소스 @font-face { font-family: 'NanumGothic'; src: url('https://cdn.jsdelivr.net/gh/miiusoft/font/NanumGothic/NanumGothic.woff') format('woff'); font-weight: normal; font-style: normal; } * { box-sizing: border-box; } .wrapper { max-width: 65rem; width: 100%; marg.. 2022. 5. 26. 웹폰트를 이용하여 내 쇼핑몰 글자를 바꿔보자 오늘은 아주 기초 css를 다뤄보자~ 고도몰로 운영하는 쇼핑몰의 기본폰트를 원하는 폰트로 바꿔보는 것이다!! 1. 고도몰 사이트로 들어간다. 브라우져는 크롬이 좋다. 내 사이트가 보여지는 화면에서 F12를 누른다 개발자모드가 보인다. 2. body태그의 스타일을 정의해 놓은 font-family 에 보면 맑은고딕이 처음에 호출되는 것을 볼수 있다. 이것을 카페24 아네모네 에어로 바꿔보자 3. 파일경로를 볼 수 있다. 내가 현재 적용중인 스킨이 고도몰에서 주는 기본 스킨 moment 이다. 디자인 모드에서 경로에 맞는 css 파일을 찾아서 열자. 4. 웹폰트 주소는 구글,눈누,나눔 등등 여러군데에서 받을 수 있다. 나는 우리사이트 에서 받았다. 원하는 부분에서 폰트를 복사하면 아래와 같이 소스가 나온다... 2022. 5. 19. 그림자 만들기 .prdtype_thumb_scroll .box{background-color: #fff; width: 380px; height: 390px; text-align: center;} /*박스그림자*/ .prdtype_thumb_scroll .box:hover { box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%); -webkit-box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 15px 35px rgba(0,0,0,0.1),0px 5px 15px rgba(0,0,0,0.1); } /*바뀌는 속도*/ .prd.. 2022. 5. 10. html 기초 안녕하세요~ 태니밀리언입니다. 오늘은 제목처럼 티스토리 꾸미기 해볼건데요, 우선 가장 기본적으로 알아야 할 웹언어... 엄연히 랭귀지가 붙어있죠~ HTML 기본 먼저 알아보고 차츰 티스토리를 꾸며 보겠습니다. 웹에 관련된 기본상식을 알고 가면 좋은데 제가 설명하기에는 내용이 너~무 길어지기도 하고 깔끔하게 정리되어 있는 페이지가 있으니 링크 걸어 드릴께요(맨 아래). 이것이 진정한 웹의 힘!! 🎯 웹의 핵심은 바로 상호 링크하여 서로 연결된다는것! 전세게 어디에서나 인터넷이 된다면 서로 문서 공유하기도 쉽고 파일을 주고 받기도 쉽죠. 웹이 없을때 문서는 우편으로 데이터는 디스크로 보내고 옮겼었죠. 지금은 링크를 통해 전세계인과 연결되어 있어요. 웹을 않할 수 없고 모를 수 없는 가장 중요한 이유 입니다... 2020. 12. 18. 이전 1 2 다음
