HTML이란 ?
- Hyper Text Markup Language의 줄임말로, 하이퍼텍스트를 마크업하는 언어이다.
- 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해서 다른 문서나 사이트로 즉시 이동할 수 있는 기능
- 마크업 언어 : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어
* 컴퓨터에서 사용하는 파일에는 각각 고유한 형식이 존재하는데 웹사이트에서 사용할 파일의 형식은 *.html 확장자로 구성된 HTML 문서
HTML5 와 CSS3 학습 이유
- 최신 웹 표준에 맞는 웹사이트 제작 가능
(PC, 스마트폰, 태블릿 외 IOT 기기에 맞는 웹 표준이 HTML5이며, CSS3로 다양한 레이아웃 제작 가능)
- 앱 및 웹 화면 디자인의 기초
(Java나 C 같은 고급 언어를 사용하지 않아도 쉽게 웹 페이지 구성 가능, 스마트폰 앱 화면은 HTML5와 CSS3로 구성)
- 인터랙티브한 사이트 제작 가능
(과거에는 Active X 등 플러그인을 사용했지만 이젠 HTML5, CSS3으로 플러그인 없이 인터랙티브한 사이트 제작 가능)
* 동영상을 플레이하는 웹 사이트 태그로 간단하게 구현이 가능하다.
* 앞으로 배울 HTML, CSS, Javascript, JQuary, Bootstrap 이 5가지는 Visual Studio Code로 진행할 예정
HTML5 태그
- <>로 표시하며 항상 소문자로 작성해야하고, 대부분 여는 태그와 닫는 태그가 쌍으로 존재한다.
- Tap키로 들여쓰기 기능을 이용할 수 있고 항상 속성과 함께 사용한다.
- 태그안에 태그를 쓰는 것이 가능하며 이때에는 포함관계를 명확히 명시해준다.
HTML 기본 구조
- 문서의 시작과 끝 : <!doctype>, <html>, <head>, <body> 네가지 태그를 이용
- 문서 유형 : <!doctype html>은 HTML5 언어로 작성된 웹문서 라는 의미
- 웹 문서의 시작과 끝 : <html> ( <html lang="ko">처럼 문서에서 사용할 언어를 지정해줌 )
- 브라우저에게 정보 주기 : <head>
- 문서 제목 표시 : <title>
- 문자 인코딩이나 요약정보 : <meta> (예시. <meta charset="utf8" name="description" content="간단한 설명"> )
- 실제 브라우저에 표시 : <body>
- 제목 표시 : <h1> (비교. <title>은 웹 문서 제목)
- 텍스트 단락 표시 : <p>
- 줄 바꿈 태그 : <br>
HTML 예시
<!DOCTYPE html><!--웹문서유형 설정-->
<html lang="ko"><!--시각장애인한테 읽어줄 언어이므로 한국어로 설정-->
<head><!--브라우저에게 정보를 주는 태그-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--자세히 설정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title><!--웹페이지 상단의 제목 설정-->
</head>
<body>
<!--zencoding 태그 포함 관계 : >, 동일레벨 : + -->
<!--h1+p+img-->
<!--h1+(p>img)+img-->
<!--제목 태그 h1~h6 사용가능 h1이 가장 큰 글씨, h6가 가장 작은 글씨 -->
<h1>시간이란...</h1>
<!--<h6>시간이란...</h6>-->
<!--p는 단락 표시 태그-->
<p>내일 죽을 것처럼 오늘을 살고 <br><!--줄바꿈태그-->
영원히 살 것처럼 내일을 꿈꾸어라</p>
<!--기본적으로는 한 줄로 표시되지만, 창 크기가 작아지면 두, 세줄로 변경됨-->
<!--공백기호는 특수기호로 입력해주어야함 그냥 띄어쓰기는 아무리 많이 해도 한 개로 인식-->
<p>안 녕</p>
<!--이미지 편집 태그-->
<img src="images/first.jpg" alt="">
<h1></h1>
<p><img src="" alt=""></p>
<img src="" alt="">
</body>
</html>
웹 문서에서의 특수 기호 사용
- 한글 자음 입력 후 한자키를 이용해서 특수문자 입력
- 공백이나 괄호를 화면에 표시하려고 할 때 특수기호 사용
- Space Bar 를 여러 번 입력해도 공백 한 칸으로 인식하므로 특수기호를 사용하여 공백 추가
- < 혹은 >는 태그로 인식하기 떄문에 특수 기호로 입력해야한다.
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 02-3 목록을 만드는 태그 (0) | 2021.09.05 |
|---|---|
| [HTML] 02-2 텍스트를 한 줄로 표시하는 태그 (0) | 2021.09.05 |
| [HTML] 02-1 텍스트를 덩어리로 묶어주는 태그 (0) | 2021.09.05 |
| [HTML] 01-1 웹 개발 기본 (0) | 2021.08.30 |
| [Visual Studio Code] 비주얼 스튜디오 코드 설치 (0) | 2021.08.30 |
댓글