HTML5 기초문법

나모네·2022년 1월 15일

📌HTML 웹문서의 기본 구조

<!doctype html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <title>(문서제목)</title>
  </head>
  <body>
    <h1>(글 제목)</h1>
    <p>(글)</p>
  </body>

<!doctype html> : HTML 문서임을 알리는 선언부(태그❌)
<html> : HTML 문서 영역 전체를 감싸는 태그(<head>와<body>로 구성)
- <head> : 페이지에 대한 문서를 설명하는 내용(metadata)을 포함하는 태그
  ✔️metadata? (쉽게 말해)데이터를 설명하는 데이터
- <body> : 본문 내용을 다루는 태그

📌태그의 기본구조, 주석, 절대/상대경로, 블록/인라인 레벨

주석

✔️ 주석? 코드 실행과 무관하게 문서 내부에 작성자가 임의로 작성할 수 있는 코멘트


절대경로/상대경로

절대경로 : 고정적으로 변하지 않는 주소를 사용하는 방식(e.g. naver.com)
상대경로 : 현재 문서를 기준으로 표현하려는 경로를 찾는 방식(e.g. .img/dog.jpg)
- 현재 문서에 있는 폴더 : .(점 하나)
- 현재 문서의 부모 폴더 : ..(점 두개)

블록태그/인라인태그

블록태그 : 항상 웹페이지의 전체 너비를 차지하는 덩어리 태그 (e.g. <div>)
인라인태그 : 자기 자신의 크기만큼만 자리를 차지하는 태그 (e.g. <span>)

태그 중첩 규칙

why❓ 문서에 문제없이 다양한 태그를 중첩해서 사용하기 위해

블록태그 내부에는 블록태그, 인라인태그 모두 중첩 가능

인라인태그 내부에는 인라인태그만 중첩 가능

블록태그 중 문단태그(<p>)는 블록태그지만 내부에 인라인 태그만 중첩가능

📌 제목, 문단, 서식태그(h1~h6, p, br, b, strong, i, em)

제목태그(h1 ~ h6)

✔️ 웹페이지의 섹션 또는 문단의 제목을 나타내는 블록태그 (굵은 볼드 스타일로 지정)

h1 ~ h6 형태로 나타내며 숫자가 작을수록 문서에서 중요, 크기⇑
📝입력

<h1>첫 번째 수준 제목</h1>
<h2>두 번째 수준 제목</h2>
<h3>세 번째 수준 제목</h3>
<h4>네 번째 수준 제목</h4>
<h5>다섯 번째 수준 제목</h5>
<h6>여섯 번째 수준 제목</h6>

💻출력

첫 번째 수준 제목

두 번째 수준 제목

세 번째 수준 제목

네 번째 수준 제목

다섯 번째 수준 제목

여섯 번째 수준 제목

`<p>`

✔️ 문단을 나타낼 때 사용하는 태그 (블록태그)

텍스트서식

✔️ 텍스트에 지정할 수 있는 다양한 효과

 - <b>, <strong> : 글씨굵게. 
 - <i>, <em> : 기울임 글씨
   ~ 화면에 보이는 건 똑같지만 <stong>, <em>은 중요하다는 의미 내포 ~
 
 - <ins> : 밑줄
 
 - <del> : 취소선
 
 - <p> : 짧은 인용문 표시, 인라인태그
 - <blockquote> : 긴 인용문 표시, 블록태그
 
 - <br> : 줄바꿈

📌 리스트, 링크

리스트 태그

✔️ 목록을 생성하는 블록태그 (e.g. 글 목록, 카테고리, 내비게이션 등등)

<ul> : 순서가 없는 리스트 (unordered list)
<ol> : 순서가 있는 리스트 (ordered list). 자동으로 번호가 붙음
- <li> : 리스트 태그 안에 각각의 항목을 표현하는 태그

<ol> <!--또는 <ul>-->
    <li>안녕</li>
    <li>하십</li>
    <li>니까</li>
</ol>

`<a>` : 링크 생성시 사용하는 태그(인라인 태그)

<a href = "https://naver.com" target = "_blank"> 네이버로 이동</a>

href 속성 : 이동할 링크의 주소 입력
target속성 : 링크 클릭시 연결된 웹페이지를 어떻게 열것인지 명시
(속성값)
- "_self" : 기본 값(속성값 지정 안해도 적용). 현재 페이지에서 링크 열림
- "_blank" : 새 창 또는 새 탭에서 링크 열림

🎨 응용

<a> + id속성 => 같은 문서 내에서 링크 생성 가능 (내부링크)

<ul>
  <li><a href = "#first">1단원</a></li>
  <li><a href = "#second">2단원</a></li>
</ul>

<div id = "first">1단원 본문</div>
<div id = "second">2단원 본문</div>
<div id = "#top">위로 가기</div>    <!--페이지 맨 위로 감-->

