Life of Jibro

가장 먼저 해야할 일은 바로 HTML과 CSS 코드를 작성하는 일이 될 것이다. 이 중 HTML에 대한 부분을 같이 살펴보려고 한다. 우선 HTML 문서의 head 요소에 대해 살펴보자. head 요소의 내용을 살펴보면 meta, title, link, script 요소를 담고 있는 것을 확인할 수 있다. 각각의 내용은 주석으로 달아 두었으니 확인하여 주시면 될 듯하다. 이제 body 요소를 살펴보도록 하자. 가장 기본적으로 필자는 아래와 같이 골격을 형성하였다. 타이머 article에는 타이머를, aside에는 타이머를 이용하는 방법에 대한 정보를 안내하는 정보를 작성할 예정이다. 다음 글에서는 aside 작성에 대해 살펴보도록 하겠다.

HTML의 많고 많은 요소 중 이번에 다루고자 하는 주제는 바로 이다! 이 label 요소는 언제 어떻게 사용하는 용도로 만들어졌는지 살펴보고 사례를 통해 보다 명확하게 그 용법을 익혀보도록 하고자 한다. 사실 이 주제를 생각한 이유는 이 label 요소를 원래의 취지와 맞지 않게 사용하는 경우가 많은 것 같아 공부하였던 것을 시작으로 적게 되었다. 을 왜 사용해야하나요? 보통 label 요소는 input 요소와 같이 사용되곤 한다. 그 이유는 원래 label 요소가 다음을 목적으로 두고 만들어진 요소이기 때문이다. 필자의 비약한 설명을 진행하기에 앞서 친절한 MDN 선생님을 모셔 이야기를 들어보자! The HTML element represents a caption for an item in a use..

HTML 파일에 JavaScript 파일을 연결하는 방법은 아래와 같이 head 요소 내에 script 요소를 작성하는 것이다. script요소의 소스코드로 main.js를 넣은 것을 확인할 수 있다. 잠깐! 이렇게 작성한 경우 어떻게 브라우저는 이 파일을 렌더링할까?? STEP1) 브라우저가 html 파일을 다운받고, html 선언(DOCTYPE html)에서부터 한 줄씩 내려가며 동작하게 된다. STEP2) script요소를 만나면, js파일이 있어야함을 확인하고 html 파일을 읽어나가는 작업을 일시중지하게 된다. STEP3) js 파일을 브라우저 상에 fetching한 뒤에 js 파일을 실행한다. STEP4) js 파일을 모두 실행한 뒤에 다시 일시정지하였던 html 파일을 읽어나가면서 한 줄씩 ..

[HTML의 기본 형식] HTML 웹 문서를 작성함에 있어 가장 기본 골격이 되는 구조는 아래와 같다. HTML 문서 작성시 해당 문서의 HTML 버전을 명시적으로 (explicitly) 선언하여야 한다. HTML Living Standard 버전부터는 로 선언한다. head 요소는 문서의 METADATA를 담고 있다. 태그는 HTML 문서에 관한 METADATA를 정의한다. 여기서, Metadata는 웹 문서 상의 데이터에 관한 정보를 가지고 있다. 즉, 웹 문서 상에서 어떻게 데이터가 표현될 것인지 정의하여 주는 것이라고 볼 수 있다. 태그는 항상 요소 안에 존재하며, 다음의 데이터 속성을 구체화하는데 사용된다. 문자 설정(character set) 페이지 묘사(page description) 키워드..