2/26(금) FrontEnd/HTML5(1)
HTML5
<예시>
<properties> </properties> <entry> </entry>
1. 글자관련 태그
<!DOCTYPE html> <!-- HTML5 문서형식 선언-->
<html lang = "ko"> <!-- 문서의 시작과 끝을 표시해주는 태그(lang속성: 언어)-->
<!-- head: 현재 이 문서의 각종 정보와 제목, 설명 등등 표기, 화면 노출 x
<meta>, <title>, <style>, <link>, <script>
-->
<head>
<meta charset="UTF-8">
<meta name="generator" content="VScode"> <!-- generator : 문서를 생성한 프로그램-->
<meta name="author" content="gooks"> <!-- author : 문서의 저자-->
<meta name="keywords" content="글자,태그"><!-- keywords : 검색어로 사용(검색엔진)-->
<meta name="description" content="이 문서는 글자관련된 태그들을 공부하는 문서입니다.">
<title>
글자 관련 태그 공부중
</title>
</head>
<!-- body: 화면에 출력해서 보여주고자 하는 모든 내용 표기(화면 노출)-->
<body>
crtl + q 눌렀다가 바로 s 누르면 preview창
crtl + / 바로 주석
<br> 띄어쓰기 태그
<h1> h1 태그입니다. </h1>
<h2> h2 태그입니다. </h2>
<h3> h3 태그입니다. </h3>
<h4> h4 태그입니다. </h4>
<h5> h5 태그입니다. </h5>
<h6> h6태그입니다. </h6>
<hr>
<!-- <hr> 수평선 넣어주면서 줄 바꿈 태그 -->
<h3> *문단을 나누는 태그 (p, pre) </h3>
<p>
문단 영역을 나누는 태그로 p태그와 pre태그가 있다. p태그는 문단 영역을 나누는 태그지만 줄 바꿈을 하고자 한다면
br 태그를 별도로 기술해야함, 뿐만 아니라 한 개의 공백만 표시하기 때문에
추가적인 공백을 넣고자 한 특정 구문을 작성해야 됨
</p>
<pre>
pre 태그는 이러한 띄어쓰기 적용됨
줄 바꿈도 알아서 적용 됨
즉, 작성한 내용 있는 그대로를 표현하는 태그는
</pre>
<hr>
<h3> *기타 글자 관련 태그</h3>
<b> b: 글자를 굵게 표시하는 태그 </b>
<str> str: 글자를 굵게 표시하는 태그 </str>
<em> em: 글자를 기울이는 태그</em>
<mark> mark: <em><b>형광펜 u: 글자 밑에 밑줄 긋는 태그 효과를 나타내는 태그</b></em>
효과를 나타내는 태그</mark> <br>
<u> u: 글자 밑에 밑줄 긋는 태그 </u><br>
<s> s: 글자에 취소선을 넣는 태그 </s><br>
<small> small: 글자를 작게 표시하는 태그</small>
기본 글자에 <sub> sub : 아래첨자 </sub> 를 나타내는 태그와
<sup> sup: 윗첨자 </sup>를 나타내는 태그 <br>
<abbr title="Internet Of Things">IOT</abbr> 란
각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기능이다.
<h3> 태그를 중첩으로 사용</h3>
<p>
태그들 간에 중첩으로 사용 가능<br>
<b>굵은</b> 글자를 사용할 수 도 있고, <em>기울이거나</em> <s><b>굵게</b>
표시하면서 <mark>취소선</mark></s>도 넣을 수 있다.
</p>
</body>
</html>
2. 목록 관련 태그
<!DOCTYPE html5>
<html>
<head>
</head>
<body>
<li>목록1</li>
<li>목록2</li>
<h1> ul : 순서 없는 목록 태그 </h1>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
<!-- 불릿기호 : 채워진원, 빈원, 네모난거... 변경 가능 CSS에서-->
<ul>
<li>
HTML5
<ul>
<li>글자관련</li>
<li>목록관련</li>
</ul>
</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
<hr>
<h1>ol: 순서 있는 목록 태그</h1>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<!-- 순서 있는 목록 태그의 기본 타입 : 1부터 시작하는 숫자값 -->
<br>
<!-- type 속성을 이용해서 변경가능(1, A, a, i, I) -->
<ol type="I">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<br>
<!-- start 속성을 이용해서 변경 가능 -->
<ol start="5">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<br>
<!-- 여러개의 속성 지정 가능 -->
<ol type="A" start="5">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<br>
<!-- Reversed 속성을 통해 역순으로 표기(속성값 굳이 작성x) -->
<ol reversed>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<hr>
<h1> d1: 설명과 관련된 목록 태그</h1>
<dl>
<dt> 이곳은 제목을 작성하는 곳 </dt>
<dd> 이곳은 해당 설명을 작성하는 곳 </dd>
<dd> 여러 줄을 작성할 수 있음</dd>
<br>
<dt> 또 다른 제목 작성 가능</dt>
<dd> 설명도 마찬가지.... </dd>
</dl>
</body>
</html>
3. 표 관련 태그
: 표 : 웹 문서에서 자료를 정리할 때 주로 사용
행과 열로 이루어져있음
행과 열이 만나는 지점을 셀이라고 함
표를 구성하는 태그 : ```
<table>, <tr>, <th>, <td>
<table> : 기본적으로 표를 생성
<tr> 표의 한 행을 나타내는 태그
<th> 표의 제목셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
<td> 표의 일반 셀을 나타내는 태그
```
<!DOCTYPE html>
<html>
<head>
<title> 표 관련 태그 공부</title>
</head>
<body>
<!--
표 : 웹 문서에서 자료를 정리할 때 주로 사용
행과 열로 이루어져있음
행과 열이 만나는 지점을 셀이라고 함
표를 구성하는 태그 : <table>, <tr>, <th>, <td>
<table> : 기본적으로 표를 생성
<tr> 표의 한 행을 나타내는 태그
<th> 표의 제목셀을 나타내는 태그 => 글자 굵게, 가운데 정렬
<td> 표의 일반 셀을 나타내는 태그
*기본구조(3행 2열)
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
-->
<h1> 기본적인 표 만들기(4행 3열)</h1>
<table border="1"> <!-- border 속성 : 테두리 두께-->
<!-- <caption> 테이블의 중간위치에 위치하게 됨-->
<caption> <b>그냥 하고 싶은 말 </b> </caption>
<tr>
<th width="130" height="30">안녕하세요</th>
<th width="80">반갑습니다</th>
<th width="150">잘 오셨습니다.</th>>
</tr>
<tr>
<td>이게 바로</td>
<td>무엇입니까</td>
<td>하하하하하하</td>
</tr>
<tr>
<td>이것은</td>
<td>저의</td>
<td>세계지요</td>
</tr>
<tr>
<td>놀라셨는지요</td>
<td> 아니리라</td>
<td> 믿습니다용 </td>
</tr>
</table>
<figure>
<figcaption>테이블의 설명 혹은 이미지의 설명에 주로 사용</figcaption>
</figure>
<hr>
<h1> 표의 행과 열을 합치는 속성</h1>
<!-- 셀 태그에 속성을 반영시켜 행 또는 열을 합칠 수 있음
colspan ="2" : 2개의 열을 합치기
rowspan ="3" : 3개의 행을 합치기
-->
<h3> 이력서 </h3>
<table border="1">
<tr>
<td colspan="2" rowspan="2" width="130" height ="130">사진</td>
<td width="80">이름</td>
<td width="200"></tdw>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan ="3"></td>
</tr>
<tr>
<td height="130">자기소개</td>
<td colspan ="3"></td>
</tr>
</table>
<h1> 테이블 내에 영역잡기
<table border="1">
<thead>
<tr>
<td>이름</td>
<td>나이</td>
<td>주소</td>
</tr>
</thead>
<tbody style="background-color: pink;">
<tr>
<td>김개떵</td>
<td>20</td>
<td>서울시 관악구</td>
</tr>
<tr>
<td>빅밀슨</td>
<td>10</td>
<td>경기도 남양주</td>
</tr>
<tr>
<td>박개똥</td>
<td>50</td>
<td>서울시 동작구</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan ="2">총 인원</th>
<td>3명</td>
</tr>
</tfoot>
</table>
</h1>
</body>
</html>
Author And Source
이 문제에 관하여(2/26(금) FrontEnd/HTML5(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsrnr45/226금-FrontEndHTML51저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
