목차
W3C HTML 설명란
HTML 정의
HTML 태그
시멘틱 마크업
W3C HTML 설명란
https://www.w3schools.com/html/
공식 사이트에서 제공하는 공식 문서를 확인하는 습관을 들이면 좋다.
어떤 코딩 언어든 그 언어가 왜 만들어졌는지 공부한다면 기본기를 다지기에 용이하고, 오류를 범할 가능성을 낮출 수 있다.
HTML 정의
‘Hyper Text Markup Language’ 를 줄여서 HTML 이라고 부른다. 웹 페이지를 만들 때 사용하는 기본언어이다. 집에 비유하자면 뼈대 혹은 구조에 해당한다. 시작하는 꺽새괄호 <> 와 끝나는 꺽새괄호 </> 를 태그라고 부른다. 이러한 태그를 이용하여 웹 페이지에 문자, 이미지, 링크 등을 출력할 수 있다.
HTML 태그
■ 주석문
<!-- -->
<!-- 주석문 단축키 : 'ctrl + /' 웹 브라우저에 출력되지 않는 부분이다.-->
■ block 요소
요소 자체가 한 줄 전체를 차지.
■ inline 요소
할당된 공간만 차지
■ 상대경로
로컬 파일 내에 있는 이미지
■ 절대경로
웹에 업로드 된 이미지
■ html선언
문서 타입을 먼저 선언해줘야 한다.
<!--!DOCTYPE html : html 버전 선언.-->
<!-- 해당 페이지가 어떤 HTML 버전으로 작성됐는지 나타냅니다 -->
<!DOCTYPE html>
<!--lang="" : 문서 내 기본 언어 명시.-->
<html lang="en">
■ <head> ~ </head>
html 페이지 정보가 들어간다.
<!-- <head>~</head> : html 페이지 정보 -->
<head> </head>
☞ UTF-8
<!-- UTF-8 : 문자 코드 -->
<meta charset="UTF-8">
☞ viewport
<!-- content="width=device-width : 반응형이면 그대로, 적응형이면 px값을 써준다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
☞ title
<!-- <title>~</title> : 페이지 제목.-->
<title>html 기초</title>
☞ favicon
<!-- favicon(페이지 제목 옆에 이미지)-->
<link rel="icon" type="image/png" sizes="32x32" href="images/header&footer/favicon.png">
☞ CSS
<!-- CSS -->
<!-- <style>~</style> : 내부 스타일 (@import도 가능)-->
<!-- <link rel="stylesheet" href="링크 경로"> 외부 스타일 -->
☞ font
<!-- font -->
<!-- Embed code in the <head> of your html -->
<!-- 글꼴 불러오는 방법 1 : link 삽입-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
☞ JS, jQuery
<!-- Javascript,jQuery 소스 : jQuery버전과 aos.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
■ <body> ~ </body>
페이지 내용이 들어간다.
<body> </body>→
html태그는 보통 종료태그가 있으나 몇몇개는 종료태그가 없다.
| 태그 | 설명 |
| <hn> ~ </hn> | 제목 태그 (block요소), n = 1 ~ 6 |
| <p> ~ </p> | 단락(Paragraph) 태그 (block 요소) |
| <br> | 줄 바꿈 태그 (종료태그가 없다) |
| <strong> ~ </strong> | 진하게 강조 (inline 요소) |
| <b> ~ </b> | 진하게 강조 (inline요소) |
| <em> ~ </em> | 기울기 (inline요소) |
| <i> ~ </i> | 이탤릭체 (inline요소) |
| <small> ~ </small> | 글자 작게 (inline요소) |
| <mark> ~ </mark> | 형광펜 (inline요소) |
| <hr> | 수평선 태그 |
| <abbr title=""></abbr> | 마우스 over시 title 설명이 노출된다. |
| <blockquote> ~ </blockquote> | 들여쓰는 인용문 |
| <q> ~ </q> | 따옴표 있는 인용문 |
| <cite> ~ </cite> | 인용된 작품의 제목 또는 출처를 나타낼 때 쓴다. |
| <code> ~ </code> | 짧은 코드를 나타낼 때 사용 |
| <kbd></kbd> | |
| <pre> ~ </pre> | 코드 형태로 출력 |
| <ruby> <rt></rt> </ruby> | rt태그로 위에 글 표시 |
| <sub> ~ </sub> | 아랫첨자 |
| <sup> ~ </sup> | 윗첨자 |
| <s> ~ </s> | 삭제줄 |
| <u> ~ </u> | 밑줄 |
| <ul> <li></li> <ul> |
비순서형 목록태그, 불릿이 기본 설정 |
| <ol type="A" start="5" > <li></li> <ol> |
순서형 목록태그, type과 start 설정 가능 |
| <dl> <dt></dt> <dd></dd> <dl> |
dt : 정의형 목록 제목, dd : 정의형 목록 내용 |
| <img src="" alt=""> | 이미지, 종료태그X, inline요소 src : 경로속성, alt = 대체 텍스트 속성 title, width, height 등 직접 설정 가능 동일폴더 → 파일명+확장자 하위폴더 → 폴더명/파일명+확장자 상위폴더 → ../파일명+확장자 웹 속도를 위해 이미지 크기를 반드시 확인해야 한다. |
| <a> ~ </a> | 하이퍼링크 태그. inline요소. target = "_blank" : 새 창으로 열기 target ="_top" : 부모 창 전체를 이용해서 열기 title : 마우스 호버시 뜨는 제목 |
| <cite> ~ </cite> | 인용된 작품의 제목 또는 출처를 나타낼 때 쓴다. |
<div class="a">
<!-- <a>~</a> : 하이퍼링크 태그. inline요소 -->
<a href="https://www.w3schools.com/html/" title="W3C_html_tutorial" target="_blank">Go to W3C html
tutorial
(새 창이 열립니다.)</a>
<a href="https://www.w3schools.com/charsets/ref_html_entities_4.asp" title="html_특수문자">W3C html 특수문자
보러가기
(기존 창에서 열립니다.)</a>
<!-- href="링크 경로"(필수!)
title="대체 텍스트"
target="설정없음=(기존 창에서 열기), _blank(새 창으로 열기), _top(부모 창 전체를 이용해 열기)" -->
</div>
<div class="a & img">
<!-- 이미지에 링크 거는 방법 -->
<a href="https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=20898" target="_blank">
<img src="https://cf.lottecinema.co.kr//Media/MovieFile/MovieImg/202403/20898_103_1.jpg"
width="300px" alt="악은 존재하지 않는다">
</a>
</div>
<div class="map">
<!-- usemap="#name"과 map name="name"이 같아야 한다.-->
<img src="https://cf.lottecinema.co.kr//Media/MovieFile/MovieImg/202404/20703_103_1.jpg" usemap="#movie"
width="300px" alt="쿵푸팬더4_포스터">
<map name="movie">
<area shape="rect" coords="70,120,250,300"
href="https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=20703" alt="쿵푸팬더4">
<!-- area : 이미지 영역을 정함
shape="모양" -> circle은 3개 지정, rect(사각형)는 4개 지정.
coords="x,y좌표"-->
</map>
</div>
<div class="iframe">
<!-- iframe태그 : 외부 문서 불러오기 (유튜브, 지도 등 가능) -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/FtT9ECmwmWk?si=5sg8pVj1Bm-K1VTv"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="video">
<!-- 이미 가지고 있는 비디오 삽입 -->
<video src=""></video>
<!-- preload="미리 로드하기"
autoplay="자동재생"
muted="무음"
loop="무한반복"-->
</div>
</section>
<section class="table">
<table border="1" cellspacing="1" cellpadding="4">
<caption>caption태그 : 표 제목 (위만 가능)</caption>
<tr>
<th>태그 종류</th>
<th>tr태그</th>
<th>th태그</th>
<th>td태그</th>
<td colspan="2">colspan</td>
</tr>
<tr>
<th>태그 설명</th>
<td>행 태그</td>
<td>제목 태그</td>
<td>셀 태그</td>
<td rowspan="2">rowspan</td>
</tr>
<tr>
<th>태그 설명</th>
<td>행 태그</td>
<td>제목 태그</td>
<td>셀 태그</td>
</tr>
</table>
<table border="1">
<colgroup>
<col>
<col span="2" style="background-color: aquamarine;">
<col style="background-color: blueviolet;">
</colgroup>
<tr>
<td rowspan="2">colgroup & col 태그를 이용해서</td>
<td colspan="2">셀 배경 색상 설정</td>
<td style="color: #fff">rowspan과 colspan으로</td>
</tr>
<tr>
<td>colspan은 가로</td>
<td>rowspan은 세로</td>
<td style="color: #fff">셀을 합칠 수 있습니다.</td>
</tr>
</table>
<figure>
<figcaption> figure&figcaption태그 : 표 제목 (위,아래 가능)</figcaption>
</figure>
</section>
<section class="form" style="padding-top: 30px;">
<!--form : 게시판-->
<form action="buy.jsp" method="post">
<!--action="해당 문서로 이동"
method="통신 방식"-->
<!--ERR_FILE_NOT_FOUND : buy.jsp로 이동 못해서 오류 발생-->
<fieldset>
<!--fieldset : 테두리 박스-->
<!-- legend : fieldset에 제목을 나타냄-->
<legend>주문서</legend>
<p>
<!-- input : 특정 UI(user interface(디자인)) 항목을 만들때 사용-->
<!-- label for=""와 id="" 이름을 맞추어야 커서가 위치됨.-->
<label for="name">이름<i>*</i></label>
<input type="name" name="" id="name" placeholder="이름" autofocus required><br>
<label for="phone">전화번호<i>*</i></label>
<input type="tel" id="phone" placeholder="전화번호" maxlength="13" required><br>
<label for="id_text">아이디<i>*</i></label>
<input type="text" id="id_text" required size="10">
<label for="password">비밀번호<i>*</i></label>
<input type="password" id="password" required size="25"><br>
<!-- input type 값
text : 입력
name : 이름
tel : 전화번호
password : 비밀번호 (불릿으로 표시됨)
search : 검색
email : 이메일
file : 파일
number : 숫자
range : 범위
color : 색깔 색상선택(기본 검정색)
RGB 3원색을 가지고 색상 조합,
value 16진수가 2개씩 쌍으로 6개 (RGB) -> 00~ff,
10진수:0~9, 16진수:A(10)~F(15)
date : 날짜
month : 월
week : 주
time : 시간
datetime-local : 년도,월,일,시간 모두 표시
img : 이미지
submit : 제출 (기본값=제출로 표기됨, value로 변경 가능. 서버로 전송되는 버튼!)
reset : form 안에 있는 값 초기화 -->
<!-- input 속성
value : 초기값 설정 가능 (number 같은 경우)
required : 필수값
placeholder : 설명,힌트. 주로 전화번호에 많이 사용(ex.하이픈 없이 입력)
size : number 박스 길이 설정, select 콤보박스에 표시되는 행수
multiple : 여러개 선택 가능
min : 최솟값
max : 최댓값
step : x배수로 증가.증가 단위
maxlength : 최대 입력 개수
autofocus : 자동으로 포커스
selected : 초기값 설정
checked : 체크 박스에 기본 체크
name : 이름 설정
title : 제목 설정
readonly : 값 변경 불가. 주로 회원 아이디에 많이 사용.-->
</p>
<div>
<p>주문하는 찻잎 종류 (1개만 선택 가능)</p>
<!-- 라디오버튼은 name의 속성값이 같아야 하나만 선택됨-->
<label>
<input type="radio" name="tea">녹차
</label>
<label>
<input type="radio" name="tea">홍차
</label>
<label>
<input type="radio" name="tea">호지차
</label>
<label>
<input type="radio" name="tea">밀크티
</label>
<label>
<input type="radio" name="tea">망고사고
</label>
<div>
<label for="count">구매수량</label>
<input type="number" id="count" value="0" min="0" max="100" step="5"> <small
style="color: gray;">(5개 단위로 구매 가능, 최대 100개)</small>
</div>
</div>
<div>
<p>배송 건의사항</p>
<select name="" id="">
<option value="none">선택안함</option>
<option value="self">직접입력하기</option>
<option value="front" selected>문 앞에 놓아주세요</option>
<option value="call">부재시 연락 부탁드려요</option>
<option value="call2">배송 전 미리 연락해 주세요</option>
</select>
<p>기타 건의사항</p>
<div>
<textarea name="textarea" id="" cols="55" rows="5"
placeholder="기타 건의사항이 있다면 작성해주세요"></textarea>
<textarea name="textarea" id="" cols="55" rows="5"
placeholder="css로 resize: none; 값을 주면 상자 크기를 고정시킬 수 있습니다."
style="resize: none;"></textarea>
</div>
</div>
<div>
<!-- name="서버로 전송되는 값(화면에 표시는 안됨)"-->
<input type="checkbox" name="required" checked required>(필수)이용약관에 동의합니다.
<input type="checkbox" name="choice1">(선택)마케팅 문자 수신을 받겠습니다.
<input type="checkbox" name="choice1">(선택)마케팅 이메일 수신을 받겠습니다.
</div>
<p>
<input type="text" style="width: 400px; height: 50px;" readonly
placeholder="오늘도 좋은 하루 되세요 (해당란은 임의로 수정할 수 없습니다.)">
</p>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="다시쓰기">
</div>
<div>
<button>버튼은 정보가 서버로 넘어가지 않습니다.</button>
<button type="submit">type="submit" 값을 줄 수 있다.</button>
<button type="reset">type="reset" 값을 줄 수 있다.</button>
</div>
</fieldset>
<fieldset>
<legend>음료 사전 주문</legend>
당도 설정(0%, 30%, 50%(기본), 80%, 100%)<input type="range" value="2" min="0" max="4">
<br>예약일<input type="date"> 픽업 희망 시간대 <input type="time">
<br>오픈시간<input type="time" value="10:00"> 마감시간<input type="time" value="17:00">
<!--select 박스, 드롭다운리스트, 콤보박스(실무에서 많이 사용)-->
<br><select name="" id="">
<!--value 속성 값은 서버로 들고 간다.-->
<option value="ice">얼음 적게</option>
<option value="ice" selected>얼음 보통</option>
<option value="ice">얼음 많이</option>
</select>
<br><select name="" id="">
<optgroup label="NEW 시즌 메뉴">
<option value="mini_mango">미니펄 망고 밀크</option>
<option value="mini_mango_crush">미니펄 망고 크러쉬</option>
<option value="taro_smoothie">타로 스무디</option>
<option value="lemon_smoothie">레몬 요구르트 스무디</option>
</optgroup>
<optgroup label="베스트 콤비네이션">
<option value="best_blackmilktea">블랙 밀크티</option>
<option value="best_gyual">청귤 스파클링티</option>
<option value="best_taromilktea">타로 밀크티</option>
<option value="best_grapefruit">자몽 그린티</option>
<option value="best_mango">망고 요구르트</option>
</optgroup>
<optgroup label="스파클링티">
<option value="jasmin">자스민 그린 스파클링 티</option>
<option value="tropical">트로피칼 스파클링 티</option>
</optgroup>
</select>
<input type="text" list="choices">
<!-- list, id 추가해야 콤보가 출력되고, 선택하면 value 값이 출력됨 -->
<datalist id="choices">
<option value="straw" label="빨대"></option>
<option value="paper" label="냅킨"></option>
<option value="spoon" label="숟가락"></option>
<option value="fork" label="포크"></option>
</datalist>
<br>주문하기 버튼은 음료 사진입니다.<input type="image"
src="https://www.gong-cha.co.kr/uploads/product/20231115/nHBQkPO83yAS12qr_20231115.png"
width="50px" alt="공차_청귤에이드">
</fieldset>
</form>
<div class="form_etc">
<ul>
<li>
10초 남음
<!-- 전체 60초 중 50초 진행 -->
<progress max="60" value="50"></progress>
</li>
<li>
진행률 30%
<!-- 전체 100중 30만큼 진행 -->
<progress max="100" value="30"></progress>
</li>
</ul>
<ul>
<li>
점유율 0.8
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->
<meter value="0.8"></meter>
</li>
<li>
사용량 64%
<meter min="0" max="100" value="64"></meter>
</li>
<li>
트래픽 초과
<!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9000이 더 큽니다 -->
<meter min="1024" max="10240" low="2048" high="8192" value="2000"></meter>
</li>
</ul>
</div>
</section>
</main>
</body>시멘틱 마크업
☞ <header> ~ </header> : 머리 부분임을 알리는 시멘틱 태그이다. 주로 로고, 메뉴 등을 넣는다.
<!-- header : 머리부분. 주로 로고, 메뉴 등이 들어감. -->
<header>
<!-- 로고는 보통 h1태그로 감싼다. -->
<h1 class="logo">
<!-- 이미지는 inline요소라서 block요소 태그로 한 번 감싸주는 게 좋다. -->
<div>
<img src="" alt="logo">
</div>
</h1>
<!-- nav : 네비게이션. 주로 메뉴 -->
<nav>
<!-- gnb: 글로벌 네비게이션. 상위 메뉴. -->
<div class="gnb"></div>
<!-- lnb: 로컬 네비게이션.하위 메뉴. -->
<div class="lnb"></div>
</nav>
</header>
☞ <main> ~ </main> :본문 내용을 넣는 시맨틱 태그이다.
<!-- 본문 내용 -->
<main> </main>
☞ <section> ~ </section> : 한 덩어리
☞ <aside> ~ </aside> : 가측 정보
☞ <article> ~ </article> : 기사
☞ <footer> ~ </footer> : 주소 등 정보를 넣는다.
<!-- 주소 등 정보를 기입. -->
<footer>
<address> </address>
</footer>'HTML CSS' 카테고리의 다른 글
| HTML 파일명 규칙 (0) | 2024.07.01 |
|---|---|
| Flexbox (0) | 2024.07.01 |
