목차 1. JavaScript의 변수종류(var, let, const) 2. JavaScript에서 스코프란? 3. JavaScript에서 호이스팅이란? 1. JavaScript의 변수 종류(var , let, const) 자바스크립트에서는 우리가 일반적으로 Java에서 알고 있던 변수와는 조금 다른 형태로 변수를 사용한다. 아직 많이 배우지는 않았지만 전체적으로는 Java와 Python을 합쳐놓은 것 같은 느낌이 든다. JavaScript의 변수 선언 방식에는 세 가지가 있다. 그리고 이 변수 선언 방식에 따라 변수에 접근 가능한 범위가 달라진다. 1. var 2. let 3. const 변수 선언 방식과 관계없이 문자열이든 정수형이든 boolean형이든 어떤 타입의 자료형도 저장할 수 있다. 객체도..

이 글은 Mac OS Ventura 13을 기준으로 작성됨. 맥북 에어 m1 기준으로는 키보드에 한영 변환키가 caps lock(소문자 대문자 변환키)으로 설정 돼있다. 문제는 이 caps lock키와 한영 변환키가 같은 키로 작용하기 때문에 한영 변환 키를 타이핑 중에 빠르게 바꿀 시에는 한영변환 키가 씹히는 문제가 발생하게 된다. 실제로 빠르게 한글과 영어를 번갈아면서 타이핑 해야하는 경우 이게 굉장히 불편하게 느껴질 수 있다. 한영 키 씹힘 문제를 해결함과 동시에 한영키의 위치를 오른쪽 커맨드나(윈도우 운영체제에서 사용하는 한영키의 위치) 본인이 원하는 위치로 바꾸는 방법에 대해 정리해보겠다. 1. Karabiner-Elemnts 프로그램 설치 우선 앱스토어에서 제공하는 프로그램을 다운받아야한다. ..

목차 1. CSS에서 position 속성이란? 2. position 속성의 속성값들(static, relative, absolute, sticky, fixed) 3. 실습 예제 글 시작에 앞서... 이전에 CSS의 여러 가지 속성들에 대해 포스팅한 적이 있다. 이제까지는 레이아웃을 배치할 때 margin속성을 이용한 편법으로 실습을 진행했고 한계점을 느꼈다. 그래서 자주 쓰이는 display와 position 속성에 대해서는 나 스스로도 다시 공부할 필요성을 느껴 재정리하는 시간을 가지게 됐다. 1. CSS에서 position 속성이란?? position과 display는 우리가 프론트엔드 프로그래밍을 할 때 레이아웃을 배치해줄 수 있는 가장 기본적이고 자주 쓰이는 속성들이다. position은 con..

목차 1. 블럭과 인라인의 차이점 2. 관련 속성 및 태그 3. 실습 코드 시작하기에 앞서.. HTML과 CSS를 처음 접하면서 정말 수도 없이 많은 태그들과 속성들이 스쳐 지나갔지만 정작 내 머릿속에 남는 건 별로 없었다. 백엔드 위주의 언어만 공부했던 탓인지 레이아웃을 배치하고 색상을 지정하는 등의 프로그래밍은 너무 낯설었고 쉽게 적응이 되지 않았다. 따라서 내가 알기 쉽게 이해하기 위해 프론트엔드 언어의 공부 비중을 조금 늘려야겠다고 생각했다. 1. 블럭과 인라인의 차이점 HTML 혹은 CSS를 배우면서 블럭과 인라인이라는 말을 접하게 됐다. 그때 내 머릿속에는 추상적 개념만 둥둥 떠다녀 이해가 잘되지 않았다. 그리고 그 두개의 차이가 정확히 무엇인가에 대한 의문이 생겼었다. 간단하게 설명하자면 ..

- 목차 1. HTML에서 emmet이란 무엇인가? 2. emmet의 기본 문법 및 사용 예제 1. HTML에서 emmet이란 무엇인가? emmet은 우리가html 코드를 더욱 효율적으로 작성할 수 있게끔 도와주는 기능들을 제공한다. emmet은 텍스트(HTML언어)편집을 도와주는 플러그인이며 대부분의 텍스트 에디터에 통합돼있다. VS code와 Intellij IDEA 기준으로 문법에 맞게 코드 작성후 tab버튼을 눌러주면 된다. 간단한 태그들부터 복잡한 형태의 태그들까지 모두 구현이 가능하게끔 돼있다. 개인적으로는 CSS의 선택자 문법과 비슷하다고 생각했다. 2. emmet의 기본 문법 및 사용 예제 emmet은 다음과 같이 작성할 수 있다. 꺽쇠안의 태그명과 > 를 함께 입력 후 tab을 누를 시 ..

목차 1. CSS가 뭔데? 2. CSS 언어 작성법(문법) 3. CSS의 선택자 및 속성으로 쓰이는 div와 span / id와 class 비교 1. CSS가 뭔데? CSS(Cascading style sheets)는 HTML이 뼈라면 그 뼈에 살을 덧붙여주는 시트라고 생각하면 쉽다. 즉 HTML에서도 기본적으로 다양한 태그를 제공하고 있지만 CSS는 약어 그대로(style sheet) 다양한 스타일을 활용해 마크업 언어인 HTML파일을 더욱 잘 꾸며줄 수 있는 역할을 한다. 처음 HTML, CSS를 접하게 되면 두개가 완전 별개의 언어라고 생각할 수 있는데 html파일 안에서도 style태그를 이용해 스타일을 꾸밀 수 있다. 그러면 정확히 css가 무엇인가 하는 의문이 들 것이다. 왜냐하면 말로만 들었..