본문 바로가기

전체 글311

[Web] pseudo element 간단한 소개 pseduo class는 .container i:hover{ opacity: 0.5; } 이런식으로 주면 됐다. 자세한건 여기를 참고. See the Pen Untitled by Jirong (@jirongkim) on CodePen. mail이라는 클래스를 사용하면 굳이 머리말 꼬리말을 적을 필요없이 자동으로 입력되는 클래스를 작성한다고 하자. HTML에서 구현할 수도 있다. 하지만, 아주 많이 쓰이는 클래스라면 HTML이 너무 복잡해지고 더러워질 경우가 있기 때문에 이런걸 쓴다. 이외에도 다양한 element-pseudo가 있다. 또한 크롬 개발자 도구에서는 ::after를 클릭하면, 적용된 css를 확인할 수 있다. 2022. 5. 9.
[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.

티스토리툴바