1. semantic이란? 참고할 글: 2021.04.11 - [코딩/HTML] - 시맨틱 태그(semantic tag) 사용 방법 웹 페이지를 하나의 도시라고 비유한다면, 그 도시를 여행함에 있어 버스정류장이 어디인지, 도로가 어디인지, 기차역, 혹은 대합실, 특실, 일반실이 각각 어디인지를 알려주는 태그가 시맨틱 태그다. 즉, semantic은 그 도시의 설계도를 보여준다. semantic의 뜻: 의미의, 의미론의 시맨틱 태그들은 검색엔진에게 의미론적 구조를 알려준다.(←의미론적 구조=그 영역이 문서 구조에서 어떤 의미인지) 이름만 듣고도 그 영역이 어떤 역할을 하는 곳인지 알 수 있게 한다. 또한, 여행객 또는 웹페이지를 개발 또는 수정코자 하는 사람에게 의미론적 구조를 알려준다. 사람들은 html..

1. 내가 헤딩 1이다 내가 헤딩 2이다 내가 헤딩 3이다 내가 헤딩 4이다 내가 헤딩 5이다 내가 헤딩 6이다 2) 브라우저 출력 모습 3. 시맨틱 태그(Semantic Tags)에서의 영역이다. body 속에 위치한다. 위 1의 그림의 3이 헤더이다. (시맨틱 태그에 대해서는 다음 글에서 위 1에 나오는 메타 데이터(메타 태그)에 대해서는 그 다음 글에 적는다.)

1. 이 태그들은 왜 안 쓰는 게 좋은가? 2014년에 HTML5가 나온 후, HTML5에서 지원되지 않는 태그들이 있다. 이 태그들을 사용할 경우 웹페이지가 잘못 표시될 수 있을 뿐 아니라 또한 방문자가 많더라도 콘텐츠 확인이 불가하여 사이트에 좋지 않은 영향을 주고, seo (검색엔진 최적화)에 불리하다. 2. HTML5에서 지원하지 않는 태그 종류. , (구) 축약어 표시에 사용되던 것 - 이것 대신 로 사용. 예) 나는 간다 → 나는 간다 (참고) 위 에디터 입력 내용을 크롬 등 브라우저로 열고 → 나는 간다에 마우스를 올리면 "이제 그만 잊어다오"가 나타난다. 위 처럼 사라져 가고 있는 태그에는 다음과 같은 것들이 있다. 애플릿 정의에 사용 → 이것 대신 사용. (구) 문서의 기본 글꼴 정의 →..

HTML에서 요소와 속성은 웹 페이지 구조를 정의하는 핵심 개념으로, 태그와 속성값, 콘텐츠의 관계를 쉽게 이해할 수 있도록 설명합니다HTML 요소와 속성의 기본 이해HTML을 작성하면서 가장 자주 만나는 개념은 요소(Element)와 속성(Attribute)입니다. 두 개념은 밀접하게 연결되어 있으며, 웹 페이지의 구조와 동작을 정의합니다. HTML 요소(Element)란?요소의 구성HTML 요소는 시작 태그(Start Tag), 내용(Content), 종료 태그(End Tag)로 구성됩니다.기본 구조:Content예제:Hello, World!: 시작 태그Hello, World!: 내용(content): 종료 태그주요 특징:시작 태그: 요소의 시작을 정의하며, 태그 이름을 포함.내용: 요소 안에 포함된..

HTML에서 폼 요소는 사용자 입력을 수집하는 핵심 도구로, input, textarea, button 태그의 사용법과 예제를 통해 쉽게 알아봅니다.HTML 폼 요소란?HTML 폼 요소는 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 합니다. 폼 요소는 웹 애플리케이션에서 필수적이며, , , 은 가장 자주 사용되는 태그입니다.1. 태그: 사용자 입력 필드의 기본 개념은 한 줄로 입력할 수 있는 입력 필드를 생성합니다. 다양한 type 속성을 통해 여러 형태로 사용할 수 있습니다.주요 type 속성text: 기본 텍스트 입력사용자가 이름이나 텍스트 데이터를 입력할 때 적합.email: 이메일 입력이메일 형식만 입력 가능password: 비밀번호입력 내용을 가리는 필드.checkbox: 선택 박스 ..

HTML에서 목록을 만드는 데 필수적인 ul, ol, li 태그의 차이와 사용법을 예제로 쉽게 알아봅시다.목록 태그란?웹 페이지에서 정보를 보기 쉽게 나열하려면 목록 태그를 사용합니다. HTML의 목록 태그는 콘텐츠를 구조화하고 가독성을 높이는 데 유용합니다. 대표적인 목록 태그로는 ul, ol, li가 있습니다.HTML 목록 태그의 종류1. ul: 순서가 없는 목록ul은 순서가 없는 목록(Unordered List)을 생성합니다.특징:항목 앞에 점(Bullet)이 기본적으로 표시됩니다.항목 간 순서는 중요하지 않을 때 사용합니다.예제: HTML CSS JavaScript 결과:HTMLCSSJavaScript2. ol: 순서가 있는 목록ol은 순서가 있는 목록(Ordered List)을 생성합니다...

HTML에서 중요한 레이아웃 구성 태그인 div, span, header, footer의 사용법을 예제와 함께 배워봅니다.HTML 레이아웃 구성에 필수적인 태그들HTML을 이용해 웹 페이지를 구성할 때, 구조와 내용을 명확히 나누는 태그는 매우 중요합니다. 이번 글에서는 div, span, header, footer 태그의 역할과 사용법을 쉽게 설명하겠습니다.1. div 태그: 블록 레벨 컨테이너div란?div는 블록 레벨 요소로, 콘텐츠를 그룹화할 때 사용합니다. 웹 페이지의 섹션을 나누고 레이아웃을 구성하는 데 핵심적인 태그입니다.특징:항상 새로운 줄에서 시작.다른 요소를 포함할 수 있음.스타일(CSS)과 스크립트(JavaScript)를 적용하기 쉬움.예제: HTML 강의 이 강의는 HTML 기초..

HTML 문서는 웹 페이지의 뼈대를 이루는 기본 요소로, 그 구조를 이해하는 것이 웹 개발의 첫걸음입니다.HTML 문서란?HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 기본 언어입니다.HTML 문서는 브라우저가 읽고 표시할 수 있는 구조화된 텍스트를 포함하고 있으며, 모든 웹 페이지의 기본 뼈대를 제공합니다.HTML 문서의 기본 구조1. DOCTYPE 선언 HTML 문서의 첫 줄에는 선언이 있습니다.역할:브라우저가 문서를 HTML5로 해석하도록 지정합니다.예제:2. HTML 요소 HTML 문서는 태그로 시작하고 끝납니다.역할:문서 전체를 감싸는 최상위 요소.예제:lang="en": 문서의 언어를 지정(예: 한국어는 lang="ko")3. Head 영역4. Body 영역 태그는 실제 웹 페이지..