일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- JavaScript
- NodeList
- Hover
- For
- React
- scrollY
- 확장성
- 애니메이션
- swiper
- scroll
- scrollevent
- mousemove
- forEach
- addEventListener
- 반복문
- swiperjs
- width
- getBoundingClientRect
- 이벤트리스너
- input
- pointermove
- Animation
- css
- html
- localstorage
- NAV
- classList
- insertAdjacentHTML
- Sticky
- 스크롤
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qU3fk/btsCZ20zNwU/kGaSFE5yT9WexnfLNJsEMK/img.gif)
스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다. 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/meh3I/btsCR96VUmq/1SP69txzt9FPzjb5gbvCo1/img.gif)
이렇게 한글자씩 적어나가는 타이핑 애니메이션을 만들어보았다. 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
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nkfQw/btsCUX5tdQI/C2ljYaao8V4OdgbwllXlNK/img.gif)
위의 사진처럼 카드에 마우스 커서가 올라가면 커서따라 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/..
우선 시맨틱(semantic)의 사전적 의미는 '의미의, 의미론적인' 이다. 즉, 시맨틱 마크업은 의미있게 페이지를 짠다는 말이다. 의미있게 페이지를 짜는 것이 무엇일까? 단순히 div를 가지고 박스 배치를 하는 것이 아닌 div의 용도에 따라 의미가 있는 태그로 가독성도 높이고 또한 SEO(검색 엔진 최적화)에 유리하게 코딩할 수있다. *SEO는 쉽게 말하면 네이버나 구글에 키워드를 검색했을 때 얼마나 독자들에게 쉽게 노출되는 지를 의미한다. - 레이아웃 구조 홈페이지의 구성을 살펴보면 보통 다 비슷하기 때문에 예시를 보면 바로 이해할 수 있을 것이다. ex)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/AnE4n/btsCMzyiXv8/EzFvM5cxJ5uXKWDqH46Ei1/img.gif)
이렇게 특정 위치에 도달하면 div의 속성을 바꾸고 특정 위치를 벗어나면 속성을 원래대로 돌리는 애니메이션을 만들었다. HTML 여기는 고정! 왼쪽은 고정, 오른쪽에 여러개의 box를 만들어두었다. CSS .section{ width: 100%; height: 500vh; margin-top: 500px; display: flex; } .left{ position: sticky; top: 0; width: 50%; height: 100vh; } .left p{ text-align: center; font-size: 60px; margin-top: 300px; } .right{ width: 50%; display: flex; } .right-left, .right-right{ width: 50%; } .r..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rxRRq/btsCEIbqLsE/f4no8LllGMAwlekkXOWKT0/img.gif)
스크롤을 내리다가 특정 위치가 되면 가로로 스크롤되는 것을 만들었다. HTML 가로 스크롤 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTML은 매우 간단하다. 그냥 가로로 스크롤 될 박스 하나만 만들어주면 된다. CSS .section{ margin-top: 1000px; margin-bottom: 1000px; contain: paint; height: 300vh; } .scroll-box{ width: 200vw; height: 100vh; background: linear-gradient(90deg, #abc123,#321cba); position: sticky; top: 0; left: 0; } 이번에도 또한 pos..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYofHs/btsCN1AdZYS/C9vp5K2Qog0utHIRIQInDK/img.gif)
스크롤하면 메인 title이 서서히 사라지고 메인 visual의 크기가 커지면서 전체 화면을 차지하는 애니메이션을 만들어보았다. 잘 쓰면 꽤나 멋진 홈페이지를 만들 수 있지 않을까 싶다. HTML 무슨 일이 일어날까요?? 짜잔~ HTML은 간단하게 타이틀과 사진만 배치했다. CSS .title-box { position: fixed; top: 300px; left: 30%; z-index: 10; } .title { font-size: 60px; } .section { margin-top: 600px; width: 100%; height: 200vh; margin-bottom: 600px; } .photo-wrap { display: flex; justify-content: center; gap: 60p..