티스토리 뷰
HTML
- html을 잘 알아볼려면 무슨 사이트 참조? Mozilla 사이트 참조
- HTML(HyperText Markup Language)
HTML 문서 기본 태그
<!DOCTYPE html> ~ </html>
- 현재 문서가 HTML5 언어로 작성된 웹 문서
<html> ~ </html>
- 웹 문서의 시작과 끝을 나타내는 태그
<meta charset = "utf-8">
- character set은 utf-8 사용, 현존하는 언어를 지원해줌
<meta name = "viewport" content = "width=device_width">
- 전체 화면들을 보여주는 것
<head> ~ </head>
- 웹 브라우저가 웹 문서를 해석하기 위해 필요한정보들을 입력하는 부분
- 실제 문서 내용이 아니기 때문에, 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않음
- 스타일 및 스크립트 등이 포함됨
<body> ~ </body>
- 실제로 웹 브라우저 화면에 나타날 내용 = 사용자에게 보여지는 태그들을 의미
- 대부분의 코드는 HTML 태그들은 <body> 태그안에 들어감
HTML Element Reference
HTML Error 판독해주는 사이트
- url or file upload , direct로 input하여 판명할 수 도 있음
Document and website structure
- 웹사이트를 만들때 어떤식으로 만들어야 할지 나타내는 것
- 웹사이트에는 header / nav / aside / main / footer을 크게 나누어서 만듦
- html에서 추천하는 방법 section tag를 사용해서 하는 것이 좋음
header - 머리말을 나타내는 요소
nav - 메뉴 부분을 나타내는 요소
article - 개별 콘텐츠를 나타내는 요소
section - 제목별로 나눌 수 있는 요소
aside - 좌우측의 사이드바를 나타내는 요소
footer - 제작자의 정보나 저작권의 정보를 나타내는 요소
Box & Item
| Box | Item |
| - header - footer - nav - aside - main - section - article - div - span - form |
- a - button - input - label - img - video - audio - map - canvas - table |
Block과 Inline의 차이
- Inline 태그는 공간이 허용되면 다른 태그가 됨
Tag & Element
- <p></p> => Tag
- My Cat is very grumpy => Content
- <p> My Cat is very Grumpy </p> => Element
<p> My Cat is very grumpy </p>
Attributes
<p class = "editor-note"> My Cat is very grumpy </p>
Tag 종류
(1) h1 / button
<!--Box vs Item -->
<header> </header>
<footer> </footer>
<section> </section>
<div> </div>
<span> </span>
<h1>로지의 블로그</h1>
<button> html 버튼입니다. </button> 
(2) a 태그
<!--a -->
<a href = "https://google.com" target = _black>click</a>- Mozilla WebSite에 가면 Target에 관한 tag 정보들을 알 수 있음.. 새로운 창에 열것인가? 등등
- 하이퍼링크를 걸어주는 태그
(3) Block vs Inline
- block? 한줄을 점유하고, 다음 태그는 무조건 줄바꿈 적용. 대표적 tag) <div></div>
- inline? text 크기만큼 공간을 점유하고 줄바꿈을 하지 않음. 대표적 tag) <b></b> , <span></span>
- inline-block? inline 속성의 특징과 block 속성 특징 , 기본적인 특징은 inline 속성과 비슷한데 inline에서 할 수 없었던 width/height 변경 및 line-height를 custom 적용할 수 있음
- <p> </p> -> 문단을 정의할 때 사용
<p> This is a sentence. <b>That</b> is ..</p>
<p> This is a sentence. <span>That</span> is ..</p>
<p> This is a sentence. <div> That</div> is ..</p>
(4) <ol> <ul>
| 태그 | 설명 |
| <ul> <li> 내용 </li> <li> 내용 </li> </ul> |
순서없는 목록 만들기 |
| <ol> <li> 내용 </li> <li> 내용 </li> </ol> |
순서있는 목록 만들기 |
- ol>li*3 -> Tab키? 자동생성
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<br>
<ul>
<li>안녕하세요</li>
<li>감사합니다</li>
<li>또 만나요</li>
</ul> 
(5) Input
- 공식문서
- developer.mozilla.org/en-US/docs/Web/HTML/Element/input
- label이나 input은 Inline Element 둘 다 한줄에 동시에 표기
- id에 고유한 id를 설정해줌
- label의 for과 input의 id를 똑같이 해줌
<1> type = "text"
<!-- Input -->
<label for = "input_name">Name : </label>
<input id = "input_name" type = "text">
<2> type = "file"
<!-- Input -->
<label for = "input_name">Name : </label>
<input id = "input_name" type = "file"> 
<3> type = "password"
<!-- Input -->
<label for = "inputName">Password : </label>
<input id = "inputName" type = "password"> 
<4> type = "radio"
example1 -> 일반 javascript
example2 -> jsx를 사용하는 React
(6) span
- 내용이 있어야지 표기가 됨
- <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰임
- display 속성이 block이 아닌, inline이라는 점
(7) i
- icon Tag
(8) Table
테이블 구성 요소
- <table> : 테이블을 만드는 태그
- <th> : 테이블의 헤더 부분을 만드는 태그
- <tr> : 테이블의 행을 만드는 태그
- <td> : 테이블의 열을 만드는 태그
<1> 테이블 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Js Bin</title>
</head>
<body>
<label>
<span>예제 입니다.</span> <i> 예제 </i>
</label>
<div>
<table>
<colgroup>
<col width = "30%"/>
<col width = "70%"/>
</colgroup>
<tbody>
<tr>
<th> 제품명 </th>
<td> <input type = "text" "file" placeholder = "입력하세요" /> </td>
</tr>
<tr>
<th> 파일 선택</th>
<td> <input type =file /> </td>
</tr>
<tr>
<th> Button </th>
<td> <button type = "button"/> 버튼입니다</td>
</tr>
<tr>
<th> Text Area</th>
<td> <textarea type = "text"/> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<2> 테이블 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Js Bin</title>
</head>
<body>
<div>
<table>
<colgroup>
<col width = "20%"/>
<col width = "10%"/>
<col width = "10%"/>
<col width = "25%"/>
<col width = "25%"/>
</colgroup>
<tbody>
<tr>
<th> A (숫자 양수만 입력가능) </th>
<td> <input type = "checkbox" /> </td>
<td> <input type = "number" min="0" max="99999" /> </td>
<td> </td>
</tr>
<tr>
<th rowsspan ="3" align = "center"> B </th>
<td> <input type = "checkbox" /> </td>
<td> <input type = "number" /> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 예제 1 </td>
<td> <input type = "checkbox" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 예제 2 </td>
<td> <input type = "checkbox" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 예제 3 </td>
<td> <input type = "checkbox" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> 예제 4 </td>
<td> <input type = "checkbox" /></td>
<td> <span>글자를 사용합니다 </span> </td>
</tr>
<tr>
<th> C (숫자 text를 사용하여) </th>
<td> <input type = "checkbox" /> </td>
<td> <input type = "text" pattern = "[0-9]+" /> </td>
<td> </td>
</tr>
<tr>
<th> D (글자 수 제한) </th>
<td> <input type = "checkbox" /> </td>
<td> <input type = "text" maxlength="5"/> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
텍스트 관련 링크
| 태그 | 설명 | 예시 |
| <hn> ~ </hn> | 제목 텍스트 heading, <h1> , ... , <h6> Heading을 나타내줌 |
|
| <p> ~ </p> | 텍스트를 표시할 떄 사용 paragraph | |
| <br> | break 줄바꾸기 | |
| <hr> | horizontal 수평줄 삽입 | |
| <pre> | preformat 입력하는 그대로 화면에 표시하기 |
|
| <blockquote> ~ </blockquote> | 인용넣기 | |
| <strong> ~</strong> | ||
| <b> ~ </b> | ||
| <em> ~ </em> | ||
| <i> ~ </i> | ||
| <q> ~ </q> | ||
| <mark> ~ </mark> |
이미지관련 링크
폼관련 링크
Form요소란?
1. 시맨틱 태그란?
2. 시맨틱 태그로 레이아웃을 만들어야 하는 이유
3. 시맨틱 태그 종류
4. HTML 시맨틱 태그로 웹 표준에 맞는 문서 만들기
<출처>
1. 엘리 드림 코딩
'Programming > HTML+css' 카테고리의 다른 글
| [css/React] 기본 코드와 응용 (1) | 2022.06.23 |
|---|