기존 자바스크립트의 변수 선언은 var로만 가능했다고 한다. 하지만 문제점들이 많아 ES6부터 const와 let이 추가되었다. 그럼 대체 이게 무슨 차이가 있을 것일까? 지금부터 알아보자. 변수 생성 단계 ① 선언 단계 - 변수를 실행 콘텍스트의 변수 객체에 등록한다. - 이 변수 객체는 스코프가 참조하는 대상이 된다. ② 초기화 단계 - 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보. - 이 단계에서 변수는 undefined로 초기화된다. ③ 할당 단계 - undefined로 초기화된 변수에 실제 값을 할당한다. var - 변수 중복 선언 가능. - 재할당 가능. - 하지만 큰 단점은 중복 선언했을 때 에러가 나오지 않고 각기 다른 값이 출력될 수 있음 - 코드량이 많아진다면 var변수를 쓰는..
나만의 웹사이트를 이쁘게 꾸며주기 위한 언어인 CSS, 단순히 HTML로만 코딩을 한다면 정말 못생긴 웹사이트가 되어 버린다. 이런 웹사이트를 꾸며줄 수 있는 도구가 바로 CSS이다. 실제로 코딩을 하려고 하니 자주 사용하지만 헷갈리는 CSS속성들이 있어 정리해보고자 한다. 그럼 CSS의 속성은 무엇이 있는지 어떻게 작성해야 하는지 알아보자. 1. CSS 권장 작성순서 ① 레이아웃 : display, float, postiton, ② 박스모델 : width, height, margin, padding, border ③ 배경 : background ④ 폰트 : font, color, text-align, vertical-align ⑤ 그 외 속성 2. CSS 적용 우선순위 ① 속성 값 뒤에 !importa..
클론 코딩을 하다 보면 HTML과 CSS 코드를 언제 다 쳐야 하나 싶을 때가 있다. 좀 더 간결하고 빠르게 입력할 수 있는 방법은 없을까? 검색하던 중 Emmet 기능에 대해 알게 되었다. 다행히 사용하고 있는 에디터인 VS Code에 내장되어 있다. 물론 VS Code 이외에 다른 에디터들에도 내장되어 있다고 한다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com 대체 어떻게 사용해야 할까? 그럼 간단하게 작성방법에 대해 알아보자. HTML 에밋 단축키 ① > : 자식 구조를 만들 ..
1. HTML 이란? 하이퍼 텍스트 마크업 언어는 웹페이지를 위한 지배적인 마크업 언어이다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 2. HTML 기본구조 vscode에서 작성한 html 기본 구조는 아래와 같다. html 파일 생성한 후 '!' 입력하고 엔터를 누르면 나타난다. : HTML 문서의 루트 요소를 정의 header nav section article1 article2 article3 aside footer
