[23.09.01] 29일차
<<진도>>
Front-end
- HTML 태그
(<a>, <iframe>, <heading>, <hr>, <dfn-abbr-cite-small>, <img>, <list>, <table>, <pre>)
<<오늘의 팁>>
ctrl + b : 왼쪽 메뉴 활성화/비활성화
Emmet 단축ul li
ul>li*3 (li 3줄짜리)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<<html tag>>
[<dfn - abbr - cite – small>]
dfn - abbr - cite – small
<!-- dfn : 단어의 뜻(정의) 설명 -->
<p>우리는 <dfn title="하이퍼텍스트 마크업 언어는 웹 페이지를 위한 마크업 언어이다.">HTML</dfn>을 배우고 있습니다</p>
<!-- html에 마우스를 올려보면 설명이나옴(Tooltip 툴팁이라고 함) -->
<!-- abbr : 줄임말(준말), 약어(약자) 설명 -->
<p>월드 와이드 웹 컨소시엄(<abbr title="World Wide Web Consortium">W3C</abbr>)
</p>
<!-- cite : 작품의 제목 설명 -->
<p>크러쉬 : <cite>잊을만 하면</cite></p>
<!-- small : 부가 설명 -->
<p>합계 금액 : 66,000원<small>(부가세 포함)</small></p>
[<pre>, HTML Entities]
pre
<div>
오늘 날씨가 좋아요!
오늘도 < 좋은 하루~
Copyright © 2017
</div>
<pre>
int num = 10;
😅
<hr> 태그는 수평선입니다.
<hr> 태그는 수평선입니다.
<!-- html entity -->
오늘 날씨가 좋아요!
오늘 날씨가 좋아요!
오늘도 좋은 하루~
</pre>
[html entities]
https://www.w3schools.com/html/html_entities.asp
[head]
heading
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<!-- 구조상 중요한 순서에 따라 1234 -->
[list]
list
<!--
ol : ordered list
순서가 있는 목록
ul : unordered list
순서가 없는 목록
li : list item
-->
<div>식순</div>
<ol>
<li>대표님 인사</li>
<li>각 부서장 전달 사항</li>
<li>보고 발표</li>
<li>식사</li>
</ol>
<div>과일 종류</div>
<ul>
<li>사과</li>
<li>딸기</li>
<li>복숭아</li>
<li>멜론</li>
</ul>
<!--
dl : definition list 정의 목록
dt : definition term 정의 용어
dd : definition description 정의 설명
-->
<div>정의 목록</div>
<dl>
<dt>정의</dt>
<dd>사회나 공동체를 위한 옳고 바른 도리</dd>
<dt>바른 의의</dt>
<dd>플라톤의 철학에서, 지혜와 용기와 절제의 완전한 조화를 이르는 말</dd>
</dl>
[<a> : anchor]
<!--
[a] 태그
: anchor - 닻, 정박지
: 다른 웹 페이지로 이동
: 현재 웹 페이지의 특정 위치로 이동
: href - hyper reference
-->
<div><a href="https://www.naver.com/">네이버</a>로 이동합니다.</div>
<div><a href="https://www.daum.net/" target="_blank" title="새 창으로 열립니다.">다음</a>으로 이동합니다.</div>
<div><a href="heading.html">heading.html 파일</a>로 이동합니다.</div>
<div>
<div id="here">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit et, aut recusandae placeat ipsum
sapiente unde, cum libero laborum vero cupiditate molestiae asperiores facere voluptatibus assumenda sit dolor,
dignissimos facilis?</div>
<br> ~ 중략 ~ <br><br>
<div>Enim aliquam aperiam laudantium, quo amet possimus, nihil labore nobis doloremque minima laboriosam optio eaque
temporibus et dolores eos in nulla aliquid consequatur sit illo, ex rem at harum! Cumque?</div>
</div>
<p><a href="#here">특정 위치</a>로 이동</p>
<p><a href="#">페이지 가장 위</a>로 이동하겠습니다.</p>
[<img> 이미지태그]
img
<!--
[alt] : alternate text
: 대체 텍스트
-->
<img src="img/mountain-4381041_1280.png" alt="sunset" width="200px" title="일몰입니다.">
[<table> 표 관련 태그]
table
<body>
<div>테이블 연습</div>
<table border="1" width="100%">
<caption>과일 테이블 : 캡션은 테이블의 제목 또는 설명</caption>
<colgroup>
<col width="20%">
<col width="30%">
<col>
</colgroup>
<thead>
<tr>
<th>번호</th> <th>과일명</th> <th>수량</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td rowspan="2">사과</td> <td>10</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 수량</td>
<td>15</td>
</tr>
</tfoot>
</table>
</body>
colspan 열합치기
rowspan행합치기
[<iframe>]
예시
<iframe
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe src="https://www.wah.or.kr:444/" frameborder="1" width="800" height="600"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0dD-9v6yChY?si=inOkfkFuVxHE5-VP"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SAi7q3DHH38" title="tititle" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
'학습 기록 > FE (React, JS, HTML, CSS, ...)' 카테고리의 다른 글
| 230907 [CSS] text, list, border, width, height, box-model, background, background-image (0) | 2023.09.07 |
|---|---|
| 230906 [CSS] font, text (1) | 2023.09.06 |
| 230905 HTML 기본구조, CSS, selector 선택자 (0) | 2023.09.05 |
| 230904 form tag 폼 태그, HTML5 (1) | 2023.09.04 |
| 230831 Front-end 프론트엔드 - VScode, HTML, DOM, element, tag, meta, p, strong, em, mark, block과 inline (0) | 2023.08.31 |
