일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- NodeList
- 스크롤
- 확장성
- scrollevent
- localstorage
- JavaScript
- React
- 반복문
- classList
- For
- swiperjs
- css
- scrollY
- forEach
- width
- getBoundingClientRect
- pointermove
- swiper
- Hover
- mousemove
- html
- insertAdjacentHTML
- Animation
- NAV
- addEventListener
- 애니메이션
- Sticky
- scroll
- 이벤트리스너
- input
- Today
- Total
목록html (3)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/S11F5/btsDRnJq8yL/GUKQ10Jpxvf7MbvMxzsvOK/img.gif)
요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..
우선 시맨틱(semantic)의 사전적 의미는 '의미의, 의미론적인' 이다. 즉, 시맨틱 마크업은 의미있게 페이지를 짠다는 말이다. 의미있게 페이지를 짜는 것이 무엇일까? 단순히 div를 가지고 박스 배치를 하는 것이 아닌 div의 용도에 따라 의미가 있는 태그로 가독성도 높이고 또한 SEO(검색 엔진 최적화)에 유리하게 코딩할 수있다. *SEO는 쉽게 말하면 네이버나 구글에 키워드를 검색했을 때 얼마나 독자들에게 쉽게 노출되는 지를 의미한다. - 레이아웃 구조 홈페이지의 구성을 살펴보면 보통 다 비슷하기 때문에 예시를 보면 바로 이해할 수 있을 것이다. ex)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nZxqn/btsCwcKmfPL/Zerga4iTrqHFCcMBehE4t1/img.gif)
위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다. HTML 안녕하세요 반갑습니다. 안녕하세요 반갑습니다. 코딩 너무 재밌죠? 코딩 너무 재밌죠? CSS .box{ position: relative; transform: translateX(20%); } .box:first-child{ margin-top: 300px; } .gray{ text-align: center; font-size: 100px; color: #999; font-weight: bold; } .black-box{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; transition: all 0.3s; animation: w100 3s forwards..