studyHard
article thumbnail
아고라 스테이츠 2
SEB_FE_44/과제 2023. 3. 10. 19:00

Descriotion Section 1에서 배운 내용을 총 동원하여 나만의 멋진 아고라 스테이츠를 만듭니다. 배포링크 https://jiwonp12.github.io/fe-sprint-my-agora-states/ My Agora States jiwonp12.github.io Bare Minimum Requirement Self Checklist 스스로 구현 완료한 부분까지 체크하여 제출합니다. ✅ 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. ✅ CSS ✅ 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. ✅ style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다. ✅ colorhunt, ..

article thumbnail
아고라 스테이츠
SEB_FE_44/과제 2023. 3. 9. 23:55

아고라 스테이츠 (미완) 사이버 펑크 느낌으로 만들어 보고 싶어서 꾸며보았다.. 근데 아직 디테일한 디자인이 많이 부족한 것 같다. submit버튼을 만들 때 기존에 있던 함수를 활용하지 않고 작성을 했다가 코드가 굉장히 지저분해서 다시 지우고 새로 작성을해주었다. // SUBMIT BTN const inputName = document.querySelector("#name"); const inputTitle = document.querySelector("#title"); const textInput = document.querySelector("#story"); const inputForm = document.querySelector(".form"); const now = new Date(); // I..

article thumbnail
DOM 2
Language/JavaScript 2023. 3. 8. 16:21

DOM 모자딥다 추가정리 getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 (live) DOM 컬렉션 객체다. const { childNodes } = $something; // childNodes 프로퍼티 또한 NodeList 객체(live)를 반환한다. Apple Banana Orange const $elem = document.getElementsByClassName("red"); // 이 시점에 HTMLCollection 객체이는 3개의 요소 노드가 담겨 있다. console.log($elem); // HTMLCollection(3) [li.red, li.red..

article thumbnail
DOM 기초 개요
Language/JavaScript 2023. 3. 7. 13:47

DOM Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다. (CRUD를 이해한 다음에는 세세한 메서드들을 알아야 합니다.) document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의. Create document.createElement..