[HTML]태그 종류. 블록 & 인라인 요소

✨ UI/💗 HTML

[HTML]태그 종류. 블록 & 인라인 요소

뉴이 NUEY 2024. 12. 21. 03:10

<body>란에 사용하는 태그들에 대해 알아보겠습니다.

블록요소와 인라인 요소
Block & Inline element

블록 요소	줄 바꿈⭕ 안에 텍스트와 인라인 요소 포함 가능. 안에 블록 요소 포함 가능(일부 불가).
인라인 요소	줄 바꿈 ❌ 안에 텍스트와 인라인 요소 포함 가능. 안에 블록요소 포함 불가❌.

🌟 블록 요소는 말 그대로 🧱으로 묶어주는 역할 을 하는 태그들입니다.
인라인 요소 안에 블록요소가 올 수 없기 때문에 정리를 해두지만 굳이 모두 외울 필요는 없습니다.

블록요소	address	article	aside	audio
	blockquote	canvas	dd	div
	dl	fieldset	figcaption	figuer
	footer	h1	h2	h3
	h4	h5	h6	header
	hgroup	hr	nosciprt	ol
	output	p	pre	section
	table	tfoot	ul	video

인라인 요소	a	abbr	acronym	b
	bdo	br	button	cite
	code	dfn	em	i
	img	input	kbd	label
	map	object	q	samp
	small	script	select	span
	strong	sub	sup	textarea
	tt	var

아래 이어지는 내용은 자주 사용하는 것들 위주로 알아보겠습니다.

<h1> 다양한 크기의 제목 </h1>
크기별로 <h1~5>까지 존재

<p>문단</p>

<br/> : 줄바꿈

✨ 원래 태그는 <tag></tag>이렇게 두개가 필요하지만 몇가지 태그들은 </tag>하나로 적을 수 있습니다.

<a href=" 경로">하이퍼링크명</a>

블로그나 문자에서 자주 보이는 하이퍼링크가 바로 이것입니다.

포스트의 html을 수정해서 아래 하이퍼링크를 만들어봤습니다. 클릭시 문단 부분으로 이동합니다.

문단으로 이동하기

<blockquote cite="출처" title="제목">긴 인용문</blockquote>

cite : 인용문의 출처.
title : 작품의 제목.

<q cite="출처" title="제목">짧은 인용문</q>

✨ 두개 모두 인용문을 적는 것이지만 <blockquote>는 블록요소이고, <q>는 인라인 요소입니다.
또한 같이 놓았을 경우 이런식으로 표현법에 차이가 납니다.

그룹화 grouping
<div> : 블록요소로 묶을 경우.
<span> : 인라인요소로 묶을 경우.

인라인요소를 묶어서 인라인 요소를 만들 때 <span>을 씁니다.
<div>는 css에서 정말 많이 사용됩니다.

전체코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Marry christmas</title>
</head>

<body>
    <p id="marry">marry</p>
    <h1>h1은 문서에 한번만 지정하는 것을 권장합니다.</h1>
    <h2>글자</h2>
    <h3>크기</h3>
    <h4>지정</h4>
    <h5>하는</h5>
    <h6>태그</h6>
    그냥 글자크기
    <br/><br/>
    <address>phone : 010-1111-1111</address>

    <p>하나의 문단</p>
    <br/><!--줄바꿈-->
    <p>방문턱에 부딫혀 발가락골절이라니 얼척이 없었다.</p>
    
    <a href="index.html">index로 이동</a>
    <a href="#marry">marry로 이동</a>
    <br/>
    <br/>

    <p> <b>b : 글자 굵게</b> </p>
    <p> <strong>strong : 글자 굵게, 강조되는 내용</strong> </p>
    <p> <aside>aside : 추가정보용 내용기재</aside> </p>
    <p> <i>i : 텍스트 기울임</i> </p>
    <p> <em>em : 택스트 기울임, 강조</em> </p>
    <p> <small>small: 작은 텍스트 표시, 코멘트 등</small> </p>
    <p>sub : <sub>아래 첨자</sub> </p>
    <p>sup : <sup>윗첨자</p>
    <p> <ins>ins : 글자 아래 밑줄</ins></p>
    <p> <del>del : 글자 중간에 줄감</del></p>
    <p> <cite>cite : 기울어진 제목</cite></p>
    <p> <hr/>hr/ : 한줄 긋기</p>
    <br/><br/>
    <blockquote cite="https://m.blog.naver.com/hsj6649/222043979721" title="Home alone">
        You should take a chance.
        Got nothing to lose.
    </blockquote>
    <br/><br/>
    <p>글사이 <q cite="aaa" title="christmas">짧은 인용문</q>을 적을 경우 q</p>
    <br/><br/>

    <div style="background-color: antiquewhite;">
        <p>태그들 중에서 </p>
        <span style="color: red;"> <p>묶어서 사용할</p> <p> 부분들에</p> </span>
        <p>div 혹은 span을 사용한다.</p>
    </div>

    <br/><br/>

</body>

</html>

저작자표시 비영리 변경금지

'✨ UI > 💗 HTML' 카테고리의 다른 글

[HTML]목록태그 <ul> <ol> <dl> (0)	2024.12.21
[HTML]Entities (&nbsp 공백, &quot 큰 따옴표" 등) (0)	2024.12.21
[HTML]경로 종류와 사용법 (0)	2024.12.21
[HTML]기본 구조, 폴더 위치, 주석 (1)	2024.12.20
[HTML]html이란? (0)	2024.12.16

현재글[HTML]태그 종류. 블록 & 인라인 요소

분류 전체보기 (470)

🍃 Spring (29)

☕ JAVA (114)

🐍 Python (41)

✨ UI (33)

😼 Git (3)

☁ Network (10)

💬 프로그래밍 표현식 (2)

🕸 Algorithm (84)

📜 CleanCode (24)

🛠 도구 (53)

💾 Data Base (1)

[ERROR] (5)

📑 개발 사전 (35)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

Nuey.log

[HTML]태그 종류. 블록 & 인라인 요소

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

티스토리툴바

[HTML]태그 종류. 블록 & 인라인 요소

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

관련글

티스토리툴바