HTML5
공부한 곳
- TCPSCHOOL.com
공부 내용
HTML5 기본 요소
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<h1>제목 크기1</h1>
<h2>제목 크기2</h2>
<p>단락</p>
</BODY>
</HTML>
|
<HTML> : HTML 문서의 Root 요소를 정의
<HEAD> : HTML 문서의 메타데이터를 정의
ex) <title>, <meta>, <script>
<BODY> : HTML Content 부분
HTML 요소 구조
<p class = "hello">Hellow World!</p>1. 태그이름 : p
2. 속성명 : class
3. 속성값 : hello (항상 소문자로 작성)
4. 내용
HTML 각종 태그
화면 요소
<h1~6> : 제목 태그, 다양한 크기로 제목 표현
<p> : 단락, 문단
White Space 표현하려면 <br> 태그 등이 필요
<hr> 수평 가로 구분선
서식 : Text에 다양한 효과를 주는 태그
<strong> : bold 효과
<em> : 기울임
<mark> : 형광펜
<del> : 가운데 가로줄
<ins> : 밑에 가로줄
주석 : <!-- 내용 -->
HTML 예약어
| | 공백 |
| < | < |
| > | > |
| & | & |
| " | " |
HTML 문자셋
HTML 문서가 어떤 문자셋으로 저장되어있는지 나타내는 메타데이터
<HEAD> 태그 내에서 작성
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
HTML 스타일
HTML 요소를 CSS 스타일에 매칭시켜서 스타일을 적용할 수 있다.
<태그이름 style="속성이름:속성값:>
<h1 style="background-color:white">배경색</h1>
<h1 style="color:maroon">글자색</h1>
<h1 style="font-size:250%">글자 크기 변경</h1>
<h1 style="text-align:center">문단 정렬</h1>
HTML 리스트
- 순서가 없는 리스트 unordered list
- 순서가 있는 리스트 ordered list
- 정의 리스트 definition list
순서가 없는 리스트
<ul> 태그로 시작, 포함되는 리스트 요소는 <li>태그
표현 되는 모습
- ㅎㅇㅎㅇ
- ㅎㅇ
<ul>
<li>ㅎㅇㅎㅇ</li>
<li>ㅎㅇ</li>
</ul>
순서가 있는 리스트
<ol> 태그로 시작, 포함되는 리스트 요소는 <li>태그
표현되는 모습
- ㅎㅇㅎㅇ
- ㅎㅇ
<ol>
<li>ㅎㅇㅎㅇ</li>
<li>ㅎㅇ</li>
</ol>
HTML 테이블
<table style="width:100%">
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
</tr>
</table>
| 참치 | 고래 |
| 상어 | 문어 |
| 오징어 | 고등어 |
'# FE > HTML5, CSS3' 카테고리의 다른 글
| [CSS3] margin 속성 한 번에 기재할 때 순서 (0) | 2020.04.13 |
|---|---|
| CSS 선택자 (0) | 2020.04.08 |
| CSS 기본 속성 (0) | 2020.04.01 |
| ID, Class, Name 속성 비교하기 (0) | 2020.03.26 |
| CSS3 기초 내용 정리 (0) | 2020.03.24 |
| HTML5 30분 기초 완성 2편 (0) | 2020.03.24 |
| Visual Studio Code Extension (플러그인) (0) | 2020.03.09 |