아싸지만 1일1글 하고싶어

목차 EventListener 사용자가 어떤 행동(event)을 했을 때, 반응하여(listener) 지정된 행동을 하는 것을 eventlistener라 한다. Event 종류 종류는.. 그냥 모든 것이라 할 수 있다. 대충 말하는 게 아니라 진짜 모든 것이다. 마우스 클릭부터, 마우스를 움직였을 때, 스크롤했을 때, 심지어 브라우저의 크기를 변경했을 때까지 있다. 이벤트 참조 | MDN 이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 developer.mozilla.org 처음에는 너무 높은 자유도에, 더불어 활용을 떠올리기 쉽지 않다. 그러니 자주 쓰이는 li..

여러 가지 버튼을 만들고 각각의 버튼에 따라 다른 효과를 내기 위해, switch가 필요하게 되었다. 그런데 뭔가 switch보다 더 이쁘게 쓰고 싶어 찾아보다가 enum을 알게 되어 포스팅하게 되었다. Switch 일단 enum과 비교할 겸 switch를 한번 짚고 넘어가자! switch는 지정 변숫값에 따라 여러 결과를 나타낼 수 있는 분기문(상황에 따라 달라지는 문장)이다. 일단 html은 기본값으로 넣고 Js 불러오기 외에는 기본값이다. let choice = 1; switch(choice){ case 0 : document.body.style.background = 'tomato'; break; case 1 : document.body.style.background = 'skyblue'; bre..

목차 오늘 원래 setTimeout 포스팅하려 했는데, line-height로 질문이 많이 들어왔는데 설명이 잘 된 김에, 포스트도 이걸로 하려 한다. line-height line-height는 직역하자면 줄의 높이로써, 글의 한줄한줄의 길이를 뜻한다. 사진에서 알 수 있듯이, line-height는 글자크기와 같지 않다. 상상해보자 두줄이 있는데 줄 사이 간격이 0이라면 보기만 해도 답답하다. 그렇기에, line-height를 생각할 때는 글자크기 + 줄 사이 간격이라 생각하면 된다. flex vs line-height line-height는 중앙 정렬을 위해 자주 쓴다. 물론... 더 편한 float가 있지만... 호환성에서 line-height가 살짝 호환성이 높기 때문에, 알아두는 것도 괜찮긴 ..

햄버거 메뉴에 대한 이슈가 화제가 되었었다고한다. 화면을 구성하는 분야이다 보니 이런 이슈를 잘 아는것도 도움이 된다고 생각한다. 햄버거 메뉴 ISSUE 작년 한해 각종 사이트에서 햄버거 메뉴(drawer button)에 관해 여러 논란이 있었습니다. 그 중 대부분은 햄버거 메뉴에 대한 부정적인 의견들이 많았는데요, 그들의 의견을 모아 정리해보고 왜 그 story.pxd.co.kr

목차 저번 포스트에서 태그 추가하는 법을 지나치듯 짚고 넘어갔었다. SVG Z-index 목차 SVG SVG는 백터 로 이미지 를 표현하는 태그 이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이 sirong.tistory.com 이에 대해 좀 더 짚어보려 한다. createElement() 함수 이름에서 감이 오겠지만 요소를 생성하는 함수이다. 조금 더 친숙한 말로 얘기하자면 태그 만들기!! createElement인자로 "태그명"을 적어주면, 그 태그를 만들 수 있다. document.createElement("div"); 코딩 자 한번 직접 만들어보자! html 기본 코드이다. 오늘 ..

목차 후.. 한글로 적혀있던 글에서는 마지막에 뚝 끊겨있어서 생각보다 좀 더 찾아야 했다 ㅜ 하지만 그말은 내 글의 경쟁력이 높아진다는 것!! 우클릭 Code 실행이란 간단히 말해 작업하고자 하는 파일, 폴더를 우클릭했을 시 그 파일, 폴더를 Vs Code로 실행시키는 작업을 말한다. 윈도에서는 설치 프로그램에서 설정을 하면 바로 가능하다. 하지만 맥에선 조금 설정을 해줘야 한다 설정 맥에서 이 기능을 Automator를 통해 설정하고자 한다. 구글링 해보면 포인트 앤 클릭으로 간단한 작업을 빠르게 수행~~ 이라는데, 간단하게매크로다. command + spacebar를 눌러 Spotlight search를 실행시켜주자 Automator를 검색하여 실행시켜주자 Automator를 실행시키면 문서 유형 선..

목차 SVG SVG는 백터로 이미지를 표현하는 태그이다. 이런 식으로 html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 sirong.tistory.com 정렬순서 변경 그런데 문제는, svg 요소들의 정렬순서를 바꾸고 싶을 때이다. svg는 정렬순서를 마크업 순서 (코드 순)에 따라 정해지기에, 이를 변경하기 위해선 코드를 재배열하는 수밖에 없다. 재배열하는 방법에는 크게 두 가지가 있는데 Use태그 쓰기 Use태그는 Svg 자식 요소를 복사하는 태그이다. 복사하고자 하는 태그를 class / id로 명시하고 Us..

목차 HomeBrew HomeBrew는 패키지 관리자로써, 비슷한 프로그램 으로써 리눅스의 yum / apt-get 윈도우의 choco 등이 있다. 장점으로는 리눅스의 패키지 관리자(apt-get)와 비슷한 사용법을 가지고 있다는 것, 단점으로는 커뮤니티 기반의 운영으로써 패키지의 안전성이 보장되지 않는다. 또한, 홈브류로 패키지를 설치할 경우 최신 버전으로 설치되기에, 구버전의 패키지 설치는 추가적인 조작이 필요한데 이것이 좀 번거롭다. 설치 일단 설치를 하려면 공식 사이트부터 들어가야 한다. Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 해당 사이트로 들어가면 한글 링크로 들어갔기에, 한글로 뜰 테지만 만약 영어로 뜬다면 하단의..