목차 1. DOM Element란? 2. Element에 접근하는 다양한 방법 1. DOM Element란? JavaScript에서 우리는 HTML과 CSS로 스타일링이 적용된 텍스트를 작성하고 레이아웃을 만들었다. 이때 JavaScript를 통해 작성한 HTML파일과 CSS파일의 속성을 바꿀 수 있는 다양한 방법이 있고 이를 위해서는 Element 타입의 객체가 필요하다. Element는 정확히 말하자면 DOM(Document Object Model)로 DOM은 하나의 인터페이스라고 생각하면 되고 그 하위 요소로 태그에 해당하는 다양한 Element가 존재하게 된다. Element 객체는 html파일에 작성한 열린태그부터 닫힌 태그까지 전체 내용을 값으로 가지고 있다. 그러나 주의해야할 것은 Strin..

목차 1. JavaScript에서 property의 개념 2. Property 접근법 3. Property 출력 예제 (for in, for of 활용) 1. JavaScript에서 Property의 개념 JavaScript에는 Java와 마찬가지로 객체를 생성할 수 있고 클래스가 존재한다. 다만 문법부터 시작해 자료 구조의 형태가 Java와는 다른 점이 몇몇 있다. 오늘은 그 중 객체의 속성을 나타내는 property라는 개념에 대해 알아보겠다. property는 직역하면 '속성'이라고 부른다. 간단하게 설명하면 객체의 속성을 저장하고 있는 하나의 공간이다. 자바스크립트에서 객체를 생성하게 되면 모두 property형태를 띠고 있다 property는 {key : value}의 구조로 이루어져 있다. 아..

목차 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를 배우면서 블럭과 인라인이라는 말을 접하게 됐다. 그때 내 머릿속에는 추상적 개념만 둥둥 떠다녀 이해가 잘되지 않았다. 그리고 그 두개의 차이가 정확히 무엇인가에 대한 의문이 생겼었다. 간단하게 설명하자면 ..