[WEB] HTML 기초

@mildsalmon·2021-09-26 19:17

1. 기본문법

A. 관용적으로 사용

이 문서는 html이다라는 뜻


<!doctype html>

B. HTML 태그

head 태그와 body 태그를 감싸는 태그


<html> </html>

C. head 태그

head
- 본문(body)을 설명하는 태그를 묶음
```
<head> </head>
```
타이틀
- 웹 페이지의 제목을 사용자에게 명시적으로 알려줌
- 검색엔진은 타이틀 정보를 책 표지처럼 사용한다.
```
<title>WEB1 - html</title>
```
한글이 깨진다면
- meta 태그를 사용한다.
```
<meta charset="utf-8">
```

D. body 태그

태그
- 문법을 설명하는 것.
  - strong은 진하게 표시하는 것을 설명하는 것.
body
- 본문을 묶음
```
<body> </body>
```

a. 기초

강조
```
 
```
언더라인
```
 
```

제목


<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

줄바꿈
문단 바꿈
- 정해져있는 여백만큼만 줄이 바뀜
```
 
```
- CSS
 - 시각적으로 부족한 부분은 css로 채울 수 있기 때문에 의미에 맞는 태그를 사용하는 것이 좋다.
```
 
```
이미지
```
<img src="coding.jpg" width="100%">
```

링크 (anchor)


<a href="http://www.naver.com">Markup</a>

속성 - 새탭으로 열기
```
target="_blank"
```
속성 - 힌트
```
title="naver로 이동"
```

b. 속성

속성 (Attribute)
- 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해서 더 많은 의미를 표현함.
- <img> 태그 안에 있는 width="100%", src="coding.jpg"를 속성이라고 한다.
- 속성의 순서는 상관이 없다.

c. 부모, 자식 태그

ol - li (Ordered List - List Item)


<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol> td

ul - li (Unordered List - List Item)


<ul>
  <li>egoing</li>
  <li>mildsalmon</li>
  <li>414</li>
</ul>

table - tr - td (Table - Table Row - Table Cell)


<table border="1">
  <tr>
    <td>head</td>
    <td>92.1%</td>
  </tr>
  <tr>
      <td>body</td>
      <td>98.9%</td>
  </tr>
  <tr>
    <td>html</td>
    <td>87.2%</td>
  </tr>
</table>

참고 문헌

[1] HTML5 (w3.org). (accessed Sep 26, 2021)

[2] 이고잉. WEB1 - HTML & Internet - 생활코딩 (opentutorials.org). opentutorials. (accessed Sep 26, 2021)

생활코딩

html

web

이 글이 도움이 되었나요?

신고하기