1. HTML의 개념
- HTML (HyperText Markup Language)
| 웹페이지를 만들기 위해 사용되는 표준 마크업 언어 |
| HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 문장) 기능을 가진 문서를 만드는 언어 웹 페이지는 HTML 문서라고도 불리며 HTML 태그들로 구성 (F12키를 눌러서 확인 가능) |
- 마크업 언어(Markup Language)
| 문서나 데이터 구조를 정의하고 표시하기 위해 사용되는 언어. 태그(Tag)라고 불리는 특정한 구문을 사용하여 문서의 요소를 표시 (프로그래밍X) |
| (ex) 마크다운 |
- HTML의 특징
|
- HTML의 뼈대(스켈레톤)
|
<html> <head> 머리(정보) </head>
<body> 몸통(화면) </body>
</html>
|
- 최초의 웹사이트 (1990년 제작)
| ◾ https://info.cern.ch/ |
- 사용툴: Visual Studio
설치: https://code.visualstudio.com/ |
2. Visual Studio 사용하기
- 에밋(emmet)
 |
| - html, xml, xsl 문서 등을 작성할 때 빠른 코팅을 위해 사용하는 플러그인 - 원래 젠코딩으로 부르다 에밋으로 이름 변경 |
| !(Enter) : html 기본 코드 완성 |
- 익스텐션(Extension)
 |
| HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여 웹페이지를 실시간으로 미리 보기 할 수 있는 확장팩 |
| Alt + L, O 순서대로 누르기 : 바로 반영되는 브라우저가 실행됨 |
 |
| HTML 이나 XML 파일에서 태그를 변경하면 해당 태그의 짝 태그를 자동으로 변경해주는 확장기능 |
3. 특수태그
- 특수태그1 - < >
|
< P > |
 < : < >: > (공백) :   주석 : <!-- 주석을 넣음 --> |
- 특수태그2 - 공백
|
글자1     글자2 |
 |
- 특수태그3 - 줄바꿈
|
글자<br>글자<br>글자<br> |
 |
- 주석
|
<!-- 작성일: 2024-04-03
작성자: 이사라
내용: 문단태그
-->
|
[브라우저 화면]  |
[페이지 소스 화면]  |
4. 블록태그
- 문단태그 <p ~ </p>
|
<body> <p> 문단을 만드는 태그 </p> 글자1
글자2 글자3
</body>
</html>
|
[브라우저 화면]  |
[페이지 소스 화면] 파란색 : 자신의 영역 주황색 : 여백 |
- 제목태그 <h> ~ </h>
|
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
일반문자
|
 |
| 제목태그는 자동으로 검색엔진에서 제목으로 채택할 확률이 높음 |
- 서식태그 <b> ~ </b> , <strong> ~ </strong>
|
<b> b태그 표현 </b> <strong> strong 태그 표현</strong>
|
 |
| 현재 html 버전5: 많은 태그들이 생성되고 사라짐 b태그는 버전 1때부터 있었고 stong 태그는 버전5부터 시작됨 버전1 때는 css가 없었을 시기, 태그자체에 디자인 요소가 들어가 있었음 시간이 지나면서 시각 장애인분들이 쓰게 됨 strong 태그에는 리더기에서 읽어질 때 세게 발음되도록 설정되기 위해 추가됨 약자들도 웹을 읽을 수 있는 웹접근성이 좋아진 것임 |
- 서식태그 <i> ~ </i> , <em> ~ </em>
|
<i>i 태그 표현</i> <em>em 태그 표현</em>
|
 |
- 서식태그 <ins> ~ </ins>
|
<ins>ins 태그 표현</ins> |
 |
- 서식태그 <del> ~ </del>
|
<del>del 태그 표현</del> |
 |
- 서식태그 <sup> ~</sup>
|
<p>sup 태그 표현 x<sup>2</sup>+y<sup>3</sup>=2 <p> |
 |
- 서식태그 <sup> ~</sup>
|
<p>sup 태그로 화학식을 표현 H<sup>2</sup>o</p> |
 |
- 서식태그 <hr>
|
<hr>
|
 |
5. 목록태그
- <ul> ~ </ul>
<li> ~ </li>
|
<ul> <li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
ul>li*3 -> 빠르게 입력하는 방법
|
 |
- <ol> ~ </ol>
<li> ~ </li>
|
<ol> <li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
|
 |
- <dl> ~</dl>
<dt> ~ </dt>
<dd> ~ </dd>
|
<dl> <dt>류정원선생님</dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
|
 |
- 단축키
| 코드 정렬 : 컨트롤 + k + f |
'Web > HTML' 카테고리의 다른 글
| 05. 테이블 태그 (0) | 2024.04.04 |
|---|---|
| 04. 호스팅 서비스, 책갈피 (2) | 2024.04.04 |
| 03. 이미지 태그, 하이퍼링크 (2) | 2024.04.03 |
| 02. HTML 속성 (0) | 2024.04.03 |
| 00. Web (0) | 2024.04.03 |
