frontend8 Console.dir이 뭘까? https://developer.mozilla.org/en-US/docs/Web/API/console/dir console: dir() method - Web APIs | MDN The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. developer.mozilla.org 먼저 공식문서를 첨부했다. 그 이후는 내가 이해한 내용을 쉽게 풀어내려고 한다... 2023. 6. 14. form 태그란 뭘까? https://www.w3schools.com/tags/tag_form.asp HTML form tag W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 먼저 공식문서를 첨부했다. 그리고 내가 이해한 내용을 써보려고한다. 사용자가 input 창에서 댓글을 쓰면 포커스가 input 창에 있어서 enter를 눌러도 댓글이 올라가지지 않았다. 포커스가 버튼에 있어야만 enter .. 2023. 6. 14. addEventLister 중 Blur와 Focus는 어떻게 쓸까? https://ko.javascript.info/focus-blur focus와 blur ko.javascript.info 기술에 대해 제일 잘 써져 있는 것은 공식 문서기때문에 제일 앞에 첨부를 하고 Blur와 Focus에 대해 내가 이해한 내용을 쉽게 풀어서 써보려고 한다. Blur와 Focus는 addEventListener의 한 종류로써 focus는 이벤트를 쓴 요소에 포커스를 두었을때 발생하고 blur는 이벤트를 쓴 요소에 포커스를 잃었을때 발생한다. 모든 태그에 쓸 수 있는 줄 알았는데 사용자와 상호작용하는 태그들에만 사용이 가능하고 div, span 같은 태그에는 적용이 안된다고 한다. 하지만! 하고 싶을 때는 html의 tabindex 속성을 쓰면 된다. 속성값은 숫자로 표현되며 1에 포커.. 2023. 6. 14. @midea를 이용해 반응형 웹 구현하기 일이 거대할까봐 걱정했는데 애초에 css 짤때 크기가 화면에 따라 키웠다 줄었다 할 수 있도록 신경써서 짜서 생각보다 쉬웠다. 그저 @midea만 사용해주면 손쉽게 되었다. Mission 9 | 반응형 구현 HTML, CSS repl.it 문제에서 Responsive Web(반응형 웹) 에 대해 학습하였습니다. 화면의 크기가 어느 지점(break point) 이하로 줄어들 시 우측 아이디 추천 섹션이 사라지도록 구현해주세요. 화면이 줄어들면 우측섹션이 사라져야해서 1200px에서 더 줄어들면 display속성을 none으로 설정해주었다. min과 max가 있어서 직접 적용해보면서 필요한 것을 적용하는 것이 좋을듯 하다. @media screen and (max-width: 1200px) { .main-r.. 2023. 6. 13. opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기 프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만 메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다. 실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요. 메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요. 먼저 DOM으로 필요한 값들을 불러왔다. const man = document.getElementById("man"); 버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다. 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다. 이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아.. 2023. 6. 13. 댓글, 좋아요, 삭제 기능 구현하기 main 페이지에서 처음으로 자바스크립트 활용한 과제이다. 4번과 6번이 연관이 있어서 한번에 진행했다. 댓글 입력 후 엔터키를 누르거나 게시 버튼 클릭 시 댓글이 추가될 수 있도록 구현해주세요. 댓글 마다 좋아요, 삭제 버튼을 추가해 버튼을 누를 시 각각의 기능이 실행되도록 구현해주세요. 먼저 필요한 값들을 DOM으로 불러왔다. ID값은 전체 파일 중 1개라 불러내면 1개만 나오지만 class는 여러개일 수도 있어서 배열로 나오기때문에 index를 적어줘야한다. const inputComment = document.getElementById("input"); const buttonComment = document.getElementById("button"); const newComment = docum.. 2023. 6. 13. 이전 1 2 다음
