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

목차 오늘 원래 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 해당 사이트로 들어가면 한글 링크로 들어갔기에, 한글로 뜰 테지만 만약 영어로 뜬다면 하단의..

목차 웹 개발을 하다가 사이트를 캡처하고 싶을 때가 많다. (포스팅을 위해서라던가, 결과를 팀원과 공유할때) 지금까진 윈도 캡처 도구를 썼었는데, 개발자 도구에서 캡처하는 방법이 있어 공유한다. 또한 안 되는 경우가 있는데 해결방법도 이해되지 않지만 발견되어 공유한다 캡처하기 캡처하고 싶은 사이트에서 f12를 누른다. ctrl shift p를 눌러 명령 팔레트를(Command Palette) 연다. 참고로 VS Code에서도 같은 단축키이니, 기억해두는 게 좋다. full을 입력하여 Capture full size screenshot을 선택해준다. 캡처된 png 이미지 파일이 생성된다. 에러 위의 방법과 같이 캡처를 했을 때 에러가 뜨는 경우가 있다. 이게 구글링을 해도 해결방법이 안 뜨고 원인이 불분명..

목차 Axios란 브라우저와 Node.js사이의 통신을 위한 라이브러리 Promise API를 사용하는 HTTP 비동기 통신이다. HTTP 응답 데이터를 JSON 형태로 자동 변경해주는 것이 특징이다. Promise API 비동기란 서버로부터 응답을 기다리는 중이라도 다른 작업을 할 수 있는 것을 말한다. 비동기 통신에서 Promis API란 서버에 데이터를 요청한 뒤, 다른 작업을 먼저 할때, 요청에 대한 데이터를 받지 않았음에도 데이터를 표현하려 하면 오류나 빈 화면이 뜨기에, 이를 보완하기 위해 결과를 미리 받아 보는 것이다. 활용 Axios를 사용하기 위해선, 패키지 매니저를 통하여 개발환경에 추가하여야 한다. 터미널에서 npm i axios를 입력하여 axios를 패키지에 추가해주자. (i 는 ..