웹페이지 텍스트에 접근할 수 있는 3가지 속성과 그 차이 JavaScript를 사용해 웹페이지 요소의 텍스트에 접근할 때 Node.textContent, Node.innerText, Element.innerHTML의 3가지 속성을 쓸 수 있다. 이 셋은 비슷하면서도 약간씩 차이가 있다. 이 셋이 id가 source인 HTML 요소의 텍스트를 어떻게 표현하는지 살펴보자. HTML 원본 textContent, innerText, innerHTML 의 차이를 아래에서 살펴보세요. 숨겨진 내용 textContent 결과: ... innerText 결과: ... innerHTML 결과: ... 세 속성이 다른 결과를 보여준다는 것을 시각적으로 확인할 수 있을 것이다. 시각적인 결과의 차이뿐 아니라, 성능 상의 차..

HTML 문서를 작성할 때 약방의 감초마냥 함께 등장하는 것들이 있다. 바로 CSS와 JavaScript이다. 간단한 HTML 문서에서 직접 CSS 스타일과 JavaScript 코드를 작성하는 경우를 제외하면, 대부분의 경우 외부에서 css, js 파일을 불러와 사용하게 된다. 이 때, 외부 css 파일은 head 태그 안에서, js 파일은 body 태그가 끝나기 직전에 불러오는 방식을 관용적으로 사용한다. CSS는 문서가 어떻게 보일지를 규정하므로 본문 전의 head 태그에서 미리 불러오고, JavaScript는 문서의 모든 요소를 문제 없이 인식해야 하기 때문에 본문을 다 불러온 후에 불러오는 것이다. 오랫동안 사용된 이 방식은 지금도 여전히 유효하다. 하지만 웹의 복잡성이 증가하고 새로운 기술과 트..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 10 - Hold Shift and Check Checkboxes 튜토리얼 분류: JavaScript 튜토리얼 설명: 쉬프트를 누른 채 HTML 체크박스를 클릭하면 가운데 있는 체크박스도 같이 선택되게 하기 진행기간: 2020년 4월 21일 이벤트 발생 시 특수 키 입력 여부 확인하기 마우스, 키보드 이벤트 발생 시 이벤트의 ctrlKey, shiftKey, altKey, metaKey 속성을 통해 확인 해당 특수 키와 함께 키보드 입력이 발생했다면 해당 속성의 값이 true, 특수 키가 없었다면 false가 됨 event.ctrlKey, event.shiftKey 등의 방법으로 접근 가능 라디오, 체크상자 등 input 태그의 선택 여부 확..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 08 - Fun with HTML5 Canvas 튜토리얼 분류: JavaScript 튜토리얼 설명: HTML5 캔버스로 무지개색으로 색깔이 변하는 선 그리기 진행기간: 2020년 4월 19일 HTML Canvas 요소 HTML 위에 그래픽 요소를 표현할 수 있는 요소 Canvas API, WebGL API, JavaScript 코드와 함께 활용됨 Canvas API는 주로 2D 그래픽을, WebGL API는 2D와 3D 그래픽을 표현하는 데 쓰임 참고자료 Canvas API - Web APIs | MDN WebGL: 2D and 3D graphics for the web - Web APIs | MDN 특징 그래픽 요소는 Canvas 요소가 아..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 03 - CSS Variables 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript로 CSS 속성 값 변화시키기 진행기간: 2020년 4월 14일 CSS 변수 사용하기 :root 의사 클래스 활용하기 문서 트리의 root 요소를 선택함 HTML의 root 요소는 요소이므로, html 선택자와 동일한 역할을 함 ※ :root가 html 선택자보다 명시도가 더 낮음 전역 CSS 변수 선언에 주로 사용됨 참고자료 :root - CSS: Cascading Style Sheets | MDN 명시도 - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수) 정의하기 형태: --변수명..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 02 - CSS + JS Clock 튜토리얼 분류: JavaScript 튜토리얼 설명: 직선 모양의 div 요소 3개를 현재 시각과 연동해 시계의 시침, 분침, 초침처럼 작동시키기 진행기간: 2020년 4월 13일 CSS transform( ) 속성의 기준점 설정하기 transform-origin 속성 활용 형태: transform-origin: x y z; x, y, z축 모두 조절할 수 있음 x축은 길이, left, right, center 키워드로 조절 y축은 길이, top, bottom, center 키워드로 조절 z축은 길이로 조절 기본값은 center 참고자료: transform-origin - CSS: Cascading Style..