Web Front End/HTML

DOM, Event 기초 지식 정리

DOM, Event 관련 기초 지식 이번 포스팅에서는 Javascript에서 웹 개발을 할 때 필수적으로 알아야 할 기초 지식을 질답 방식으로 간단하게 정리해 보았습니다. 1. 버블링이란? / 캡처링이란? / 둘의 차이 및 사용법 버블링은 특정 요소에서 이벤트가 발생했을 때 상위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 캡처링은 버블링과 반대 방향인 상위 요소에서 하위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 버블링은 하위 요소에서 이벤트를 등록하면 상위까지 이벤트가 전파되는 기본 속성을 통해 사용할 수 있고, 캡처링은 addEventListener에서 capture: true라는 옵션을 부여해 사용할 수 있습니다. stopPropogation: 위와 같은 이벤트 전파를 막는 web A..

DOM과 브라우저 동작방식

DOM과 브라우저 동작방식 DOM 문서 객체 모델 HTML, XML 문서의 프로그래밍 Interface 문서의 구조화된 표현 제공 프로그래밍 언어가 DOM 구조에 접근 가능한 방법 제공 문서 구조, 스타일, 내용 변경 가능하게 도움 웹페이지 : 일종의 document Object로 구성되어 있음 구성 요소: property, method, event 웹페이지의 객체지향 표현 DOM API(함수묶음정도) 제공 브라우저 동작방식 브라우저는 어떻게 동작하는가 Naver D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser (브라우저 동작원리) 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 랜더링 엔진 기본동작 과정..

[HTML] <div> tag 의미와 의문점 정리

tag란? Division의 약자 레이아웃을 나눌 때 쓰는 태그 특별한 기능을 가지고 있지 않음 가상의 레이아웃 설계에 쓰임 용도 랩핑하기 위해 많이 쓰임 시맨틱 태그가 있는데 무분별하게 쓰는 것은 권장되지 않음 왜 div를 사용해야 할까? html은 와 같은 이름의 태그를 써도 에러가 나지 않는다. 그러면 아래와 같이 div 태그가 많은 것을 없애고 각각의 의미가 있는 태그를 만들어 쓰면 되지 않을까 하는 의문이 들었다. airbnb 메인 홈페이지의 소스코드 중 일부 언뜻 생각할 때, 의미가 있고 가독성이 좋아질 것 같아 보인다. div 태그 자체도 특별한 의미가 없는데 div 태그를 쓰는 이유는 무엇일까? 몇 가지 이유를 검색을 통해 찾을 수 있었다. 브라우저에서 처리하고 렌더링하기가 더 쉬워지기 때..

[HTML] 특수문자 Unicode

Unicode란? 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 목적: 현존하는 문자 인코딩 방법들을 모두 유니코드로 교체하려는 것 한글 ↔ 유니코드 간편 변환기 https://raisonde.tistory.com/entry/한글-↔-유니코드-간편-변환기 참고 https://ko.wikipedia.org/wiki/유니코드 https://www.w3schools.com/charsets/ref_html_entities_j.asp

[HTML] <meta> tag 용도와 종류

tag란? 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보 제공 닫는 태그가 없음 태그의 속성을 통해 정보 제공 요소의 종류 요소 뜻 charset 페이지의 문자 인코딩을 선언 utf-8 권장 content http-equiv 또는 name 특성 중 사용하는 것의 값을 담음 name 문서 레벨 메타데이터의 이름을 정의 itemprop, http-equiv, charset 특성 중 하나라도 설정한 경우 사용해선 안됩니다. 예제 1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제 2) 웹 페이지에 대한 설명(description)을 정의하는 예제 3) 문서의 저자(author)를 정의하는 예제 4) 5초 뒤에 다른 페..

[HTML] DOCTYPE html에 대해서 알아보자

DOCTYPE html 선언 의미 웹문서가 어떤 버전의 html 언어로 작성되었는지 결정하는 기능 DTD로 정의되어 웹브라우저에 전달됨 브라우저: 선언된 문서 버전에 맞는 html 기술로 페이지 로드 DTD란? Document Type Declaration 브라우저 랜더링 모드를 지정해 줌 유효성 검증기의 기준이 됨 XHTML 문서의 상단에 반드시 선언해야 함 ⇒ 생략하거나 형식이 잘못되면 엉뚱한 결과물이 출력되는 문제 발생함 ⇒ 웹 브라우저마다 코드의 해석방식이 다른 호환모드(Quirks mode)로 랜더링되기 때문에 DTD 기본형식 최상위 element name: 이 문서는 html 문서이다. 공개 범위: 국제적이다. DTD 만든 기관: 비공인인증인 W3C기관에 의해 XHTML 1.0을 Transit..