📌이미지, 비디오, 오디오 태그(img, video, audio)

<img> : 이미지 태그

<img src = "경로(이미지의 주소)" alt = "코멘트">      <!--혼자 쓰이는 태그-->
 - alt : 해당 경로에 있는 이미지를 못 가져왔을 때 이미지 대신 alt 속성의 값 출력
 - <img>에 추가할 수 있는 속성
  - width(가로크기), height(세로크기), title(이미지 위에 마우스 커서 올릴때 잠깐 표시되는 툴팁 생성), 
    loading웹브라우저가 이미지를 가져오는 방식 결정) 등등

멀티미디어 : 이미지, 소리 등의 미디어를 디지털식으로 표현하여 상호작용 할 수 있는형태로 만든 것
(+ 이전엔 멀티미디어 제공기능은 비표준 기능이었기에 브라우저가 지원❌)
=> HTML5부터 멀티미디어 기본적으로 제공(확장프로그램 설치 미필요)
<video> : 비디오
<video src = "경로"></video>
비디오 태그에 추가할 수 있는 제어속성
- width, height, controls(비디오 컨트롤러 생성), autoplay(자동재생), loop(반복재생), poster 등등
오디오
<audio src = "경로"></audio>
- <vido>에서 쓰는 제어속성 사용 가능

📌 div와 span, 클래스와 아이디(class, id)

`<div> & <span>`

여러 개의 태그들을 하나로 그룹 짓거나 공통적인 스타일로 지정하기 위해 사용
비어있는 태그(요구하는 속성 ❌, 적용시 다른태그의 모양, 배치 등 터치 ❌)
<div>는 블록태그. <span>는 인라인태그
class, id 속성과 함께사용 (CSS, JavaScript와 같이 동작하기 위해)

class, id

✔️ HTML 태그를 특정하기 위해 사용됨. 태그에 이름을 붙임
- #(id명) : id 선택자
- .(class명) : class 선택자
공통점 : 선택자로 사용
차이점
- class
  1. 아이디보다 좀 더 유연함
  2. 한번 이상 선언되고 사용된 클래스를 다른 태그에 중복적으로 사용 가능
  3. 하나의 태그에 여러 개의 클래스 지정 가능

	2.
        <h1 class = "cake">안녕<h1>
	<div class = "cake">하세요</div>
          
	3.
        <span class = "cake rice">

하나의 태그에 여러 개의 클래스 지정 가능
- id
  1. 문서 전체에 한번만 선언되고 사용할 수 있음
  2. 이미 사용중인 id를 다른 태그에 중복 사용❌. 태그에 하나의 id만 적용 가능
- 하나의 태그에 class와 id를 각각 적용하는 건 가능

<div id = "cake: class = "kor hi">

📌 폼과 인풋태그(form, input, 입력창)

`<form>`

✔️ 사용자의 입력을 받아서 데이터를 웹 서버 등으로 전송할 때 사용
<form><input~~~></form>

`<input>`

✔️ 무언가를 입력할 때 <form></form> 사이에 작성

<form>
  <input type = "text" placeholder = "이름 입력">
<form>
-type 속성 : 입력 받은 데이터 종류
-placeholder : input에 무엇을 입력해야하는지 알려줌

input 위젯종류
text, number, tel(전화번호), radio(라디오버튼), checkbox(체크박스), password, file, button 등등
input 위젯 사용 예

<form>
  <input type = "email" place holder = "이메일">
  <input type = "submit" value = "회원가입">
<fotm>
  버튼 type
   - submit : 서버로 데이터 전송
   - reset : form 내용 초기화
   - button : 아무 기능 ❌
   - placeholder 대신 value 사용

입력창에 type 지정하면 기본적인 편의기능 제공. 의미론적으로 더 정확하게 웹문서 작성 가능
<button>이용해서 버튼 만들기
- <button>회원가입</button>: submit 타입 기능
- <button type = "button">버튼</button>
- <button type = "reset">리셋</button>
<input>, <button> 차이점
- input과 달리 <button>은 여는 태그와 닫는 태그 사이에 아이콘 등을 추가로 넣을 수 있음
- 스타일링 하기에 더 자유로움

`<lable>`

✔️ 사용자 인터페이스 항목에 이름(라벨)을 붙여주는 역할(정확히는 연결)

📝입력

<lable for = "(연결할 iput위젯의 아이디 입력)">(표시할 이름)</lable>
<input type = "text" id = "(input 위젯 아이디)" placeholder = "이름">

💻출력
(표시할 이름)

radio & checkbox

radio : 단일 선택 옵션
checkbox : 다중 선택 옵션

📝입력

