본문 바로가기

wecode14

[Javascript] addEventListener에서 event 넘기는 방법 (콜백펑션이 함수 선언식일 때) 알고 보면 굉장히 간단한 문제인데, 한참을 헤매었습니다. 콜백펑션에서 event는 어떻게? commentForm.addEventListener('submit', addComment); function addComment(e) { e.preventDefault(); ... ... } 위와 같이 콜백 펑션에 함수 선언식 형태로 넣어주고 싶은데, 아시다시피 콜백펑션에서 괄호를 넣어주면 안됩니다. ❌❌❌ commentForm.addEventListener('submit', addComment(e)); ❌❌❌ 그렇다고 애로우 펑션을 활용해서 익명함수 형태로 넣으면 함수 재사용이 불가능해 코드가 더러워지게 됩니다.이럴땐 어떻게 해야할까요??? 이럴 땐 애로우 펑션으로 익명함수를 만들어 주되, 미리 선언한 함수 선언.. 2022. 7. 28.
[css] block, inline, inline-block block block은 레이아웃을 잡는데 기본이 되는 요소이다. div를 필두로, h1 ~ h6, form, header, aside, article, address, table, 등등이 block이 기본인 요소들이다. Block의 특징 block의 특징은 width, height, margin, padding 설정이 가능 하다는 것이다. 또한 block 내부에 다른 block이나 inline등을 배치하고 레이아웃을 지정해주는 역할 또한 가능하다. inline inline은 block과 반대되는 개념이다, span, a, img, input, label, button 등이 inline이 기본인 요소이다. inline의 특징 inline은 width, height 지정이 불가하며, 컨텐츠의 영역이 크기로 .. 2022. 7. 19.
[css] Layout 잡기 1 (position 속성 - relative, absolute, fixed) 오늘은 CSS에서 가장 중요한 "레이아웃"을 잡기 위해 사용되는 position 속성에 대해 포스팅한다. position : fixed; { position : fixed; } 는 상단 바 (nav bar)나 aside bar를 만들기 위해 보통 사용하는 CSS속성이다. 이름에서 유추할 수 있듯, 위치를 고정시키기 때문에 스크롤을 아래로 내려도 상단에 nav bar가 유지되는 걸 구현할 수 있다. 빠르게 코드와 결과물을 보도록 하자. Relative, Absolute { position : relative; } 는 left, right, top, bottom 과 함께 사용하여 위치를 지정할 수 있다. { position : absolute } 는 부모 중에 position이 relative, fixed,.. 2022. 7. 19.
Simentic Web이란? (img태그와 background-image의 차이) HTML / CSS 기초를 다시 훑는 중 "Simentic Web, Simentic Tag란 무엇일까?" 라는 질문에 답하기 위해 포스팅합니다. 한 줄 정리 시멘틱 웹은 "컴퓨터가 이해할 수 있는 웹", "사람이 이해하기 쉬운 웹"이고 이를 가능하게 해주는 방법이 "시멘틱 태그"를 사용하는 것이다. Simentic Web Simentic Web을 직역하면 "의미론적인 웹"이란 뜻이다. 이를 한국어로 제대로 번역하면 1) 기계도 이해할수 있는 웹, 2) 개발자가 한층 더 이해하기 쉬운 웹 이라고 번역하면 될것 같다. 예를 들면 과거에는 태그 하나로 모든 HTML 문서를 작성 하다 보니 HTML 한 페이지 안에 div태그만 수십개가 존재했고, 이를 해결하기 위해 "id, class" 등의 attributes.. 2022. 7. 18.

티스토리툴바