본문 바로가기

전체 글

[VSCode] string 안에서 emmet 자동완성기능 활성화하기 js에서 백틱 기호 안에 css 코딩을 하는 경우 emmet 자동완성 기능이 활성화되지 않는데, 이를 활성화시킬 수 있다. vscode에서 ctrl + , 누르고 우측 상단의 '설정열기(json)' 버튼을 클릭하고 다음 코드를 추가한다. "emmet.includeLanguages": { "javascript": "javascriptreact", "typescript": "typescriptreact", "javascriptreact": "css" }, "emmet.triggerExpansionOnTab": true, "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } "emmet.includeLanguages":.. 더보기
[프로젝트시작] NodeJS, reflex 1. NodeJS 설치하기 1) 웹사이트에서 찾아서 NVM-windows(node version manager) 설치하기 2) 터미널에서 nvm install 버전 으로 설치하기 : nodejs.org 사이트에서 LTS버전 확인 가능 3) nvm use 원하는버전 (사용하기를 원하는 버전을 사용상태로 만듦) - nvm list 를 통해 설치되어 있는 모든 버전 확인 가능 - nvm uninstall 원하는버전 : 해당 버전 삭제 가능 2. NodeJS 프로젝트 시작하기 1) 프로젝트를 시작할 폴더 생성하기 2) VSCode에서 폴더 열기 3) 터미널에서 npm init -y : package.json 파일 생성하면서 npm 프로젝트 시작 4) npm install 패키지명 : lodash, parcel .. 더보기
[CSS] div 안의 div를 가운데 배치하기, 수평&수직, position 이번에는 position을 이용하여 수평 가운데, 수직 가운데 배치를 하는 방법을 알아보겠습니다. 먼저 이전 글에서 말씀드렸던 width & margin:auto 를 이용한 코드를 보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 잠시 margin:auto는 삭제하겠습니다. 그리고 position 속성을 부모요소( .container )와 정렬될 요소( .item )요소에 넣으면 아래의 코드가 됩니다. .container { background-color: yell.. 더보기
[CSS] div 안의 div를 가운데 정렬하기, 수평&수직, display:flex 이 전 글에서 width와 margin:auto를 이용해 div 안의 div를 수평정렬하는 방법을 알아봤습니다. 그 코드를 다시 한번 살펴보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 그 결과는 아래와 같습니다. 이 방법은 수직 정렬에는 사용할 수 없습니다. display:flex 를 이용하여 수평 가운데 정렬을 하는 방법을 알아보겠습니다. ----- CSS 코드 ----- .container { background-color: yellow; display: f.. 더보기
[CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto 위의 코드와 같이 div가 중첩되어 있을 경우 안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다. 이 때 필요한 CSS 코드는 width와 margin: auto 입니다. 우선 div 요소에 CSS에서 사용할 이름을 부여하고, 화면에 보이도록 배경색을 설정해보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; } 이 상태로 웹페이지에서 확인하면 화면에 아무것도 나오지 않습니다. div태그는 block요소이고, block요소의 상하 높이는 최대한 작아지려는 경향이 있기 때문입니다. div.. 더보기
[JS] array.forEach 이해하기, 배열의 반복문 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 배열의 forEach 함수를 이해하는 과정을 순차적으로 살펴보겠습니다. 이 글에서는 callback함수의 currentvalue와 index 매개변수에 대해서만 알아보겠습니다. 먼저 다음의 코드를 보겠습니다. function print(fruit) { const result = `제가 좋아하는 과일은 ${fruit}입니다.`; console.log(result); } const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기']; print(fruits[0]); print(fruits[1]); print(fruits[2]); print(fruits[3]); pri.. 더보기
[VSCODE] 코드 깔끔하게 정리하기, 선택영역서식 코드를 작성하다보면 다음과 같이 들여쓰기 상태가 안맞아 코드가 지저분해지는 경우가 있습니다. 이럴 때는 선택영역서식을 이용하면 됩니다. 아래와 같이 마우스 왼쪽클릭을 누르고 정리하고 싶은 코드를 블록으로 감싸줍니다. 블록 위에 마우스 오른쪽클릭을 하면 나오는 컨텍스트메뉴에서 '선택영역서식'을 선택해줍니다. 또는 블록으로 감싼 이후에 Ctrl + K, F를 눌러도 됩니다. ctrl을 누른 상태로 k를 누르고, k만 뗀 상태에서(ctrl은 떼지 않고 계속 누르고 있음) f를 눌러줍니다. 이와 같이 선택영역서식을 이용하면 아래와 같이 코드가 정렬됩니다. 더보기
[VSCODE] 자동 줄바꿈, 긴 코드를 화면에 보이게 하기 VSCode를 좁게 사용하는 경우 아래의 meta 태그와 같이 코드가 잘리는 경우가 있습니다. 이 경우 Alt + Z 를 눌러주면 코드가 화면을 넘어갈 때 자동으로 줄을 바꿔줍니다. 보기 메뉴 -> 자동줄바꿈 을 눌러주어도 됩니다. 더보기