corin

무한 스크롤을 만들어보고자 한다. 이는 이벤트 스크롤로도 가능하지만 IntersectionObserver을 이용하는 것이 reflow가 덜 일어나 더 좋다고 한다. 그리고 이벤트 스크롤은 연속해서 계속 이벤트가 발생하기 때문에 Debounce, Throttle관리를 해줘야하지만, IntersectionObserver은 그런 것들을 하지 않아도 된다. 작동 원리는 대충 이해하기로는 전체 페이지가 있고, 그 안에 우리가 보는 뷰가 있다는 것을 전제로 한다. 그 중 지정된 element가 우리가 보는 뷰 안에 들어오거나 나가는 것을 감지하여 이벤트를 발생해준다. 실행 목적 1. div 태그에 a 태그를 연이어 놓고 싶다. 2. 이 a 태그는 무한으로 만들어질 수 있고 이걸 스크롤로 계속 내리고 싶다. 태그 정..

기존에 유저의 입력을 받는 것은 input tag를 js에 가지고 와서 value값을 확인했다. 이번에 이런 부분이 비효율적임을 느꼈고 문제가 있던 부분 2가지를 고쳤다. 1 수정전: 기본값을 value로 설정하고 클릭하면 삭제하고 초기화하면 다시 생성하는 것으로 처리 수정후: input 속성 중 placeholder을 사용할 수 있다. > 사실 이건 제시된 화면에서 이렇게 처리하고 해서 처리한 부분이었다. > 찾아보니 placeholder를 지양하자는 블로그도 있었다. (https://ibrahimovic.tistory.com/30) > 그 근거 중 내가 느낀 제일 큰 문제점은 리더기에 읽히지 않는다는 점이었는데, 만약 이 말이 사실이라면 충분히 지양될 이유라고 생각된다. > 다만 해당 문제는 상위에 ..

목표 1. 내가 생각한 웹 기능을 구현할 수 있는지 실험목적(어디까지 프론트엔드로 되는지 몰라서 그냥 머리속에서 웹기능을 하나씩 만들어보는중.. ) 2. 이전에는 각 element 하나하나가 기능했다면 이번엔 동일한 류의 element(여기선 책)을 만들어 이걸 어떻게 다루어볼 수 있는지 확인 구상 1. 각 책은 아래로 임의 처리함 서울에서 강릉으로 > 왜 id로 안넣었느냐? 테마별 또는 best에 중복되는 경우 동일한 책이라고 처리하기 위해 > id로 하면 같은 책인 다른 요소가 다른 id를 가져야한다고 생각했음 (예. NEW BOOk의 "코딩의.."와 best의 "코딩의.."가 같길바람) > 일단 이런 생각으로 id가 아닌 class로 처리했고, id로 같은 방식이 되는지 다시 해볼 생각. 2. JS..

만약 하나의 태그에 여러 class를 부여하고 싶다? P 이렇게 띄어쓰기로 구분하면 된다. 이걸 이렇게 했다가 하고싶은 작업을 못했다..;;

todo list를 만들어 보았다. 바닐라 자바스크립트로 했는데 앞서 만든 심플한 게임은 하나의 요소를 변형시키는 정도였다면, 이번에는 하나의 요소가 변형되면 다른 요소도 같이 영향을 주는 것을 연습해보았다. 1. 실행화면 2. 내 코드 분석 1) HTML 2) CSS 3) JS : 첫 번째 사진은 큰 개괄 정리 3. 실제 코드 1) HTLM To Do List 할 일: NOT YET COMPLETE 2) CSS body { width: 70%; margin: 0% auto; padding: 5%; } header { border-bottom: 3px solid black ; border-bottom-style: double; text-align: center; } main { display: grid;..

아래 element를 직접 써면서 구현해보기 https://chsususua.tistory.com/147 [기본기 만들기] HTML element 정리_미완성 HTML element를 공부하고자 찾다가 좋은 블로그가 있어서 이를 바탕으로 간단하게 정리를 해보았다. 아직 미완이기 때문에 비어있는 곳도 많고 더 찾아야 하는 것들도 많다.. 이걸 기반으로 직접 코 chsususua.tistory.com 1. 구현화면 2. HTML element 구현 h1 h2 h3 h4 h5 h6 일반 text figure/figcaption/img 설명 새로운 문단! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 가나다라마바사아자차카타파하! 새로운 문단!! abcdefghijklmno..

갑자기 꽂혀서 만들어본 영단어 이어말하기 게임! 글자수 세기 프로그램이 split을 이용했다면 영단어 이어말하기는 유효성이 포인트이다. 아직은 HTML, CSS를 심플하게 할 수 밖에 없는데, 조금 더 공부해서 다양하게 적용해보면 좋을 것 같다. 아무튼 소요시간: 1시간 내외 새로 적용해본 것(JS): - input에서 enter을 누르면 click과 동일한 효과내기 > 검색해도 html에 추가하는 것이 많이 나오던데 나는 JS 안에서 작성하고 싶어서 고민. > 아래 함수를 넣으면 가능. 여기서 13은 enter를 의미(아스키코드) elemenet.addEventListener('keyup', (event) => { if (event.keyCode === 13) function(); }); - 숫자게임에..

아예 처음부터 내가 다 짜보고 싶어 도전! 어려운 기능은 HTML, CSS부터 막힐 거 같아서 쉬운 기능, 글자수를 세보고자 하였다. - 결론을 이야기하자면 기능은 무리없이 구현되지만 HTML에 문제가 있다. input에서 \n가 인식되지 않는다는 것을 알게 되었는데 이런 짧은 단어를 입력하는 것이 아닌 글을 입력해야 하는 경우에는 input이 아닌 다른 것을 사용해야 하는지.. 안되더라.. 그래서 일단 더 찾고 고치는 것보다는 HTML의 element 종류를 학습하는 것이 맞다고 느꼈다. 그리고 CSS 내가 처음부터 짜려고 하니까 진짜 안되더라.. 처음부터 디자인을 구상하고 들어가야 한다는 것을 새삼 깨달았다. - 아래는 내가 만든 글자수 세기 페이지이다. 소요시간은 한 30분~1시간? 1. 실행화면 ..

HTML과 CSS를 했다면 그건 그저 보여주기 위한 정적인 화면일 뿐이다. 그래서 이걸 동적으로 바꿔주는 것이 JS이다. 나는 JS만 공부했어서 이렇게 홈페이지에서 움직이게 하는게 되게 신기하고 어려웠다. 이거 역시 MDN을 기초로 하지만 끙끙 앓으면서 하고 있다. 난이도가 확 높아진다. 그래서 만약 따로 JS를 안배운 사람이라면 MDN을 보기 보단 "자바스크립트 인포"를 보는 걸 추천한다. 내가 이걸로 공부했는데 자세하게 나오고 여러가지 직접 쳐가면서 할 수 있어서 좋다. 아무튼, MDN으로 연결하는 것을 보고 있는데 "자바스크립트 첫 단계 > 자바스크립트에 대한 첫 시작"을 보며 분석해가며 공부하고 있다. 슬쩍 읽어봐도 뭔소리인지 모르겠어서 그냥 코드를 쫙 적고 이게 무슨 기능을 하는지, 이걸 하고 ..

공부는 https://developer.mozilla.org/en-US/docs/Learn/HTML 으로 했다. MDN은 영어로 되어있는데 한국어 번역으로 바꿔도 이해하기 쉽고 1부터 100까지 차근차근 정리가 되어있다. 그리고 무엇보다 돈이 들지 않는다. 그래서 아예 처음 입문한다고 하면 이걸로 공부하고 책 봐도 괜찮을 것 같다. 이거 한다고 한지가 언제인데 질질 끌어서.. 일주일 넘게 본 거 같다. 그렇게 오래 볼 것은 아닌데 하나하나 실험해보느라 늦었다. 하하 HTML, CSS의 기본적인 부분은 다 읽어보았지만, 하나 검색하고 하나 입력하고 하는 수준이다. 공부를 하며 직접 VSCode를 통해 HTML을 실험해보며 공부한 것을 작성하고, 그 HTML으로 CSS를 실험했다. CSS는 따로 txt파일로..