<!DOCTYPE html>
<title>웹사이트 타이틀</title>
<h1>제목1</h1>
<h2>숫자가 커질수록 작아진다</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><!DOCTYPE> 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야한다.
<title> 태그
페이지의 제목/ 브라우저 탭이나 방문 기록에 나와있는 제목임
<h1>~<h6> 태그
한 페이지에 여러 개의 머리말
<p> 태그
보통 문단은 <p>(paragraph) 태그 안에
<p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있다.
<b> 태그
텍스트를 굵게
<i> 태그
텍스트 날려쓰기(italics)
Phrase Tags
<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어준다. 둘 다 '시각적인 특징'만 갖고 있는 태그
HTML에서는 의미도 담고 있는 phrase tag가 있다.
<strong> 태그
<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적
스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽음
<em> 태그
<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적. em은 'emphasized'의 줄임말
텍스트 정렬
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<style>
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
</style>
텍스트 색
<h1>Heading 1</h1>
<style>
h1 {
color: red;
}
여백
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<style>
h1 {
margin-bottom: 50px;
}
h2 {
margin-left: 70px;
}
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 4. Margin, Padding (0) | 2022.05.07 |
|---|---|
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 텍스트 관련 태그 (0) | 2022.04.05 |
| HTML 기본 문서 만들기 (0) | 2022.04.01 |