dev-hpk 님의 블로그

HTML 속성 다루기element.hasAttribute('속성'): 속성이 존재하는지 확인합니다.element.getAttribute('속성'): 속성값을 반환합니다. 속성값이 없다면 null을 반환합니다.element.setAttribute('속성', '값'): 속성을 추가합니다. 속성이 존재한다면 기존 값을 새로 추가하는 값으로 수정합니다.element.removeAttribute('속성'): 속성을 삭제합니다.HTML 비표준 속성 다루기비표준 속성을 다룰 때는 dataset 프로퍼티( data-* 속성)을 사용합니다.dataset testconst content = document.querySelector('.content');console.log(content.dataset.status) // ..

노드 탐색자바스크립트를 이용하면 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있습니다. 자식 노드(child node, children)는 바로 아래의 자식 요소를 나타냅니다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. 와 는 요소의 자식 노드입니다.후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.자식 노드 탐색자식 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.element.children: element의 자식 요소 모음(HTMLCollection)을 반환합니다. 자식 요소 모음은 텍스트..

웹 브라우저의 구조Window 객체 window 객체는 루트 객체로 최상단에 위치하며 브라우저 창을 대변합니다. window 객체는 다음과 같은 기능을 합니다.자바스크립트 코드의 전역 객체로 자바스크립트 코드 어디서나 접근이 가능합니다.브러우저 창을 대변하고, 이를 제어할 수 있는 기능을 제공합니다.(프로퍼티나 메소드 모두 전역 객체 내부의 것이기 때문에 window.을 생략 할 수 있습니다.) DOM 트리구조DOM은 노드 객체의 계층적인 구조로 구성되는데 이러한 계층 구조를 나무에 비유해 DOM 트리라고 합니다. DOM (Document Object Model)DOM은 한국어로 문서 객체 모델로 웹 페이지 내의 모든 콘텐츠를 객체로 표현한 것입니다. 각 객체를 노드(Node)라는 용어로 표현하고, 태그..

JavaScript란? JavaScript는 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 스크립트 언어” 다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리를 잡고 있다.JavaScript로 브라우저에서 가능한 동작페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)쿠키를 가져오거나 설정하기사용자에게 질문을 건네거나 메시지 보여주기 클라이언트 측에 데이터 저장하기(로컬 스..

유닉스란? 유닉스(Unix)는 벨 연구소에서 개발한 운영 체제로, 유연성, 강력한 명령어 인터페이스, 멀티태스킹, 다중 사용자 지원 등으로 인해 컴퓨터 과학 및 소프트웨어 개발의 중요한 이정표가 되었습니다. 운영 체제가 대부분 고급 언어인 C언어로 쓰여져 있었고 소스 코드를 쉽게 구할 수 있어서 다른 컴퓨터 하드웨어나 새로운 기종에 적은 노력으로도 쉽게 이식할 수 있어 대부분의 현대적 컴퓨터 운영체제의 원형이 되었다 주요 개념 & 특징 ..

시맨틱 태그란? 시멘틱 태그(Semantic = 의미론적인 Tag )는 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그입니다. 예시 body : HTML 문서의 내용을 나타냅니다 header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다 nav: 문서의 부분 중 현재 페이지 내, 또는..

1. Repaint와 Reflow position: absolute나 position: fixed와 같은 속성을 사용하면 요소가 문서 흐름에서 제거되기 때문에, 브라우저는 해당 요소의 위치를 계산하고 레이아웃을 조정해야 합니다. 이는 reflow를 유발할 수 있으며, 많은 요소를 동시에 다루거나 복잡한 레이아웃이 있을 경우 성능에 부정적인 영향을 미칠 수 있습니다. 2. 복잡한 레이아웃 및 배치 position: absolute나 position: fixed를 사용하면 요소는 ..

반응형 웹사이트? 반응형 웹사이트란 한 가지의 웹사이트로 다양한 종류의 화면 크기에 최적화된 화면을 보여주는 것을 뜻합니다. 반응형 웹은 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변합니다. 반응형 웹사이트에 필요한 CSS 속성들 Viewport 단위 vw (viewport width) : 브라우저의 넓이를 기준으로 하..

CSS 적용 방법 및 Cascading의 원리 CSS의 적용 방법 1. Style 태그 HTML 파일 내에 태그를 사용해 스타일링하는 방법입니다. /* 스타일 작성 */ a { color: red; } 2. 인라인 스타일 HTML 파일에 style 속성을 추가해 스타일링하는 방법입니다. 링크 3. CSS 파일 ..

Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.  규칙 선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음) 명시도 아이디 선택자 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 태그 선택자, 가상(psuedo)요소 선택자상속된 스타일상속: 부모 태그에 적용된 CSS 규칙..