프로그래밍/Web38 [Web] 간단한 트랜지션부터 꽤 어려운 트랜지션까지 트랜지션 주기는 굉장히 쉽다. 아주 간단한 트랜지션부터 살펴보자. See the Pen Basic Transition by Jirong (@jirongkim) on CodePen. 이모티콘에 마우스를 올리면(hover) 투명도가 50% 되는 코드이다. https://hyun222.tistory.com/313 HTML 삽입 미리보기할 수 없는 소스 대표적인 예시로는 hover, focused, active가 있다. 더 많은 ps.." data-og-host="hyun222.tistory.com" data-og-source-url="https://hyun222.tistory.com/313" data-og-url="https://hyun222.tistory.com/313" data-og-image="https.. 2022. 5. 8. [Web] Font awesome 사용법 Font awesome은 여러 이모티콘을 무료로 사용할 수 있게 해주는 사이트이다. 사용법은 아래와 같다. See the Pen Untitled by Jirong (@jirongkim) on CodePen. font awesome 홈페이지에서 원하는것을 검색해서 i 태그를 붙혀넣으면 된다. 너무 간편하고 이쁘게 꾸밀 수 있어서 유용하다. link 태그는 아래 CDN 사이트를 참고하자. https://cdnjs.com/libraries/font-awesome font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers The iconic SVG, font, and CSS to.. 2022. 5. 7. [Web] 반응형 레이아웃 만들기(PC, 태블릿, 폰) 웹의 가장 큰 장점은 PC, 태블릿, 폰 등 인터넷이 되는 환경이라면 어디에서든 접속할 수 있는 것이다. 반대로 얘기하면 PC, 태블릿, 폰 모두 최적화를 해주어야한다. 반응형 웹을 만들기 위해서는 Head 태그에 아래 내용이 꼭 들어가있어야 한다. 이용자의 디바이스의 화면 크기에 맞춰서 설정한다는 대충 그런 뜻이다. 지렁이의 성장 블로그 100vw (viewport width), 100vh (viewport height)를 쓰게되면 화면이 꽉 차게 된다. 50vw로 작성하면 화면기준 50%의 크기를 가진다는 의미이다. 그럼 이제 이런걸 만들어 보겠다. @media screen and (max-width: 1200px){ .container{ background-color: greenyellow; } }.. 2022. 5. 5. [Web] Favicon 수정하기 이런게 Favicon이라고 할 수 있다. Favorite + Icon이다. 이거 수정하는 방법은 매우 간단하다. 출처 : https://ko.wikipedia.org/wiki/파비콘 대부분 브라우저에서 호환되기 위해 .ico를 사용하는게 유리하다. 2022. 5. 5. [Web] Open graph에 대한 간단한 설명과 사용법 공식사이트는 https://ogp.me 이다. 페이스북이나 인스타그램, 카카오톡에 링크를 공유하면 보이는 썸네일이나 제목 내용 같은게 있다. 그것을 내가 원하는대로 꾸밀 수 있는게 open graph (줄여서 og)라고 보면 된다. 공식 홈페이지가면 비디오, 이미지 등은 어떻게 사용하라는게 상세하게 잘 나와있고, 대충 맛만 보자면 이런식이다. head 태그 내부에 meta 태그로 이런것들을 설정해주면 된다. 2022. 5. 5. [Web] 내가 많이 쓰는 Emmet 기능 Emmet이 뭘까? https://emmet.io Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan emmet.io 공식 홈페이지에 "the essential toolkit for web-developers"라고 소개한다... 2022. 5. 5. 이전 1 2 3 4 5 6 7 다음
