[HTML] HTML 기본 문법 : 4. 시맨틱(Semantic) HTML

Semantic HTML시맨틱 HTML은 우리가 작성한 코드에 의미를 부여하는 것을 말한다. 시맨틱 HTML이 나오기 전에는, 성분(elements)이 어떤 기능을 하는지, 어떤 콘텐츠가 들어가는지에 대한 의미가 없었다. 따라서 div와 같은 성분이 id를 이용해 header부터 footer, 그리고 articles까지 다양한 요소를 만드는 범용 성분으로 사용되었다. 시맨틱 HTML가 등장함으로써, 개발자와 브라우저에게 성분의 기능과 콘텐츠가 정확히 무엇인지 알려주는 요소가 도입되었다. 이것은 footer이다. 이것은 footer이다. Element Placement시맨틱 HTML은 개발자에게 자신의 이름에 따라 그 기능이나 위치를 정확하게 알려줄 수 있는 성분(elements)을 도입했다.이러한 성분..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 7. 15.

[HTML] HTML 기본 문법 : 3. 폼 태그 Forms

: Checkbox TypeHTML에서 input 성분을 사용할 때, type="checkbox" 속성은 하나의 체크박스 아이템을 불러온다.같은 주제로 연결된 체크박스 그룹을 만들기 위해서는, 각 input 성분 모두 같은 name 속성을 사용해야 한다.이를 통해 하나의 주제에 대해 여러 개의 체크박스를 선택할 수 있다.베이컨 🥓달걀 🍳펜케이크 🥞 위 코드의 각 속성에 대해 자세히 설명하면 다음과 같다.type="checkbox"입력 요소의 종류를 체크박스로 지정. 사용자가 체크하거나 해제할 수 있는 상자를 생성name="breakfast"이 체크박스들이 같은 그룹(이름)을 공유함. → 폼(form) 전송 시 같은 name으로 여러 value가 함께 전달될 수 있음value="bacon"체크되었을 ..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 7. 14.

[HTML] HTML 기본 문법 : 2. 테이블(표) Tables

Table ElementHTML에서 성분은 행과 열로 구성된 2차원의 테이블을 나타내기 위해 사용된다. Table Row Element테이블 행(row) 성분인 은 테이블 데이터와 테이블 헤딩을 추가하기 전에 테이블에 행을 추가하기 위해 사용된다. ... Table Data Element테이블 데이터 성분인 는 테이블 행인 안에 들어가는 내용이다. 이를 이용하여 테이블에 데이터셀을 추가할 수 있다. 1번째 데이터 셀 2번째 데이터 셀 위 코드의 결과는 아래와 같다.1번째 데이터 셀2번째 데이터 셀 Table Head Element테이블 헤드 성분인 는 테이블 열들을 하나로 묶인 테이블 행의 헤딩headings을 정의한다. h..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 7. 14.

[HTML] HTML 기본 문법 : 1. 성분과 구조 Element and Structure

.. Introduction to HTMLHTML 은 HyperText Markup Language 의 약자이다. HTML의 기본적인 구조를 시각화하면 아래와 같다. Paragraph ElementParagraph Element(문단 요소)인 은 text 블록을 나타낸다. Hello World html은 기본적으로 opening tag와 closing tag를 가지는데, 여기서 는 opening tag를, 는 closing tag를 나타낸다.'Hello World"는 가 가지는 text block, 즉 content(내용)이다. Body Element Element는 HTML 문서의 내용을 나타낸다. tag 안의 내용은 web browser 위에 보여진다.NOTE: 한 문서에는 오직 하나의 tag만..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 6. 14.