Live and Learn

▣ HTML Entities 앞서 배운 메타 태그에서 HTML 문서를 인코딩하는 데 사용되는 특정 문자 세트(Character set)를 설정하는 속성이 charset이라고 하였습니다. 이때의 값 UTF-8(Unicode Transformation Format–8-bit), 통칭 유니코드(Unicode)가 인코딩에 사용되는 문자 세트인 것입니다. 현재는 대부분의 브라우저가 유니코드를 지원하지만 과거에는 그렇지 않았습니다. 정해진 문자 세트 이외의 문자를 사용해야 할 경우에는 미리 약속된 예약 문자(Reserved characters)들을 사용해야 하는데 이때 사용된 것이 HTML 엔티티입니다. 몇 가지 유용한 경우를 제외하고 개발자가 아니라면 몰라도 크게 문제가 되지 않을 정도로 요즘 코드 편집기와 브라..

▣ Block-level & Inline Elements HTML을 구성하는 요소들(Elements) 즉 태그들은 크게 두 가지 종류로 구분됩니다. 하나는 블럭-레벨 요소이고 또 다른 하나는 인라인 요소입니다. 간단하게 설명하자면 브라우저에서 두 개 이상의 요소들이 한 줄로 늘어설 수 없는 경우와 늘어설 수 있는 경우 두 가지입니다. □ 블럭 요소 예시 This 'div' element is a block-level element. Item 1 Item 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur veritatis dolores, asperiores molestiae ratione sint consequatur duci..

▣ 실행결과 태그 내에서 사용되는 기본적인 태그들과 그 속성에 대하여 다루는 마지막 내용입니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다. □ 입력 양식(Input Forms) ▷ 폼 태그 태그는 사용자 입력을 받아 백엔드(Backend)로 데이터를 보내어 처리할 수 있게 해주는 HTML 요소입니다. action 속성의 값은 데이터가 보내어지는 경로를 의미하고, method 속성의 값은 지정된 경로에서 이루어지는 행위를 의미합니다. 즉, 사용자가 입력한 데이터는 서버(Server)의 "process.php"로 보내어지고, 서버는 그 데이터를 읽어 들여(GET; Read) 특정 비즈니스 로직(Business logic)이 이루지는 것으로 파악할 수 있습니다. ▷ 레이블 태그 Name 1 2..

▣ 실행결과 지난번에 이어서 태그 내에서 자주 사용되는 필수적이고 기본적인 태그들과 그 속성에 대하여 살펴보겠습니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다. □ 리스트(Lists) Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 리스트에는 기본적으로 비순서(Unordered)형과 순서(Ordered)형이 있습니다. Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 비순서형은 글머리 기호를 style 속성을 이용하여 설정할 수 있고, 다양한 특수기호의 형태로 적용이 가능합니다. 그리고 순서형은 글머리 기호를 숫자나 문자의 형태로 type 속성을 이용하여 설정할 수 있으며, 순서대로 자동 부여 됩니다. Item 1 Item 2 Neste..

▣ 실행 결과 이번부터 다루는 내용은 태그 내에서 자주 사용되는 필수적이고 기본적인 태그들과 그 속성에 관한 것입니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다. 아직 CSS 부분이 없어 세련되지는 않지만 다음의 내용들을 차근차근 살펴보고 나서 직접 실습해보길 바랍니다. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 □ 주석 태그(Comments) 태그는 소스 코드(Source code) 중간에 주석을 작성하여 넣고자 할 때 사용하며, 브라우저에서는 보이지 않습니다. 이후에 코드를 업데이트하거나 수정해야 할 경우 유용한 도움이 될 수 있도록 코드에 대하여 설명하는 것은 코드의 양이 많아질수록 반드시 필요한 작업입니다. □ 주제 ..

학습을 시작하기 전에 실습환경을 위한 설치 및 설정에 관한 내용을 먼저 살펴보길 바랍니다. [자바스크립트] VSC와 크롬 웹 브라우저를 이용한 JavaScript, HTML, CSS 코딩 준비 시작하기 전에 향후 진행할 내용 중 문법 관련은 최소한의 설명만 덧붙일 예정이며 가급적 모질라 개발자 네트워크 문서를 참조하도록 할 것입니다. 그리고 프로젝트에서는 최대한 라이브러리( charlie-lyc.tistory.com ▣ 서론 HTML은 소위 산술, 논리 연산 등을 다루는 프로그래밍 언어는 아니며, 웹 페이지나 웹 문서를 작성하는 데 사용되는 마크업 언어(Markup language)입니다. 특히 HTML를 동적으로 제어하기 위한 프로그래밍 언어(Programming language)인 자바스크립트를 학습..

▣ 시작하기 전에 향후 진행할 내용 중 문법 관련은 최소한의 설명만 덧붙일 예정이며 가급적 모질라 개발자 네트워크 문서를 참조할 것입니다. 그리고 라이브러리(Library) 또는 프레임워크(Framework)를 사용하지 않고 소스 코드 중심으로 실습할 예정이며, 대체 불가한 경우를 제외하고는 전문 용어를 지양하고 일반적인 어휘로 설명하도록 하겠습니다. MDN Web Docs Hacks Blog Read more at hacks.mozilla.org For the last couple of years, we've run the MDN Web Developer Needs Assessment (DNA) Report, which aims to highlight the key issues faced by deve..