[radio]
<lable for = "man">남자</lable>
<input  id = "man" type = "radio" name = "gender"/>    name속성 : 그룹 이름을 지정하는 속성
<lable for = "woman">여자</lable>
<input  id = "woman" type = "radio" name = "gender"/>

[checkbox]
<lable for = "kor">국어</lable>
<input  id = "kor" type = "checkbox" name = "subject"/> 
<lable for = "math">수학</lable>
<input id = "math" type = "checkbox" name = "subject"/>
<lable for = "eng">영어</lable>
<input id = "eng" type = "checkbox" name = "subject"/>

💻출력
[radio]
남자

여자

[checkbox]
국어

수학

영어

form을 서버로 전송하는 방법

<form action = "(데이터 전송할 주소)" method = "(데이터 전송 방법)"
📖 참고
- HTTP : 클라이언트와 서버간 통신 방법에 대한 규칙
- GET : 서버로부터 정보를 조회하기 위한 메소드 (mehod 선택 생략시 요걸로 자동 선택)
- POST : 리소드를 생성하거나 변경하기 위한 메소드

📌의미론적 태그(header, main, article, section, footer)

HTML5 등장 이전 레이아웃 구성할 때

<div class = "header">상단</div>
<div class = "content">본문</div>
<div class = "footer">하단</div>

이런식으로 웹페이지의 상단 영역, 본문 영역, 사이드바 영역, 하단 영역 등을 <div>을 이용해서 표현 (영역을 나누어서 레이아웃 설계)

현재 <header>, <article>, <footer>등 의미론적 태그로 제공

<div>를 이용한 레이아웃 설계와 의미론적 태그 사용의 차이❓
브라우저나 검색엔진이 해당 영역이 어떤 역할을 하는지 정확하게 알 수 있음

<header><h1>블로그</h1><header>		[문서의 제목]
  <nav>					[네비게이션 링크들의 정의 집할(e.g. 메뉴, 목차 등등)]
    <ul>
      <li><a href = "">목록</a></li>
      <li><a href = "">이전글</a></li>
      <li><a href = "">방명록</a></li>
    <ul>
  </nav>
  <article>				[본문]
  안녕하세요. 감사해요. 잘 있어요. 다시 만나요.    
  </article>
  <footer>				[하단]
    광고~~~~~
  </footer>

나모네

이전 포스트

앞으로의 계획

다음 포스트

HTML5 기초문법

📌HTML 웹문서의 기본 구조

📌태그의 기본구조, 주석, 절대/상대경로, 블록/인라인 레벨

태그

주석

절대경로/상대경로

블록태그/인라인태그

태그 중첩 규칙

📌 제목, 문단, 서식태그(h1~h6, p, br, b, strong, i, em)

제목태그(h1 ~ h6)

첫 번째 수준 제목

두 번째 수준 제목

세 번째 수준 제목

네 번째 수준 제목

다섯 번째 수준 제목

여섯 번째 수준 제목

`<p>`

텍스트서식

📌 리스트, 링크

리스트 태그

`<a>` : 링크 생성시 사용하는 태그(인라인 태그)

🎨 응용

📌이미지, 비디오, 오디오 태그(img, video, audio)

📌 div와 span, 클래스와 아이디(class, id)

`<div> & <span>`

class, id

📌 폼과 인풋태그(form, input, 입력창)

`<form>`

`<input>`

`<lable>`

radio & checkbox

form을 서버로 전송하는 방법

📌의미론적 태그(header, main, article, section, footer)

앞으로의 계획

백준 2577번 - 숫자의 개수[C/C++]

0개의 댓글

HTML5 기초문법

📌HTML 웹문서의 기본 구조

📌태그의 기본구조, 주석, 절대/상대경로, 블록/인라인 레벨

태그

주석

절대경로/상대경로

블록태그/인라인태그

태그 중첩 규칙

📌 제목, 문단, 서식태그(h1~h6, p, br, b, strong, i, em)

제목태그(h1 ~ h6)

첫 번째 수준 제목

두 번째 수준 제목

세 번째 수준 제목

네 번째 수준 제목

다섯 번째 수준 제목

여섯 번째 수준 제목

<p>

텍스트서식

📌 리스트, 링크

리스트 태그

<a> : 링크 생성시 사용하는 태그(인라인 태그)

🎨 응용

📌이미지, 비디오, 오디오 태그(img, video, audio)

📌 div와 span, 클래스와 아이디(class, id)

<div> & <span>

class, id

📌 폼과 인풋태그(form, input, 입력창)

<form>

<input>

<lable>

radio & checkbox

form을 서버로 전송하는 방법

📌의미론적 태그(header, main, article, section, footer)

앞으로의 계획

백준 2577번 - 숫자의 개수[C/C++]

0개의 댓글

`<p>`

`<a>` : 링크 생성시 사용하는 태그(인라인 태그)

`<div> & <span>`

`<form>`

`<input>`

`<lable>`