DH의 개발 공부로그

1. DOM(Document Object Model) DOM이란? DOM은 구조화된 문서를 객체로 표현하는 형식을 말합니다. 2. 웹브라우저 동작 과정 웹서버로부터 html 파일을 가져옴 가져온 html 파일과 css정보를 파싱(parsing)하여 DOM tree 생성, CSSOM tree 생성 DOM / CSSOM tree를 기반으로 Render tree 생성 3. 웹브라우저 동작과정과 Javascript html 코드를 기반으로 DOM 트리를 구성하는데, javascript 코드인 를 내에 넣으면 DOM 트리가 구성하기 전에 태그를 만나면서 javascript 엔진에 제어권을 넘기게 됩니다. javascript 엔진에 제어권을 넘기게 되면 자바스크립트 엔진이 해당 js 코드 파일을 로드해서 실행하고,..

Javascript 란? 자바스크립트란 동적으로 요소를 변경하고 사용자 인터페이스를 지원하기 위해 고안된 스크립트 언어이며, 넷스케이프 커뮤니케이션 사에서 개발하였고, 본래 이름은 모카(Mocha), 그리고 라이브 스크립트 였으나, 당시 JAVA 언어가 인기를 끌어서 관련이 없었음에도 Javascript 라고 명명하였습니다. 표준화된 언어의 공식 이름은 ECMAScipt이고, 아직까지도 대외적으로 사용되는 이름은 Javascript이다. javascript 엔진 V8: 구글에서 만듬, 크롬이 먼저 채택, 이후 Electron, Node.js에서 사용, ms사에서도 기존 자체 엔진을 버리고 V8을 채택중 SpiderMonkey: FireFox 브라우저에서 사용 중 JavaSctiptCore: 오픈 소스로 ..

블록(block) 요소 안에 이미지를 넣었는데 하단 여백이 생기는 특이한 점을 발견하였습니다. 너무 궁금해서 찾아 본 결과 원인은 이러했습니다. 이미지 태그는 인라인(inline) 속성이고 인라인 속성의 텍스트, 또는 이미지 콘텐츠는 콘텐츠들이 정렬되는 기준 선이 있습니다. 인라인 요소의 기본 설정 기준선 값은 베이스라인(baseline) 입니다. 베이스라인은 문자(알파벳 기준)가 얹히는 기준 바닥을 말하며, 영어에서 g, j, p, q와 같은 꼬리가 있는 문자들은 베이스라인 밑으로 꼬리가 내려가 걸쳐집니다. 그러다 보니 베이스라인의 기준에서는 블록 요소 안에 이미지만 있더라도, 보이지 않는 문자를 대비하기 위해 위와 아래에 공간을 만들어 두는 것입니다. 이러한 문제의 해결방법은 다음과 같은 방법들이 있..

a 태그 'a' 태그는 anchor의 약자로 하이퍼링크를 설정하는 태그입니다. 인라인 요소이며, a 태그를 작성하면 링크를 의미하는 밑줄로 표기가 되며 그 기본 색상은 파란색입니다. 속성 설명 주요 값 href 하이퍼링크 URL 하이퍼링크 외 전화번호(tel), 이메일주소(mailto)도 기입이 가능하며, 대신 href의 값을 ""의 형태로 비워두지 않아야 하고 href="#"의 임시 링크 기호로 대체 표기 할 수 있습니다. target 링크된 URL 이동 방법 지정 - "self" : 현재의 브라우저에 열기 속성 값 - "blank" : 새창으로 열기 속성 값 a태그의 링크를 정확히 설정하려면 우선 절대 경로와 상대 경로를 알아야 합니다. 1. 절대 경로 절대 경로는 변하지 않는 주소로 쉽게 말해 우리..

ol, ul, li 리스트 태그 리스트를 표현할 수 있는 태그로, html 문서에 많이 사용되는 태그들 중에서도 많이 사용되는 태그라고 할 수 있습니다. 우선 'ol' 태그는 순서가 있는 리스트를 표현하는 태그이며, 'ul' 태그는 순서가 없는 리스트를 표현할 때 사용하는 태그입니다. 'li' 태그는 ol과 ul 내에 사용되는 태그로 항상 ol 또는 ul과 함께 사용돼야 하며, 둘 중 하나만 사용할 수는 없습니다. 그리고 ol과 li 또는 ul과 li 사이에는 다른 태그가 올 수 없지만 li 태그 안에는 다양한 다른 태그를 작성할 수 있습니다. 감자를 1/4 크기로 자른다. 부드러워질 때까지 15분~20분 동안 소금물에 서서히 끓인다. 감자의 물을 따라 내고 으깬다. 우유, 버터, 육두구를 데운다 우유 ..

시맨틱 마크업 Semantic Markup 시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지고, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 즉 시맨틱 마크업은 작업에 있어서 태그들이 의미를 잘 전달 할 수 있도록 문서를 작성하는 것을 말합니다. html5에 시맨틱 웹을 위해 관련 태그들이 제공됩니다. 시맨틱 웹을 위한 태그 설명 header 말그대로 문서의 헤더영역을 의미합니다. 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성합니다. nav 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 main 메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용합니다. 다른 header, footer, n..

제목 태그 h1, h2, h3, h4, h5, h6 일단, h는 heading의 약자로 html문서의 제목이나 부제목 등을 나타낼 때 사용이 됩니다. 6단계로 수준을 나눌 수 가 있으며, 제목 숫자가 낮은 h1이 가장 높은 레벨의 태그입니다. 폰트 사이즈의 차이가 존재하는데 현업에서는 웹브라우저의 호환성을 위해, 태그에 표현 서식을 모두 삭제하고 css 스타일에서 별도로 적용을 해서 사용을 합니다. 텍스트의 문단을 정의하는 요소입니다. p는 블록 요소이며 여러 문단을 나누어 줍니다. ↓ HTML 삽입 미리보기할 수 없는 소스 줄바꿈 태그 br br 태그는 텍스트안에 줄바꿈을 해주는 태그로, 빈 요소이며 열린 태그로 종료태그가 존재하지 않습니다. br태그는 인위적인 여백을 만들기 위해 사용하지 않으며 꼭 ..

HTML이란? HTML(HyperText Markup Language)은 HTML은 프로그래밍 언어는 아니고, 컨텐츠의 구조를 정의하는 마크업 언어입니다. 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML5 기본 템플릿 이해하기