요소를 작성할 때 단축 태그를 사용할 수 있다.
표현할 내용이 없을 경우 시작태그 명 뒤에 '/'를 붙인다.
예> <p/>
가능한 태그가 있고 가능하지 않은 태그가 있다.
시작태그는 속성을 포함할 수 있다.
속성은 요소의 다양한 효과를 표현하는 데 사용한다.
하나의 태그는 속성과 내용을 담고 있다.
작성 규칙
1. 태그명은 소문자로 작성하도록 한다.(HTML5 권장)
2. 내용에 연속된 공백이나 줄바꿈은 웹 브라우저에 한 칸의 공백으로 출력된다.
3. 요소의 포함관계(계층관계) 표현을 위해 들여쓰기를 한다.
4. 한 요소는 시작 태그와 종료 태그를 작성하며, 다른 요소의 태그와 중첩되지 않아야 한다.
5. 주석은 <!-- 내용 -->로 작성
<!DOCTYPE html>
<html lang="ko"><!--html은 head와 body로 구성된다.-->
<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>Document</title>
</head>
<body>
<h1>문서<br><br>작성</h1>
<p>본문에 작성하는데 사용하는 p태그</p>
<!--이 문서는 html로 작성되었습니다.-->
<blockquote>
여기는 인용 문자나 내용이 들어갑니다.
</blockquote>
</body>
</html>
html로 작성하는 문서와 화면에 나타나는 문서가 다르다.
즉. 실제 코딩하는 화면과 웹 브라우저에 나오는 화면이 일치하지 않는다.
문자에 대한 고찰
컴퓨터는 모든 문자를 숫자로 인식하고 처리
화면에 나오지는 않지만, 키보드에 있는 것은 모두 문자이다.
'숫자'와 '숫자문자'도 구분해서 생각해야 한다.
화면에 출력된 것은 같으나, 컴퓨터에서는 구분해 주어야 한다.
예 > 010-0000-0000
숫자로서의 0은 인식되지 않는다.
문자로서의 0만 인식가능하다.
주석 <!-- 내용 -->
html은 태그가 없어도 출력이 되기 때문에 안 나올 수 있도록,
주석은 사람을 대상으로 한다.
설명하거나, 기록, 작업자의 이름을 쓰는 경우도 있다.
코드 부분을 일시적으로 사용하지 않게 막는 용도로도 활용한다.
요소의 종류
1. 블록(block)요소 : 브라우저의 가로를 모두 사용하는 요소, 요소 사이에 줄 바꿈이 들어간다.
<hn>, <p>
2. 인라인(inline)요소 : 내용의 가로만 사용하는 요소, 요소 사이에 줄 바꿈이 없다.
<span>, <b>, <img>
텍스트 관련 태그
1. 제목태그 <hn> : n은 1-6까지 숫자를 의미
h는 Heading의 첫 글자, h3 이상은 잘 사용하지 않는다.(h4- h6)
2. 본문태그 <p> : Paragraph의 첫 글자,
화면의 가로를 모두 채워서 사용, 가로 길이보다 내용이 많을 경우 자동 줄 바꿈이 된다.
참고> 단락간의 간격과 줄 간격은 차이가 있다.
3. 인용문태그 <blockquote> : 화면에 들여 쓰기 효과가 적용된다.
다른 사람의 말이나 책의 내용을 인용하는 부분을 표현하기 위한 태그
스크린 리더에서 일반텍스트와 구별된다.
4. 다양한 서식태그(inline 요소)
<!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>서식 태그들</title>
</head>
<body>
<h2>다양한 글자 서식 처리</h2>
<p>이 문장에서 <b>여기</b>는
굵은 글씨(볼드체)로 출력됩니다.</p>
<p>이 문장에서 <strong>여기</strong>는 <!--스크린리더에서 강조하는 태그-->
굵은 글씨(볼드체)로 출력됩니다.</p>
<p>이 문장에서 <i>여기</i>는
이탤릭 글씨로 출력됩니다.</p>
<p>이 문장에서 <em>여기</em>는 <!--스크린리더에서 강조하는 태그-->
이탤릭 글씨로 출력됩니다.</p>
<p>이 문장에서 <mark>여기</mark>는<!--html에서는 mark의 기본적인 색상 바꿀 수 없다.-->
마킹 표시로 출력됩니다.</p>
<p>이 문장에서 <del>여기</del>는
삭제선으로 출력됩니다.</p>
<p>이 문장에서 <ins>여기</ins>는
삽입태그 입니다.</p>
<p>이 문장에서 <sup>여기</sup>는
윗 첨자로 출력됩니다.</p>
<p>이 문장에서 <sub>여기</sub>는
아랫 첨자로 출력됩니다.</p>
<p>이 문장에서 <small>여기</small>는
글자가 작게 보입니다.</p>
<abbr title="Internet of Thing">IoT</abbr>
<!--주로 이미지에 쓰고, 풍선도움말, title은 부연 설명을 넣는다.
abbr은 점선태그-->
<hr><!--가로 분할 선 출력 태그-->
<P>마킹태그 대신에 <span
style="background-color: sandybrown;"
title="배경색 샌디브라운">스타일시트</span>를
사용하여 색 넣기</P>
</body>
</html>
주로 사용하는 태그
<hn> 제목태그
<p> <span> <div>
태그 사용 시 띄어쓰기나 줄 바꿈 시 오류가 발생할 수 있다.
속성 부분이나 >부분에서 줄 바꾸는 것은 괜찮다.
그러나 "나 속성값의 중간을 줄 바꾸면 빨간색 밑줄로 오류가 발생한다.
로엘입숨
더미 텍스트
의미 없는 텍스트, 공간의 크기를 알 수 있다.
Lorem Ipsum - All the facts - Lipsum generator
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec
www.lipsum.com
코딩은 협동하는 것이 대부분이기 때문에
들여 쓰기를 통해 가독성 능력도 키워야 한다.
서식에 사용하는 태그들은
태그로 사용하기 보다는 CSS로 주로 사용하기 때문에
HTML로 작성하는 태그들은 자주 사용하는 것 위주로 알아두면 좋을 것 같다.
'공부기록 > HTTP' 카테고리의 다른 글
| 2월 15일 (2) HTML - 하이퍼 링크 (0) | 2023.02.15 |
|---|---|
| 2월 15일 (1) HTML - 멀티미디어 (0) | 2023.02.15 |
| 2월 14일 (2) HTML - table (0) | 2023.02.14 |
| 2월 14일 (1) HTML - 목록 (0) | 2023.02.14 |
| 2월 13일 (1) HTML - 웹 개발 시작하기 (0) | 2023.02.13 |
