배운 것들/html,css,js
[Chrome] 구글 크롬 공룡 게임 가지고 놀기 👾
크롬을 사용중 인터넷이 연결되지 않았을 때, 이런 공룡 한마리가 튀어나와 공룡 게임을 즐길 수 있습니다 :) 오늘은 크롬 공룡게임을 가지고 재밌게 놀아볼게요!! 👾😆 공룡 게임 실행하기 보통은 공룡 게임을 플레이하기 위해 와이파이를 끄거나 데이터를 끄는 등 기기를 오프라인 상태로 만들지만, 오프라인 상태가 아니어도 이 공룡게임을 플레이할 수 있는 방법이 있습니다! 크롬 주소창에 chrome://dino 라고 쳐보세요! 그럼 공룡이 우릴 반갑게 맞이해줍니다 :) 이제 실행도 했겠다, 이제 공룡 게임을 커스텀해봅시다 공룡의 스피드 설정하기 우선 개발자 도구를 열어줍니다 맥: option-command-I 윈도우: F12 위의 단축키로 개발자 도구를 열어주시면, 이렇게, 무슨 소린지 모르겠는 외계어가 여러분을..
[JS] tilt.js 사용하기
Vanilla-tilt.js 깃허브 Repo micku7zu/vanilla-tilt.js A smooth 3D tilt javascript library. Contribute to micku7zu/vanilla-tilt.js development by creating an account on GitHub. github.com tilt.js를 사용하면 html에 tilt 효과를 줄 수 있습니다. 설치 깃허브에서 직접 코드를 복사해 js파일을 만들어도 되고, npm으로도 설치할 수 있다고 합니다. npm install vanilla-tilt (이 vanilla-tilt.js는 바닐라 스크립트(jQuery 이용 X, 순수한 자바스크립트)로 작성되었습니다.) 기본 사용 vanilla-tilt.js를 사용하려면 ..
[CSS] -prefix-free 사용하기
- Vendor Prefix 알아보기 - [CSS] Vendor Prefix란? vendor prefix가 무엇일까요? 우선, prefix에 대해 알아보겠습니다 :) Prefix의 뜻 알아보기 우선 prefix를 네이버 사전에서 찾아보면 위와 같이 "접두사"라는 뜻이 나옵니다. 자, 그럼 CSS에서 vendor prefix는. codingdiary26.tistory.com Vendor Prefix를 사용할 때, 일일이 CSS 속성에 각 브라우저의 Vendor Prefix를 입력하는 것은 매우 귀찮은 일입니다. 그런데, 마침 이 Vendor Prefix를 작성하지 않아도 알아서 자동으로 Vendor Prefix를 넣어주는 방법이 있습니다 :D Prefix free: Break free from CSS ve..
[CSS] Vendor Prefix란?
vendor prefix가 무엇일까요? 우선, prefix에 대해 알아보겠습니다 :) Prefix의 뜻 알아보기 우선 prefix를 네이버 사전에서 찾아보면 위와 같이 "접두사"라는 뜻이 나옵니다. 자, 그럼 CSS에서 vendor prefix는 영어의 un-, pre-처럼 앞에 붙여 쓸 수 있을 것 같다는 생각이 드실겁니다! 그럼 이제 한번 vendor prefix가 뭔지 알아봅시다! Vendor Prefix 알아보기 더보기 Vendor Prefix Vendor(판매 회사, 즉 브라우저 공급업체) Prefix(접두사) CSS에서 vendor prefix는 -moz-, -webkit-과 같이 쓸 수 있습니다. 그런데, 이게 무슨 역할을 하는 걸까요? Vendor Prefix는 실험적인 CSS 기능을 사용..
[html] link의 종류
html link의 target이 _blank라면 새 탭에서 링크를 띄운다. _self라면 그 링크를 클릭한 탭에서 링크를 띄운다. 실제 적용된 모습 티스토리 블로그를 html 모드로 바꿔 적용했다. target을 _blank로 설정했을 때 target을 _self로 설정했을 때
h 태그란? (<h1>, <h2>, <h3>.....)
html을 작성하면서, html 소스를 보면서 흔히 과 같은 것들을 볼 수 있었을 겁니다. 처음에는, "이게 뭐지?" 하며 궁금해합니다. 그렇다면, 과연 이게 뭘까요? h 태그의 개념 h 태그는 , 를 부르는 태그입니다. h 태그라는 개념 안에 h1, h2, h3 등 태그들이 있는 것이죠! 우선, 간단하게 말하자면, h 태그는 제목을 나타내는 태그입니다. h1, h2... 순으로 글자의 크기가 작아지죠. h1 h2 h3 h4 h5 h6 h 태그는 6가지가 있으며, 위에 나와있는 h1부터 h6까지가 바로 그것입니다. h 태그의 사용 h 태그를 사용하기 위해서는 다른 html 태그와 같이 와 로 감싸주면 됩니다. 따라서, body 태그 안에 다음과 같이 써줄 수 있습니다. h1입니다. h2입니다. h3입니다..
font-family란?
자, 코딩하시는 분들이 아마 한 번쯤은 들어보셨을 font-family는 무엇일까요? (못 들어보셨어도 괜찮습니다 :) font-family란 무슨 폰트로 지정해줄지 정해주는 코드입니다!! 자, 그럼 font-family는 어떤 형식으로 쓸까요? font-family: 'Noto Sans', sans-serif; 각 언어마다(css, React Native....) font-family가 조금씩 다르겠지만, 아마 위와 비슷할 겁니다. 우선 이 코드는 'Noto Sans'라는 폰트와 산세리프라는 폰트를 쓴다는 의미입니다. (물론 'Noto Sans'는 따로 먼저 나 @import로 불러와주어야 합니다.) span { font-family: 'Noto Sans', san-serif; } 이렇게 해주면, sp..