시맨틱 태그 웹 페이지를 만들 때 HTML5의 시맨틱 태그를 이용하여 영역을 구분하여 기본 구조를 정해야한다.
구조 예시
종류 설명
<header>
머리말 영역
<nav>
링크 등의 메뉴 영역
<figure>
동영상, 사진 등 다양한 멀티미디어를 담는 영역
<main>
웹 문서의 본문으로 콘텐츠를 담는 영역
<aside>
본문과 연관성이 적은 외부 영역
<section>
특정 영역을 그룹화한다.
<article>
기사나 개별 콘텐츠를 담는 영역
<footer>
꼬리말 영역
참고로 VSCode에서 ctrl + alt + f 를 누르면 코드들이 자동 정렬된다.
서식태그 block 요소와 inline 요소 블록 요소( Block element ) - 사용 가능한 최대의 가로너비 사용 ( default width 100% )
- 한 줄에 한개 배치
- 레이아웃 작업하기 용이
인라인 요소 ( Inline element ) - 필요한 만큼의 영역을 사용할 수 있음
- 한 줄에 여러개 배치 가능
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
</ head >
< body >
< p style = " background-color: aqua;" > p태그 블록 </ p >
< div style = " background-color: magenta;" > div 태그 블록 </ div >
< br >
< span style = " background-color: red;" > span 태그 인라인1 </ span >
< span style = " background-color: green;" > span 태그 인라인2 </ span >
< span style = " background-color: blue;" > span 태그 인라인3 </ span >
</ body >
</ html >
종류 구분 설명
<h1> ~ <h6> block
제목
숫자가 커질 수록 중요도 감소
<p> block
문단
글 묶어서 나타냄
<div> block
그룹 지정
콘텐츠 그룹화
<strong>, <em> inline
강조
문장이나 단어 강조
<a> inline
링크
페이지 이동 링크
<span> inline
그룹화
인라인 요소 그룹화
<img> inline
이미지
이미지 삽입
<br> inline
줄 바꿈
줄 바꿈
div 태그 콘텐츠를 그룹화 할 수 있다.
아래는 그의 예시로 <h1> , <p> 태그를 그룹화했다.
< div style = " background-color: antiquewhite;" >
< h1 > 제목 </ h1 >
< p style = " background-color: aquamarine;" > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ratione totam exercitationem. Distinctio harum quis adipisci sunt quae magnam dignissimos incidunt nihil eius maxime. Laudantium facilis nisi odit voluptas? Accusamus. </ p >
< p style = " background-color: aquamarine;" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus ad rem quidem error, enim natus, quasi laboriosam magni repudiandae asperiores, dolorum suscipit provident mollitia officiis. Dolorem sed sit consequatur? </ p >
</ div >
a태그 웹 페이지로 바로 이동할 수 있는 링크 태그이다.
아래는 a 태그의 속성이다.
- href : url 입력
- target 속성의 default 값은 _self 이다. ( 같은 창에서 주소 이동함 )
_blank는 새 창에서 열어준다.
img태그 - src : 이미지의 경로
- alt : 이미지 설명
img 태그 예시
목록태그 목록태그의 종류는 위와 같다.
<ul>태그와 <ol> 태그를 쓸 때는 자식 태그에 <li>태그를 반드시 써야한다.
정렬안된 목록 - <ul> ex)
< h1 > 과일 목록 </ h1 >
< ul >
< li > 딸기 </ li >
< li > 샤인머스캣 </ li >
< li > 오렌지 </ li >
</ ul >
정렬된 목록 - <ol> ex)
< h1 > 순위 </ h1 >
< ol >
< li > 갑 </ li >
< li > 을 </ li >
< li > 병 </ li >
< li > 정 </ li >
</ ol >
정의형 목록 - <dl>, <dt>, <dd> 부모태그 - <dl> // 전체 목록을 감싸준다.
자식태그 - <dt>, <dd>
< h1 > 정의형 목록 </ h1 >
< dl >
< dt > 정의할 제목 </ dt >
< dd > 정의할 내용 </ dd >
</ dl >
중첩된 목록
< ul >
< li > Coffee </ li >
< li > Tea
< ul >
< li > Black tea </ li >
< li > Green tea </ li >
</ ul >
</ li >
< li > Milk </ li >
</ ul >
폼 태그
폼 태그는 사용자가 입력한 데이터를 받아 웹 서버와 데이터베이스를 활용하여 가공할 수 있다.
폼 태그의 요소는 위와같다.
<label>은 input의 요소 제목을 나타낸다.
<input> 태그의 타입은 다음과 같다. input 태그의 type
몇가지 예시를 설명해보겠다.
ex) password
< label > 비밀번호 </ label >
< input type = "password" >
input 타입으로 password를 지정해주면 보안을 위해 기호로 표시된다.
ex) checkbox
< h1 > 취미 </ h1 >
< label > 스포츠 </ label >
< input type = "checkbox" value = "sports" >
< label > 게임 </ label >
< input type = "checkbox" value = "game" >
< label > 요리 </ label >
< input type = "checkbox" value = "cook" >
value값을 줘서 서버로 전송할 수 있다.
ex) radio
< h1 > 라디오박스 </ h1 >
< label > 예시1 </ label >
< input type = "radio" name = "ex" value = "ex1" >
< label > 예시2 </ label >
< input type = "radio" name = "ex" value = "ex2" >
< label > 예시3 </ label >
< input type = "radio" name = "ex" value = "ex3" >
type으로 radio 속성을 줘서 여러 데이터 중 하나를 선택하게 한다.
name 값을 똑같이 입력하면 값을 하나만 선택 할 수 있다.
<select> 태그 - 드롭다운 메뉴
< h1 > 드롭다운 </ h1 >
< select >
< option > 선택 1 </ option >
< option > 선택 2 </ option >
< option > 선택 3 </ option >
</ select >
자식태그로 <option>을 작성한다.
<form>태그 - 여러 입력 양식을 그룹화하고 전송하기 속성으로 반드시 action 과 method 를 지정해야한다.
action - 특정 주소값, 파일위치
method - 전송방식 (get, post)
ex)
< form action = "/" method = "get" >
< input type = "radio" id = "html" name = "fav_language" value = "HTML" >
< label for = "html" > HTML </ label >< br >
< input type = "radio" id = "css" name = "fav_language" value = "CSS" checked = "checked" >
< label for = "css" > CSS </ label >< br >
< input type = "radio" id = "javascript" name = "fav_language" value = "JavaScript" >
< label for = "javascript" > JavaScript </ label >< br >< br >
< input type = "submit" value = "Submit" >
</ form >
비디오/오디오 태그
<audio> - 오디오 파일 재생
< audio src = "/" controls loop ></ audio >
속성
종류 설명
cotrols
재생 컨트롤 패널 생성
autoplay
파일 자동 재생
loop
무한 반복 재생
preload
재생 전에 파일을 미리 불러옴
<video> - 동영상 파일 재생
< video src = "/" poster = "/" controls loop ></ video >
속성
종류
설명
controls
재생 컨트롤 패널 생성
autoplay
파일 자동 재생
loop
무한 반복 재생
muted
동영상에서 소리가 나지 않도록 함
preload
재생 전에 파일 미리 불러옴
poster
플레이어 초기 화면에 보여줄 이미지 지정
자료 참고 https://www.w3schools.com/
