ZeroToHunnit Coding

위와 같이 배경에 따라 글자의 색이 자동적으로 변하는 신기한 CSS 코드 'mix-blend-mode'가 있다. HTML 안녕하세요~ CSS .section{ width: 100vw; height: 100vh; position: relative; } .up{ width: 100%; height: 50%; background-color: black; } .down{ width: 100%; height: 50%; background-color: white; } .letter{ font-size: 80px; text-align: center; mix-blend-mode:difference; color: white; rotate: 90deg; position: absolute; top: 50%; left: 50..

여러 개의 타이틀이 있고, 각 타이틀에 마우스를 대면 해당 타이틀에 맞는 컨텐츠를 보여주고, 다른 타이틀에 마우스를 올리면 이전에 보여졌던 컨텐츠는 숨기고 새로운 컨텐츠를 보여주는 기능을 만들었다. HTML A site 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. B site 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. C site 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C ..

이런 신기한 폰트 애니메이션을 만들어보았다. HTML H E L L O W O R L D p태그에 따로따로 담아주었다. CSS @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); .font{ font-family: "Hepta Slab"; text-align: center; margin-top: 300px; font-size: 60px; font-variation-settings: "wght"100; white-space: nowrap; float: left; animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s; } .font:n..

위와 같이 스크롤 함에 따라 큰 박스가 3개로 나눠지고 뒤집어져서 뒷면이 나오는 기능을 구현해봤다. HTML 카드1 뒷면 카드2 뒷면 카드3 뒷면 스크롤 ㄱㄱ CSS .section{ height: 6000px; } .wrapper{ width: 100%; height: 100vh; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; background-color: black; } .grid{ display: grid; width: 1200px; height: 50vh; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; grid-auto-col..

스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다. HTML CSS body, html{ height: 6000px; } .bar{ width: 100vw; height: 50px; position: fixed; top: 0; left: 0; background-color: #999; } .percent{ width: 0; height: 100%; background-color: black; transition: all 0.1s; } 전체 높이 6000px로 잡아주고 bar 박스는 위에 고정시켜주었다. JAVASCRIPT let percent = document.querySelector('.percent'); let screenHeight = document.que..

- 정규식이란? 정규식은 문자열에서 특정 문자를 찾기 위한 것이다. 즉 어떤 문장에 특정 문자가 포함되어있는가를 파악할 수 있다는 뜻이다. - includes() includes함수는 영어 뜻 그대로 포함되어 있는가를 파악해준다. 하지만 단순히 포함되어 있는지만 파악하기 때문에 한계점이 많다는 단점이 있다. ex) 'abc'.includes('a') >> true 반환 / 'abc'.includes('d') >> false 반환 - test() test함수는 정규 표현식을 만족하는지 판별해준다. /포함문자여부/.test('검사할 문자')의 문법을 가진다. ex) /^a/.test('abc') >> true 반환 (//안에 ^a는 a로 시작하냐라는 의미이다.) /[a-z]/.test('abc') >> tr..

이렇게 한글자씩 적어나가는 타이핑 애니메이션을 만들어보았다. HTML CSS .section{ margin-top: 300px; } .section p{ text-align: center; font-size: 60px; } JAVASCRIPT const typingText = "안녕하세요~ 글자 타닥타닥"; const text = document.querySelector(".text"); let i = 0; function typing(){ if (i

위의 사진처럼 카드에 마우스 커서가 올라가면 커서따라 3d느낌으로 위로 솟는 느낌으로 만들어봤다. HTML CSS .box{ width: 511px; height: 321px; margin-top: 300px; margin-left: 500px; transition: all 0.1s; position: relative; } .photo{ width: 100%; height: 100%; background-image: url(card.png); } 박스에 크기를 정하고 photo는 background로 이미지를 넣어주었다. JAVASCRIPT document.querySelector('.box').addEventListener('mousemove', function(e){ let rotateY = -50/..