텍스트 관련 요소
요소는 여러 종류가 있어요! 이번 포스팅에서는 텍스트에 관련된 요소들이 각각 무슨 역할을 하는지 공부해보도록 하겠습니다.
요소 사용 시 주의할 것!
텍스트 서식에 사용되는 요소들은 대부분 텍스트 효과를 가지고 있습니다. 글자 크기가 커지기도 하고, 기울여지기도 하며, 두꺼워지기도 하죠.🤔 그렇다보니 단순히 이 스타일을 적용하기 위해 해당 요소들을 사용하는 경우가 많습니다.
⚠️
하지만 이 요소들은 각각의 용도를 가지고 있기 때문에 용도에 맞게 사용하고, 스타일은 CSS를 통해 적용해야 합니다.
h1
heading을 뜻하는 h1요소는 제목에 사용되는 요소입니다.
그렇다보니 이 요소는 텍스트는 크기가 달라지고 두꺼워지는 효과를 가지고 있습니다.👍
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>제목1
제목2
제목3
제목4
제목5
제목6
첫째인 h1부터 막내 h6까지 있는 h요소는 단계별로 사용하도록 해야합니다. 특히 h1요소는 HTML 문서 자체의 제목을 나타내는 용도로 사용해야 합니다.
당연하게도 문서당 1개만 존재해야 하겠죠?
a
anchor를 뜻하는 a요소는 특정 페이지로 이동할 수 있도록 연결하거나 페이지의 특정 위치로 이동, 혹은 메일, 파일, 연락처 등과 연결할 수 있는 하이퍼링크를 만들 때 사용되는 요소입니다.
사용자들이 어디로 이동하는지 알 수 있도록 콘텐츠에 목적에 대한 설명을 작성하여 사용하여야 합니다.
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
<a href="mailto:이메일@email.com">이메일 보내기</a>a요소는 여러 attribute를 가지고 있습니다. 이 속성들은 a요소의 기능을 좀 더 다양하게 사용할 수 있도록 도와주는 역할을 하죠. 예를 들면 target속성은 현재 창에서 링크를 열 것인지, 아니면 새로운 탭에서 링크를 열 것인지 등을 정할 수 있도록 해줍니다.
이 속성들은 다음에 따로 다루어보도록 하겠습니다.
a요소는 콘텐츠의 폰트를 파란 글씨와 밑줄로 표현하며, 방문한 적이 있는 링크는 폰트가 보라색으로 변경됩니다.
p
paragraph를 뜻하는 p요소는 HTML 문서 내에 하나의 문단을 만들 때 사용합니다.
<p>안녕하세요! 만나서 반갑습니다</p>
<p>
p요소는 정말 많이 쓰이는
요소 중 하나입니다.
</p>안녕하세요! 만나서 반갑습니다.
p요소는 정말 많이 쓰이는 요소 중 하나입니다.
어 이상하네요!🤔 분명 줄 바꿈을 입력했는데, 개행이 이루어지지 않고 한 줄로 보여져요!
HTML은 기본적으로 브라우저에 내용을 표시할 때 줄바꿈을 적용하지 않습니다. 그렇기 때문에 줄바꿈을 위해서는 다음에 나올 br요소나 pre요소등의 도움을 받아야 합니다.
br
break를 뜻하는 br요소는 줄 바꿈(개행)을 위해 사용합니다.
<p>
br요소를 사용해서<br>
줄 바꿈을 할 수 있어요!
</p>br요소를 사용해서
줄 바꿈을 할 수 있어요!
pre
preformatting을 뜻하는 pre요소는 작성자가 작성한 모습 그대로 브라우저에 표현해주고 싶을 때 사용하며, 개행, 공백 등 일반적으로 HTML 문서에서 표현되지 않는 것들을 표현할 수 있도록 해줍니다.
<p>
＼ /
＼/
/＼
/ ＼
</p>＼ / ＼/ /＼ / ＼
이처럼 공백, 개행이 전부 무시되지만 pre요소를 사용한다면?
<pre>
＼ /
＼/
/＼
/ ＼
</pre>＼ / ＼/ /＼ / ＼
공백과 개행이 잘 적용되는 것을 확인할 수 있습니다!👍
다만 HTML문서를 작성하다보면 들여쓰기를 필수적으로 하게되는데 pre요소는 들여쓰기를 위한 공백까지 전부 표현이 되기 때문에 들여쓰기를 사용할 수 없어서 가독성에 문제가 생기기도 합니다.
code
code요소는 한 줄 정도의 짧은 코드 조각을 표현할 때 사용합니다.
<code>console.log</code>
console.log()
여러줄의 코드를 표현하고 싶다면 pre요소를 사용하면 됩니다.
조금 불편하긴 하지만 아래처럼 사용하면 여러줄의 코드도 표현할 수 있습니다.😂
<pre><code>let name = 'ungHeung';
console.log('name');
</code></pre>let name = 'ungHeung'; console.log('name');
strong
strong 요소는 매우 중요한 사항을 포함하는 콘텐츠를 넣을 때 사용합니다.
중요한 내용임을 나타내기 위해 폰트가 두껍게 표현됩니다.
<p><strong>주의!</strong> 클릭시 해당 페이지로 이동합니다.</p>주의! 클릭시 해당 페이지로 이동합니다.
b
bold를 뜻하는 b요소는 주의을 집중시키기 위해 사용합니다.
<p>저는 <b>관심</b>이 필요합니다.</p>저는 관심이 필요합니다.
원래 b요소는 bold라는 이름에서 알 수 있듯이 단순히 폰트를 두껍게 표시해주는 요소였지만 용도가 변경되어 더이상 해당 목적으로 사용하지 않게 되었습니다.☠️
em
emphasized text를 뜻하는 em요소는 콘텐츠를 강조하고 싶을 때 사용합니다.
강조되는 효과를 주기위해 폰트가 기울임꼴로 표시됩니다.
<p>이 부분을 <em>강조</em>하고 싶습니다!</p>이 부분을 강조하고 싶습니다!
i
italic을 뜻하는 i요소는 어떠한 이유로 인해 콘텐츠를 구분해야할 때 사용합니다. 주로 용어, 구절, 생각 등과 같은 텍스트에 사용하며, em요소와 마찬가지로 폰트를 기울임꼴로 표시해줍니다.
<p>웹 사이트를 꾸미기위해 필요한 스킬 : <i>HTML, CSS, JavaScript</i></p>웹 사이트를 꾸미기위해 필요한 스킬 : HTML, CSS, JavaScript
i요소도 b요소처럼 기울임체 표현을 위해 만들어졌지만 변경된 후로는 더이상 해당 목적으로 사용하지 않습니다.☠️
strong, b, em, i
strong요소와 b요소, em요소와 i요소는 각각의 효과가 같기 때문에 혼용하기 쉽지만 엄연히 다른 목적을 가지고 있기 때문에 주의하여서 사용해야 합니다.
b요소는 단순히 텍스트로 주의를 끌기 위한 목적을 가지지만 strong요소는 중요한 혹은 주의해야할 내용을 표시하는 목적을 가집니다. i요소는 텍스트를 구분할 때(용어, 구절 등 구분이 되는 내용을 표시), em요소는 텍스트 자체를 강조할 때 사용합니다.💫
q
short quotation을 뜻하는 q요소는 한 줄 정도의 짧은 인용문을 작성할 때 사용합니다.
콘텐츠를 쌍따옴표로 감싸주는 효과를 가지고 있습니다.
<p>저는 <q>실패는 성공의 어머니이다.</q>라는 말을 좋아합니다.<p>저는 실패는 성공의 어머니이다.라는 말을 좋아합니다.
blockquote
blockquote요소는 여러줄의 인용문을 작성할 때 사용합니다.
이 요소의 콘텐츠들은 들여쓰기가 적용되어 표시됩니다.
<blockquote cite="나자신">
<p>
엄청 긴 인용문을 작성하고 있습니다.
</p>
<p>
이 인용문의 출처는 어디일까요?
</p>
</blockquote>
엄청 긴 인용문을 작성하고 있습니다.
이 인용문의 출처는 어디일까요?
q, blockquote요소는 출처를 넣을 수 있는 cite속성을 가지고 있습니다.
<p>이 웹툰은 <q cite="네이버">네이버</q>에서 연재하고 있습니다.</p>이 웹툰은 네이버에서 연재하고 있습니다.
cite
저작물의 출처를 표기할 때 사용합니다. q, blockquote의 속성 cite와 다르게 cite요소는 출처를 확인할 수 있도록 표시해줍니다.
<blockquote>
<p>
엄청 긴 인용문을 작성했습니다.
</p>
<cite>
<a href="https://velog.io/@beehive2838">ungHeung</a> by velog
</cite>
</blockquote>엄청 긴 인용문을 작성했습니다.
ungHeung by velog
address
address요소는 가까운 HTML요소에 대한 연락처 정보를 나타낼 때 사용합니다.
<p>문의사항은 아래 메일로 부탁합니다.</p>
<address>
<a href="mailto:이메일@email.com">이메일@email.com</a>
</address>문의사항은 아래 메일로 부탁합니다.
이메일@email.com연락처 정보 외 주소등을 표현할 수도 있습니다.
반드시 해당 주소 또는 연락처가 가리키는 정보의 이름을 포함해야 합니다.
mark
mark요소는 현재 문단에서 중요한 부분을 표시할 때 사용합니다.
형광펜으로 텍스트를 칠한 것 같은 효과를 줍니다.
<p>이부분은 <mark>시험에 나오는 부분</mark>이다.</p>이부분은 시험에 나오는 부분이다.
abbr
abbreviation을 뜻하는 abbr요소는 약어를 나타낼 때 사용하며, title 속성을 사용해 콘텐츠의 설명을 표시할 수 있습니다.
이 속성이 들어간 abbr요소의 콘텐츠는 점자로 된 밑줄이 표시되고, 마우스오버 시 속성의 값이 표시됩니다.👍
<p>
<abbr>CSS</abbr>(Cascading Style Sheets)로
<abbr title="Hypertext Markup Language">HTML</abbr>
문서를 꾸며줄 수 있습니다.
</p>CSS(Cascading Style Sheets)로 HTML문서를 꾸며줄 수 있습니다.
dfn
definition을 뜻하는 dfn요소는 용어를 정의할 때 사용합니다.
폰트를 기울임체로 표시해줍니다.
<p><dfn>ungHeung</dfn>은 어흥을 귀엽게 표현한 것입니다.</p>ungHeung은 어흥을 귀엽게 표현한 것입니다.
새로운 용어나 전문 용어등을 정의할 때 사용되며, 여러번 사용되는 용어의 경우 처음 한 번만 정의합니다.
sup
superscript를 뜻하는 sup요소는 위첨자를 표시할 때 사용하며, 주로 거듭제곱, 서수 등을 표시할 때 사용합니다.
<p>1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup></p>
<p>2의 제곱 = 2<sup>2</sup> = 4 입니다.</p>1st, 2nd, 3rd
2의 제곱 = 22 = 4 입니다.
sub
subscript를 뜻하는 sub요소는 아래첨자를 표시할 때 사용하며, 주로 각주, 변수, 화학식 등을 표현할 때 사용합니다.
<p>ungHeung<sub>1</sub>은 "엉흥"이라고 읽습니다.</p>
<p>x<sub>1</sub>, x<sub>2</sub>, ... , x<sub>n</sub></p>
<p>H<sub>2</sub>O</p>
<p>1 : 어흥을 귀엽게 표현 ...</p>ungHeung1은 "엉흥"이라고 읽습니다.
x1, x2, ... , xn
H2O
1 : 어흥을 귀엽게 표현 ...
kbd
keyboard를 뜻하는 kbd요소는 키보드를 표시할 때 사용하며, 어떤 키를 누를지 안내하는 등의 용도로 사용합니다.
브라우저의 기본 폰트 중 고정폭을 가진 폰트로 표시됩니다.
<p><kbd>ctrl</kbd> + <kbd>c</kbd>로 복사하기!</p>ctrl + N 으로 새 글 작성하기!
samp
sample을 뜻하는 samp요소는 출력 예시 등을 표시할 때 사용합니다.
브라우저의 기본 폰트 중 고정폭을 가진 폰트로 표시됩니다.
<p><code>console.log('hi ungHeung');</code></p>
<p>출력 예시 : <samp>hi ungHeung</samp></p>
console.log('hi ungHeung');출력 예시 : hi ungHeung
이상으로 텍스트에 관련된 요소들을 살펴보았습니다.
금방 끝낼 줄 알았는데, 반나절이 걸렸네요.😂
정말 많은 요소들이 있고, 정말 다 사용할까? 하는 의문이 들기도 하지만 접근성을 위한 semantic한 문서를 작성하기 위해서는 꼭 알고 넘어가야하는 내용들인 것은 분명해 보입니다.
특히 몇몇 요소들은 CSS로 적용해야 하는 스타일을 요소를 넣는 것만으로도 적용시킬 수 있다는 점 때문에 무분별하게 사용하게 될 뻔했다는 것을 알게된 것만으로도 많은 것을 얻었다고 생각합니다.👍
이제 다음 주제는 무엇으로할지 고민해봐야겠네요. 화이팅! 💪
