[HTML] HTML 기초

HTML

• 구조를 담당, 웹 페이지의 틀을 만드는 언어
• JavaScript와 같은 프로그래밍 언어가 아닌 웹페이지의 뼈대를 구성하는 마크업 언어
  
  

CSS

• 시각화
  
  

JavaScript

• 상호작용
  
  

HTML 기본 구조와 문법

• tag들의 집합으로 이루어져 있음
• <> 부등호로 묶여 있는 기본 구성 요소 / 트리 구조
• html 확장자를 사용함

<트리구조>

- HTML 문서 시작
	1. html
    	2-1. head
        	3. title: page title
        2-2. body
        	3-1. h1: Hello world
            3-2. div: contents here
            3-3. span: here too

• 닫는 태그가 없는 태그가 있음 Self-Closing Tag

가장 많이 쓰이는 태그

<div>: 한 줄을 차지
<span>:	컨텐츠 크기만큼 공간을 차지

<img>: 이미지 삽입 <img src="속성"> 닫는 태그가 없음

<a>: 링크 삽입 
  <a href="링크">'하이퍼링크로 사용할 문구'</a> 현재 페이지에서 링크가 열림
  <a href="링크" target="_blank">'하이퍼링크로 사용할 문구'</a> 새 탭에서 링크가 열림
[리스트] <ul(점)> <ol (숫자)> & <li>: 트리 구조로 목차 표현
[입력폼] <input>
  <input type="text" name="" value="">
  <input type="checkbox"> 다중 선택 가능
  <input type="radio"> 하나의 보기로 묶어 주면(name을 같은 거로 설정해서) 단일 선택
[입력폼] <textarea>: 텍스트 입력폼 줄 바꿈이 됨

<button>

시맨틱 요소

• 의미가 있는 요소를 사용하는 방식
• 검색 엔진이 시맨틱을 더 좋아함

<article> : 독립적이고 자체 포함된 콘텐츠를 지정
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용
<main> : 문서의 주된 콘텐츠를 표시
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치

• 중요한 이유: SEO 검색을 최적화하기 위해서, 웹 접근성 때문에, 개발자들의 이해성을 위해서
• header: 웹 사이트의 로고나 사용자를 위한 메뉴 아이템
  • nav: header 안에 여러가지 메뉴가 모여 있음
• main: 중요한 컨텐츠 부분
  • aside: 메인 안에서 페이지 컨텐츠와 직접적으로 상관은 없는 부가적인 내용
  • article: 블로그 포스트 하나, 신문 기사에서 기사 하나를 그 자체를 묶어 줄 때 사용, 이 자체만으로 독립적으로 다른 페이지에 보여졌을 때 전혀 문제가 없을 때, 메인 안에 있는 다른 내용들과 전혀 상관없이 고유한 정보를 나타낼 때/ article 안에 많은 내용이 들어 있을 때 서로 연관 있는 내용을 묶어 줄 때 section으로 묶어 줌
  • section: 연관 있는 내용을 하나로 묶어 줄 때
• footer: 필수는 아니지만, 웹 사이트 맨아래에 부가적인 정보