📓 제목 (Headline)
제목 (표제) 요소를 나타내는 tag
<h1>제일 큰 제목</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제일 작은 제목</h6>제일 큰 제목
제목2
제목3
제목4
제목5
제일 작은 제목
📓 문단 (Paragraph)
문단 요소를 나타내는 tag
하나의 문단을 표현, 문단과 문단 사이에는 공백이 있다.
<p>문단을 표시하는 태그.</p>
<p>문단과 문단 사이에는 공백이 있다.</p>문단을 표시하는 태그.
문단과 문단 사이에는 공백이 있다.
📓 줄바꿈
br 요소는 닫는 태그(Closing tag)가 포함되지 않는 '단일 태그(Single tag)'이다.
<br> 줄바꿈을 하고싶다면 <br /> 줄바꿈 태그를 사용하세요.
줄바꿈을 하고싶다면
줄바꿈 태그를 사용하세요.
-
일반적으로 Enter는 '줄바꿈'을 의미하는 입력이지만, HTML 코드에서는 이를 무시한다.
Spacebar를 통한 공백도 한 번밖에 인정되지 않는다.
공백을 두 번 이상 표시하고자 할 때 밑에 있는 예제들을 사용한다. 는 Spacebar 역할을 한다.   는 Spacebar 2번 역할을 한다.   는 Spacebar 3번 역할을 한다.
📓 줄바꿈없이 영역 묶기
자체적으로는 의미가 없지만, 단락 안에서 일부 텍스트만 묶어서 스타일을 적용할 때 사용.
<p>텍스트의 <span style="background-color:blue;">일부만</span> 스타일을 적용할거야!</p>텍스트의 일부만 스타일을 적용할거야!
📓 Code를 그대로 화면에 표시
소스 코드 편집기 (source code editor)에 입력하는 그대로 브라우저 화면에 표시하고 싶을 때 사용하는 tag, 내용뿐만 아니라 공백, 줄바꿈까지 출력된다.
<pre>
pre 태그는 있는 그대로 모습을 출력해준다.
코드 안 글씨체 그대로 출력되네? 너무 신기해!
<p>pre태그 안에 p태그를 넣으면</p>
<p>pre태그 안에서 문단을 나눠준다.</p>
</pre> pre 태그는 있는 그대로 모습을 출력해준다.
코드 안 글씨체 그대로 출력되네? 너무 신기해!
pre태그 안에 p태그를 넣으면
pre태그 안에서 문단을 나눠준다.
📓 수평선
주제 변경 또는 내용 구분을 위해 사용하는 tag, 단일 태그이다.
<hr> <!-- 주제 변경을 나타낸다 -->
<hr /> <!-- 주제 변경을 나타낸다 --><p>
오늘은 날씨가 좋아. <br>
<hr> <!-- 날짜가 다른 일기를 구분하기 위한 수평선 삽입 -->
어제보단 날씨가 흐리네?
</p>
오늘은 날씨가 좋아.
어제보단 날씨가 흐리네?
📓 굵은 글씨
글씨를 굵게 표시할 수 있는 tag
<strong>웹사이트에서 bold체로 표시함과 동시에 중요한 내용임을 알려준다</strong>
<b>시각적으로만 bold체</b>웹사이트에서 bold체로 표시함과 동시에 중요한 내용임을 알려준다
시각적으로만 bold체
📓 기울어진 글씨
이탤릭체로 표시할 수 있는 tag
<em>중요한 부분 강조하기</em>
<i>시각적으로만 이탤릭체</i>중요한 부분 강조하기
시각적으로만 이탤릭체
📓 취소선
취소선을 그어주는 tag, 이제는 관계없어졌거나 정확하지 않은 텍스트임을 강조하기 위해 사용.
<p>
이 부분만 <s>지워주세요!!!</s>
</p>이 부분만 지워주세요!!!
- 문서에서 제거된 텍스트의 범위를 나타내주는 tag, 삭제 된 텍스트 즉, 이미 없어진 텍스트를 정의해준다.
<del>s태그와 del태그 효과는 같다</del>s태그와 del태그 효과는 같다
📓 밑줄
글씨에 밑줄을 그어주는 tag
<u>밑줄 그어주기</u>밑줄 그어주기
📓 인용문
인용문 넣는 tag, 다른 블로그나 사이트 글을 인용.
브라우저에는 들여쓰기로 표시된다.
<blockquote>인용 내용</blockquote>인용 내용 (Block level)
해당 tag는 큰따옴표를 이용해 표시된다.
<q>인용 내용</q>인용 내용 (Inline level)
📓 Block 요소, Inline 요소
HTML의 태그는 크게
Block level element(블럭 요소)와
Inline level element(인라인 요소)로 나누어진다.
* block level 은 하나의 라인을 무조건 차지한다.
블럭 요소 뒤에 오는 태그는 다음 줄로 넘어가게 되면서 줄바꿈이된다.
* inline level은 tag 안 글자 길이만큼의 영역만 화면에 표시한다.
닫는 태그를 생략할 수 없다.
inline level
1. width, height 속성이 적용 되지 않는다.
2. margin, padding-top, padding-bottom 속성이 적용 되지 않는다.
3. line-height 속성을 원하는 대로 적용하기 힘듭니다.
(<span> 태그에 line-height 속성을 적용하면 해당 span 상자에 적용이 안되고 부모 요소의 크기에만 영향을 미칩니다.)
inline-block
1. inline과 같이 양 옆으로 화면에 나열할 수 있다.
2. width, height 속성을 통해 사이즈 조절이 가능하다.
3. line-height 속성 적용 가능.
block 속성을 가지고 있는 태그인지 inline 속성을 가지고 있는 태그인지
확인하고 싶을 때는 웹 브라우저 안에 개발자 도구를 사용하면 확인할 수 있다.