HTML 기초 정리

HTML 이란

틀! 구조를 표현하는 언어.

그 외)

CSS : 구조를 잡힌 것을 꾸미는 것. 스타일시트

Javascript : 틀 안에서 사용되는 기능. 기능 구현

요소 (element) : HTML 문서나 웹 페이지를 이루는 개별적인 요소.

태그(tag) : HTML을 구성하는 기본 단위.

ex) <div>, <p>, <h1>, <section>, <span> 등등

속성 (attribute) : 태그의 유형을 수정, 태그의 동작을 제어하기 위해 "여는 태그" 안에 사용되는 특수 용어.

HTML 속성의 이름 "class"

HTML 속성의 값은 "paragraph"

콘텐츠 (contents) : 태그에 맞게 태그 사이에 들어가는 보여지는 글

<div> : division. 한 줄의 공간 가짐.
<span> : 콘텐츠 크기만큼의 공간을 가짐
<img> : 이미지. 안에 속성으로 src= 를 사용
<a> : 링크. 안에 속성으로 href= 를 사용
<ul>/<li> : unordered list / list . 순서가아닌 모양으로 배열. li로 배열 작성
<ol> : ordered list . 순서대로 숫자로 배열. li로 배열 작성
<input> : 입력하는 곳. 다양한 type= 을 가짐 ex) type="text" -> text 입력상자 생성, type="checkbox" checkbox 생성
<button>: 버튼을 생성. 콘텐츠에 버튼 이름 작성 가능
<p> : paragraph, 문단을 의미. 문단을 나눌 때 사용
<h> : heading, 제목을 의미. 제목을 정의 할 떄 사용하며 각 제목 마다 숫자를 붙여 사용 ex)<h1>,<h2>
<br> : 줄 바꿈
<form> : form. 해당 양식이 무엇인지를 의미.

시맨틱이란 ‘의미가 있는, 의미론적인' , 의미를 가진 요소를 사용하는 방식

시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용. 그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 <div> 지옥이 되는 경우가 많았다.

<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.

등등 다양하다.