Live and Learn

▣ 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)인 자바스크립트를 학습..