목차 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형이든 어떤 타입의 자료형도 저장할 수 있다. 객체도..

목차 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. 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가 무엇인가 하는 의문이 들 것이다. 왜냐하면 말로만 들었..