개요 마우스의 움직임에 연동하여 Text 의 Shadow 가 변하게 구현해보자 내용 Element 에 contenteditable 만 넣어주면 input 이나 textarea 태그와 마찬가지로 편집이 가능하게 된다. 1) hero 는 아래의 style 에 따라 전체 윈도우 화면을 차지하게 된다. 2) text 는 글자가 있는 태그를 가리키게 되고 walk 는 그림자가 떨어지는 비율과 관련이 있다. 3) 전체 윈도우를 커버하는 hero 는 mousemove event 가 발생하면 shadow 함수를 호출한다. shadow(e) 함수 1) hero.offsetWidth, hero.offsetHeight 를 각각 width, height 에 할당해준다. 마찬가지로 e.offsetX, e.offsetY 를 각각..
개요 - 입력한 값을 목록에 추가한다. - 입력한 값을 로컬에 저장하는 Local Storage 개념을 이해해본다. index-START.html - 참고 링크: https://css-tricks.com/using-svg/ - svg 얻을 수 있는 사이트: https://thenounproject.com/ - 이미지를 다운로드 한 다음 소스를 보면 svg 태그가 보인다 - svg 라는 태그를 통해 이쁜 이미지를 가져다 붙일 수 있다 1) 위와 같은 svg 이미지가 있고 2) h2, ul, li 태그들로 글자들이 위치해 있다. 3) 그리고 가장 중요한 입력창 form -- script 는 1) .add-items 를 가져온 addItems 2) .plates 를 가져온 itemsList 3) 그리고 입력된..
- Total
- Today
- Yesterday
- agile
- folklore
- ChatGPT
- intellij
- 중용
- websocket
- Gin
- 인텔리제이
- pool
- API
- github
- 2023
- bun
- postgres
- strange
- golang
- 클린 애자일
- OpenAI
- ORM
- solid
- go
- 독서후기
- Bug
- 체호프
- 명상
- 잡학툰
- Shortcut
- notion
- 영화
- 노션
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |