여태까지 레이아웃을 나눌 때 display:flex를 사용하여 레이아웃을 나누곤 했다. 이번엔 grid를 간단하게 사용해보았다. HTML 1째줄 왼쪽 1째줄 가운데 1째줄 오른쪽 2째줄 왼쪽 2째줄 가운데ㄴ 2째줄 오른쪽 레이아웃을 나눠보기위해 간단하게, header div를 생성하고, 명시적으로 보여주기위해, 1째줄왼쪽부터 2째줄 오른쪽이라는 글자를넣어주었다. CSS .header { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left center right" "left-2 center-2 right-2" "left-3 center-3 right-3"; } .lef..
css를 작성할 때 단위로 쓰이는 여러가지 단위들이있는데, 절대단위와 상대단위로 나눌수있다. 절대단위로는 px 상대단위로는 vw,vh,em,rem등이 있다. px 보통 픽셀이라고 부르며, 모니터에 따라 상대적으로 표시된다. 그러므로 반응형 웹에는 적절하지 않을 수 있다. em, rem em은 부모의 글꼴크기에 영향을 받는다. rem은 루트요소의 글꼴크기에 영향을 받는다. 이해를 돕기위해 예제를 해보기로했다. 예제. PX EM REM .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-size: 1rem; } EM : 부모태그에 font-size에 따라 달라진다. 즉 부모태그에 적용된 font-size가 1em이 된다. 예제. 기본 권장값으로 설정되..
면접에서 단골질문 호이스팅이다. 간단하게 설명들을 보면 함수 혹은 변수를 가장 상단으로 올려주는 현상(?)이라고 알수있다. 이번에 확실하게 알아두고자 공부를 해보았다. 단어 말 뜻 그대로 끌어올린다는 뜻이다. - 인터프리터가 변수와 함수의 메모리 공간을 선언하기전에 미리 할당하는것을 의미한다. - 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것을 의미한다. 결국, 코드가 시작되기 전에 변수, 함수 선언이 해당 *스코프의 최상단으로 끌어 올려지는 것을 말한다. 더 정확히 말하자면 끌려 올려지는 것처럼 보인다. 코드가 실제로 끌어올려지진 않는다. *스코프 : 범위를 뜻한다. 즉 변수에 접근할 수 있는 범위 자바스크립트는 코드를 실행하기 전에 함수와 변수 선언을 Lexical Envi..
전에 구현해봤던 todo-list에 음성인식 기능을 추가해서 키보드와, 음성인식을 통해 입력창에 입력할수있도록 구현해보기로했다. useSpeechToText import SpeechRecognition, { useSpeechRecognition, } from "react-speech-recognition"; const useSpeechToText = () => { const { transcript, listening, resetTranscript } = useSpeechRecognition(); const toggleListening = () => { if (listening) { SpeechRecognition.stopListening(); resetTranscript(); // 음성 인식을 중지할 때..
-
CSS - display(grid)
여태까지 레이아웃을 나눌 때 display:flex를 사용하여 레이아웃을 나누곤 했다. 이번엔 grid를 간단하게 사용해보았다. HTML 1째줄 왼쪽 1째줄 가운데 1째줄 오른쪽 2째줄 왼쪽 2째줄 가운데ㄴ 2째줄 오른쪽 레이아웃을 나눠보기위해 간단하게, header div를 생성하고, 명시적으로 보여주기위해, 1째줄왼쪽부터 2째줄 오른쪽이라는 글자를넣어주었다. CSS .header { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left center right" "left-2 center-2 right-2" "left-3 center-3 right-3"; } .lef..
-
px,em,rem
css를 작성할 때 단위로 쓰이는 여러가지 단위들이있는데, 절대단위와 상대단위로 나눌수있다. 절대단위로는 px 상대단위로는 vw,vh,em,rem등이 있다. px 보통 픽셀이라고 부르며, 모니터에 따라 상대적으로 표시된다. 그러므로 반응형 웹에는 적절하지 않을 수 있다. em, rem em은 부모의 글꼴크기에 영향을 받는다. rem은 루트요소의 글꼴크기에 영향을 받는다. 이해를 돕기위해 예제를 해보기로했다. 예제. PX EM REM .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-size: 1rem; } EM : 부모태그에 font-size에 따라 달라진다. 즉 부모태그에 적용된 font-size가 1em이 된다. 예제. 기본 권장값으로 설정되..
-
호이스팅이란?
면접에서 단골질문 호이스팅이다. 간단하게 설명들을 보면 함수 혹은 변수를 가장 상단으로 올려주는 현상(?)이라고 알수있다. 이번에 확실하게 알아두고자 공부를 해보았다. 단어 말 뜻 그대로 끌어올린다는 뜻이다. - 인터프리터가 변수와 함수의 메모리 공간을 선언하기전에 미리 할당하는것을 의미한다. - 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것을 의미한다. 결국, 코드가 시작되기 전에 변수, 함수 선언이 해당 *스코프의 최상단으로 끌어 올려지는 것을 말한다. 더 정확히 말하자면 끌려 올려지는 것처럼 보인다. 코드가 실제로 끌어올려지진 않는다. *스코프 : 범위를 뜻한다. 즉 변수에 접근할 수 있는 범위 자바스크립트는 코드를 실행하기 전에 함수와 변수 선언을 Lexical Envi..
-
todo-list 음성인식으로 리스트 추가하기(feat.react-speech-recognition)
전에 구현해봤던 todo-list에 음성인식 기능을 추가해서 키보드와, 음성인식을 통해 입력창에 입력할수있도록 구현해보기로했다. useSpeechToText import SpeechRecognition, { useSpeechRecognition, } from "react-speech-recognition"; const useSpeechToText = () => { const { transcript, listening, resetTranscript } = useSpeechRecognition(); const toggleListening = () => { if (listening) { SpeechRecognition.stopListening(); resetTranscript(); // 음성 인식을 중지할 때..