(예전에 올린 Do it! HTML 5+CSS 1강 -2 )
태그란(tag)? 마크업할 때 사용하는 약속된 표기법
1. < >를 이용해 구분
- 이미지 삽입 : <img> 'image'의 약자
- 텍스트 문단 삽입 : <p> 'paragraph'의 약자
2. 소문자로 사용 (권장)
3. 여는 태그, 닫는태그 정확히 입력
ex) <h1>여는태그 ~ </h1>닫는태그 (웹브라우저는 여는 ~닫는까지 태그 적용범위로 인식)
예외) <img> <br>태그는 닫는 태그가 없음
4. 적당히 들여쓰기
- 여러 번 띄어쓰기를 하더라도 한칸의 공백으로 인식 -> Tab을 이용해 소스 들여쓰기 할 것
5. 태그에 여러 기능을 추가하는 속성과 함께 사용 가능
- <태그속성 = "속성 값" 속성 = "속성 값" ...> 형태로 사용 가능
- ex)
<img src="images/first.jpg" width="350" height="290" alt="시계이미지">갈색 부분: 속성, 초록색 부분: 속성값
6. 포함관계를 명확히 함
- 한 태그 안에 다른 태그 포함 가능(여는 태그 와 닫는 태그 쌍을 정확히 맞출 것)
- ex)
<u><i>만약 네가 나를 길들인다면</i></u>
visual code를 이용해서 간단한 HTML 문서 만들기
visual code에는 에밋(emmet)기능이 있다. (emmet : HTML 소스 코드를 빠르게 입력할 수 잇도록 해주는 플러그인 기능)
1. 문서의 1번줄을 클릭한 후 !(느낌표) 입력후 Tab키를 누르면 다음과 같이 코드(HTML 문서 기본구조)가 나타난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><html lang="en"> : 현재 문서가 영어(english)로 작성된다.
-> <html lang="ko"> : 현재 문서가 한글로 작성된다.
<title>Document</title> : 제목을 표시 -> Document 를 원하는 제목으로 수정
2. 웹브라우저에 표시되는 웹 문서의 내용은 <body> </body> 사이에 입력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음만드는 HTML 문서</title>
</head>
<body>
변명 중에서도
가장 어리석고 못난 변명은
"시간이 없어서"라는 변명이다.
</body>
</html>마우스 오른쪽 버튼을 눌러 Open with Live Server을 누르면
이 웹브라우저의 새 창에 뜬다.
3. 텍스트의 어떤 부분은 제목이고 어떤부분은 내용인지 어느 위치에서 줄을 바꿔야 하는지 표시(태그 이용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음만드는 HTML 문서</title>
</head>
<body>
<h1> 변명 </h1>
<p>변명 중에서도<br>
가장 어리석고 못난 변명은<br>
"시간이 없어서"라는 변명이다.</p>
<img src="images/first.jpg">
</body>
</html>Open with Live Server를 선택하면 다음과 같은 창이 뜬다.
문서를 저장한 폴더 안에 <images>라는 폴더를 만들고 "first"라는 이름으로 그림을 저장했고,
<img src="images/first.jpg"> 를 통해 이미지를 불러왔다.
HTML 문서 기본구조
<!DOCTYPE html> <!--현재 문서가 HTML5 언어로 작성된 웹문서-->
<html lang="ko">
<head> <!-- <head>~</head> : 웹 브라우저가 웹문서를 해석하기 위해 필요한 정보들을 입력
문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시 X
스타일 및 스크립트 등이 포함됨 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음만드는 HTML 문서</title>
</head>
<body> <!-- <body>~</body> : 실제로 웹 브라우저 화면에 나타날 내용 -->
<h1> 변명 </h1>
<p>변명 중에서도<br>
가장 어리석고 못난 변명은<br>
"시간이 없어서"라는 변명이다.</p>
<img src="images/first.jpg">
</body>
</html> <!-- <html>~</html> : 웹문서의 시작과 끝 --><!doctype> : 문서 유형(document type)을 지정하는 선언문
<html> 태그 : 웹문서 시작을 알리는 태그
- lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능
<head> 태그 : 브라우저에게 정보를 주는 태그
1. <title> 태그 : 문서 제목
<title> 문서제목 </title>2. <meta> 태그 : 문자 세트를 비롯한 문서 정보
- 문자 세트 지정하기 : 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정
<meta charset="UTF-8">- 모바일 기기 고려하기 : 스마트폰 등의 기기에서 웹문서를 제대로 표시할 수 있도록 함
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 인터넷 익스플로러 브라우저 고려하기 : 인터넷 익스플로러는 최신 웹기술이 사용된 웹문서를 제대로 해석 X
(다음과 같은 meta태그를 사용 -> "현재웹문서를 최신 표준모드로 해석" )
<meta http=equiv="X-UA-Compatible" content="ie-edge">- 검색 엔진 고려하기: 웹사이트의 키워드나 간단한 설명, 제작자 등의 정보 지정
<meta name="keyword" content="html5,웹표준"> <!-- 해당 문서의 키워드 -->
<meta name="description" content="html5를 통해 웹표준 공부하기"> <!-- 해당 문서의 설명 -->
<meta name="author" content="Bosun Kwak"> <!-- 해당 문서의 소유자 또는 제작자 -->
<body>태그 : 실제 브라우저에 표시될 내용
- <h1>태그 : 제목을 표시하는 태그, 다른 텍스트보다 크고 진하게 표시됨
- <p> 태그 : 텍스트 단락 표시
- <br> 태그 : 줄바꿈
키보드에 없는 특수 문자 및 특수 기호 사용하기
- W3C(www.w3c.org)에서 제공하는 엔티티 코드 표 : https://dev.w3.org/html5/html-author/charref
Character Entity Reference Chart
dev.w3.org
마우스 포인터를 올리면 표시되는 것 : 엔티티 이름과 엔티티 코드 (어느것을 사용해도 상관 X)
'HTML+CSS+JS' 카테고리의 다른 글
| [HTML+CSS3] 목록을 만드는 태그 (0) | 2020.05.19 |
|---|---|
| [HTML+CSS3] 텍스트 관련 태그 (0) | 2020.05.19 |
| [HTML+CSS3] 웹문서 만들고 업로드하기 (0) | 2020.05.19 |
| [HTML+CSS3] HTML이란? (0) | 2020.05.15 |
| HTML+CSS3 웹 표준의 정석 (0) | 2020.05.15 |