웹문서에 다양한 내용 입력하기(1)
2022. 8. 10. 18:10ㆍ개인활동/HTML+CSS+JS
반응형
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
텍스트 입력하기
<hn>
- n에는 1부터 6까지의 숫자가 들어감
- 닫는태그 반드시 필요
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
<h1>h1 태그</h1>
<h2>h2 태그</h2>
<h3>h3 태그</h3>ㄴ
</body>
</html>
<p>
- 텍스트 앞뒤로 빈줄이 생기며 텍스트 단락이 만들어짐
- 닫는 태그 반드시 필요
* 편집기에서 줄을 바꾸더라도 웹브라우저에서는 한줄로 표시됨
/* p태그 적용 X */
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
p태그 실습
p태그는 텍스트 단락을 만들 때 이용합니다.
</body>
</html>
/* p태그 이용 */
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
p태그 실습
<p>p태그는 텍스트 단락을 만들 때 이용합니다.</p>
</body>
</html>
<br>
- 줄바꿈 태그
- 단독으로 사용하는 태그로 닫는 태그 필요 없음
* 빈줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시하나 실제로 단락이 만들어진 것이 아님
* CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생기므로 텍스트 단락을 만들 때는 <p>태그를 이용해야 함
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
p태그 실습<br><br>
<p>p태그는 텍스트 단락을 만들 때 이용합니다.</p>
</body>
</html>
<blockquote>
- 웹브라우저가 인용문을 인식할 수 있도록 하는 태그
- 닫는 태그 필수
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
p태그 실습<br>
<blockquote>태그는 텍스트 단락을 만들 때 이용합니다.</blockquote>
</body>
</html>
<strong>, <b>
- <strong> : 굵게 강조할 텍스트, 의미 중심의 태그로 화면 낭독기는 <strong> 태그로 쌓인 글을 강조해 읽어줌
- <b> : 굵게 표시할 텍스트
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
<p>p태그 실습</p>
<blockquote>태그는 텍스트 단락을 만들 때 이용합니다.</blockquote>
<b>볼드</b>
<p><strong>스트롱</strong></p>
</body>
</html>
<em>, <i>
- <em> : 이탤릭체로 강조할 텍스트, 문장 흐름 중 특별히 강조하고 싶은 부분에서 사용
- <i> : 이탤릭체로 표시할 텍스트
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트입력하기</title>
<meta charset="UTF-8">
</head>
<body>
<p>p태그 실습</p>
<blockquote>태그는 텍스트 단락을 만들 때 이용합니다.</blockquote>
<b>볼드</b>
<p><strong>스트롱</strong></p>
문장 속에서 나는 <em>이 부분을</em> 특히나 강조하고 싶어
<p><i>이건 그냥 이탤릭체</i></p>
</body>
</html>
| <abrr> | 줄임말을 표시하고 title 속성을 함께 사용할 수 있음 |
| <cite> | 웹문서나 포스트에서 참고 내용을 표시 |
| <code> | 컴퓨터 인식을 위한 소스코드 |
| <small> | 부가정보처럼 작게 표시해도 되는 택스트 |
| <sub> | 아래첨자 |
| <sup> | 위첨자 |
| <s> | 취소선 |
| <u> | 밑줄 |
| <ins> | 공동 작업 문서에서 새로운 내용 삽입 |
| <del> | 공동 작업 문서에서 기존 내용 삭제 |
반응형
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
|---|---|
| 웹문서에 다양한 내용 입력하기(3) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(2) (0) | 2022.08.11 |
| 시맨틱 태그 (0) | 2022.08.09 |
| 웹개발 시작하기 (0) | 2022.08.03 |