1. tag (링크 이동)
<!-- _blank: 새로운 페이지 -->
<a href="https://www.naver.com"
target="_blank"
title="네이버로갑니다">
click me
</a>2. 메일
<a href="mailto:bkn007@naver.com">
email me
</a>3. 사진
<img src="./background.jpg"
alt=""
height="200"
>4. 음악 (유튜브 무료 라이브러리 다운 이용하기)
<!-- controls: 재생 , autoplay: 자동재생, muted: 음소거 시작, loop: 무한 재생 -->
<audio
controls
autoplay
muted
loop>
<source src="./Calor Blanco - Cumbia Deli.mp3" type="">
</audio>5. 동영상
<!-- .mp4 .webm .ogg -->
<video
width="500"
controls
muted
autoplay
loop>
<source src="./vidio/애펙_키네틱 타이포그래피.mp4" type="video/mp4">
<source src="./vidio/애펙_키네틱 타이포그래피.webm" type="video/webm">
</video>6. 아이콘 (홈페이지)
<head>
<!-- .ico .png .gif .jpg .svg -->
<!-- 그림판 -> 크기 조정 -> 176 -->
<link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
</head>7. 텍스트 서식 지정
<p>This is normal text</p>
<p>This is <b>굵게</b> text</p>
<p>This is <i>기울임</i> text</p>
<p>This is <u>밑줄</u> text</p>
<p>This is <del>삭제</del> text</p>
<p>This is <big>크게</big> text</p>
<p>This is <small>작게</small> text</p>
<p>This is <sub>아래로 내려가기</sub> text</p>
<p>This is <sup>위로 올라가기</sup> text</p>
<p>This is <tt>고정된 폭</tt> text</p>
<p>This is <mark>하이라이트</mark> text</p>8. <div>, <span> 태그
<body>
<!-- <span> inline container -->
<!-- <div> block container -->
<h1><span style="background-color: tomato;">This is a span title</span></h1>
<h1><div style="background-color: brown;">This is a div title</div></h1>
<p><span style="background-color: tomato;">This is a span sentence</span></p>
<p><div style="background-color: brown;">This is a div sentence</div></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo voluptate laborum saepe minima, voluptatem dolor.
Unde, porro laboriosam quibusdam ducimus,
<span style="background-color: tomato;">quasi saepe aspernatur eaque ipsum laborum modi earum accusamus blanditiis.</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <div style="background-color: brown;">Quo voluptate laborum saepe minima,
voluptatem dolor. Unde, porro laboriosam quibusdam ducimus,</div> quasi saepe aspernatur eaque ipsum laborum modi earum accusamus blanditiis.</p>
</body>9. 목록 종류
<body>
<!-- Unordered List 순서가 정리되지 않은 목록 -->
<h4>식료품</h4>
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>coffee</li>
<ul>
<li>커피 원두</li>
<li>sugar</li>
<li>크리머</li>
</ul>
</ul>
<!-- Ordered List -->
<h4>투두리스트</h4>
<ol style="background-color: yellow; border: 2px solid">
<li>아침먹기</li>
<li>운동하기</li>
<li>공부하기</li>
</ol>
<!-- Description List -->
<h4>크리쳐 종류</h4>
<dl style="background-color: greenyellow; border: 2px solid">
<dt>드래곤</dt>
<dd> 설명하는 곳</dd>
<dt>뱀파이어</dt>
<dd> 설명하는 곳</dd>
<dt>해골</dt>
<dd> 설명하는 곳</dd>
<dt>골렘</dt>
<dd> 설명하는 곳</dd>
</dl>
</body>
10. table
<body>
<!-- 영업 시간 테이블 만들기 -->
<!-- tabel , tr, th, td -->
<!-- border 테두리, align 위치 -->
<h3>운영 시간</h3>
<table border="3">
<tr align="center">
<th width="100">월요일</th>
<th width="100">화요일</th>
<th width="100">수요일</th>
<th width="100">목요일</th>
<th width="100">금요일</th>
<th width="100">토요일</th>
<th width="100">일요일</th>
</tr>
<tr align="center">
<td>휴무</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>10-2</td>
</tr>
</table>
</body>
11. button & little js
<body>
<!-- only html -->
<a href="./page2.html" target="_blank">
<button
style="font-size: 36px;
background-color: gray;
color: lightblue;
border-radius: 10px;">
click me
</button>
</a>
<br>
<!-- js 첨가 -->
<button onclick="doSomething()"
style="font-size: 36px;
background-color: green;
color: lightblue;
border-radius: 10px;">
click me
</button>
<p id="greeting">안녕하세요</p>
<script>
function doSomething() {
document.getElementById("greeting").innerHTML = "잘가"
}
</script>
</body>
12. form & label & input
<body>
<!-- action 지정한 위치로 이동, -->
<!-- laber for === input id -->
<!-- enctype 암호화 유형 -->
<!-- multipart/form-data 대용량 파일, 사진 -->
<form action="#" method="post" enctype="multipart/form-data">
<!-- text -->
<label for="username">아이디:</label>
<input type="text" placeholder="아이디 입력" id="username" minlength="6" required> <br>
<!-- 비밀번호 -->
<label for="password">비밀번호</label>
<input type="password" placeholder="비밀번호" id="password" maxlength="15" required> <br>
<!-- 이메일 -->
<label for="email">이메일</label>
<input type="email" placeholder="***@naver.com" id="email" required> <br>
<!-- 전화번호 --> <!-- pattern 자릿수 지정가능 -->
<label for="phone">phone #:</label>
<input type="tel" placeholder="000-0000-0000" id="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required> <br>
<!-- 태어난 날짜 -->
<label for="bday">birthdate</label>
<input type="date" id="bday"> <br>
<!-- 수량 -->
<label for="quantity">quantity</label>
<input type="number" placeholder="수량" id="quantity" min="0" max="99" value="1"> <br>
<!-- 라디오버튼 --> <!-- name: 같은 이름끼리 공유 하나만 선택가능 -->
<label for="title_mr">남</label>
<input type="radio" id="title_mr" value="남" name="title">
<label for="title_ms">여</label>
<input type="radio" id="title_ms" value="여" name="title">
<label for="title">박사</label>
<input type="radio" id="title" value="PhD" name="title"> <br>
<!-- 카드선택 -->
<label for="payment">카드</label>
<select name="payment" id="payment">
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
<option value="giftcard">giftcard</option>
</select> <br>
<!-- 체크박스 -->
<label for="subscribe">승인:</label>
<input type="checkbox" id="subscribe"> <br>
<!-- 게시판 -->
<label for="comment">문의:</label>
<textarea id="comment" cols="25" rows="3" placeholder="문의는 여기에 적어주세요!"></textarea> <br>
<!-- 파일 등록 --> <!-- accept 접근 허용 및 제한 -->
<label for="file">file:</label>
<input type="file" id="file" accept="image/png, image/jpeg"> <br>
<!-- 리셋 -->
<input type="reset"> <br>
<!-- 제출 -->
<input type="submit">
</form>
</body>
13. header & main & footer
<body>
<!-- div 와 같지만 개발자들 보기편하게 이름을 지정해둠 -->
<!-- header -->
<!-- main -->
<!-- footer -->
<header style="background-color: greenyellow;">
<h1>반가워요 !!</h1>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">products</a>
<a href="#">contact Us</a>
<hr>
</header>
<main>
<h4>메인 글들</h4>
<img src="/img/짱구는.jpg" alt="배경화면">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque aspernatur a architecto quisquam ea laudantium ut quo modi repellendus minima mollitia impedit, quaerat tenetur saepe numquam autem. Atque, labore nam.</p>
</main>
<footer style="background-color: greenyellow;">
<hr>
auther: 짱구는 못말려 <br>
© 저작권 표시방법 <br>
<a href="./page2.html">www.page.com</a>
</footer>
</body>
여기까지 html 총정리 끝!!