안녕하세요, 여행벌입니다.

오늘은 앞의 두 포스팅에 이어서 텍스트 관련 태그들에 대해서 마저 배워보겠습니다.

<span> 태그 - 줄바꿈 없이 영역 묶기

 <span> 태그는 실제로 개발할 때 자주 사용하는 태그입니다. 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

<abbr> 태그 - 약자 표시

 <abbr> 태그의 title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.

<cite> 태그 - 참고 내용 표시

<cite> 태그를 이용하면 웹 문서나 포스트에서 참고 내용을 표시할 수 있습니다.

<small> 태그 - 부가 정보 표시

 <small> 태그를 이용하면 텍스트를 작게 표시할 수 있습니다. 부가 정보처럼 작게표시해도 되는 텍스트에 주로 사용합니다.

<sub> 태그 - 아래 첨자

<sup> 태그 - 위 첨자

<s> 태그 -  취소선

<u> 태그 - 밑줄

 예시를 통해서 익혀보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>기초문법#4 예제</title>
</head>
<body>
    <p><abbr title="WIKIPEDIA">위키피디아</abbr></p>
    <p>내가 최근에 가장 재미있게 본 영화<cite>시동</cite></p>
    <p>가격은 130,000원 입니다.<small>(부가세별도)</small></p>
    <p>물은 H<sub>2</sub>O</p>
    <p>2차 함수 y = x<sup>2</sup></p>
    <p>가격이 <s>34,000원</s>에서 17,000원으로 변경.</p>
    <p><u>밑줄생성!</u></p>
</body>
</html>

 위키피디아에 마우스를 올려보면 <abbr> 태그에 의해 WIKIPEDIA 라는 툴바가 생성된 것을 볼 수 있습니다. 

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 표를 만드는 <table> <tr> <td> <th> <caption> <figcaption> 태그  (0) 2020.01.20
[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17
[HTML+CSS] HTML 기본 구조  (1) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 텍스트를 한 줄로 표시하는 '인라인 레벨' 태그에 대해서 알아보겠습니다.

<strong>, <b> 태그 - 굵게 표시하기

 텍스트 중에서 굵게 표시하려고 할 때 <strong> 혹은 <b> 태그를 사용합니다. 눈으로 보기에는 차이가 느껴지지 않지만 화면 낭독기에서의 기능 때문에 굵게 표시하는 태그가 두 종류 존재합니다. <b> 태그는 눈으로 보기에는 굵은 글씨로 보이지만 화면 낭독기에서는 굵은 글씨로 읽지 못합니다. <strong> 태그는 눈으로 보기에도 굵고 화면 낭독기에서도 굵은(중요한) 글씨로 인식하기 때문에 주의 사항이나 경고를 나타낼 때는 <strong> 태그를 이용해야 합니다.

<em>, <i> 태그 - 이탤릭체로 표시하기

 텍스트를 비스듬히 이탤릭체로 표시할 때 <em> 혹은 <i> 태그를 사용합니다. 중요한 내용을 담고 있는 것은 <em> 태그를, 단순히 이탤릭체로 표시하고 싶으면 <i> 태그를 사용하면 됩니다.

<q> 태그 - 인용 내용 표시하기

 인용한 내용을 표시하기 위해서는 <q> 태그를 사용할 수 있습니다. 저번 포스팅에서 배운 <blockquote> 태그도 인용한 내용을 표시하기 위해 사용하지만 둘은 '블록 레벨 태그' 와 '인라인 레벨 태그' 로 종류가 다릅니다. <blockquote> 태그는 '블록 레벨 태그'로 쉽게 말하면 태그를 사용하면 줄바꿈이 적용되고 다른 내용과 구별되도록 안으로 들여 써지지만, <q> 태그는 '인라인 레벨 태그'로 태그를 사용해도 줄바꿈이 적용되지 않고 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시합니다.

<mark> 태그 - 형광펜 효과 내기

 <mark> 태그는 선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어놓은 듯한 효과를 냅니다.

 

예시를 통해서 익혀보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>기초문법#3 예제</title>
</head>
<body>
    <p>p태그에 글을 쓴 후 굵게 표시해보겠습니다.</p>
    <p><strong>p태그에 글을 써보았습니다.(strong적용)</strong></p>
    <p><b>p태그에 글을 써보았습니다.(b적용)</b></p>
    <br>
    <p>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.</p>
    <p><em>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.(em적용)</em></p>
    <p><i>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.(i적용)</i></p>
    <br>
    <p>p태그에 글을 쓴 후 mark태그를 적용해보겠습니다.</p>
    <p><mark>p태그에 글을 쓴 후 mark태그를 적용해보겠습니다.(mark)</mark><p>
    <br>
    <blockquote>blockquote태그입니다.</blockquote>
    <q>q태그입니다.</q>
</body>
</html>

 <strong> <b> 태그는 눈으로는 똑같은 효과가 적용된 것을 확인할 수 있습니다. 하지만, 화면 낭독기를 통해 읽을 때에 차이가 존재하므로 중요한 경고나 주의사항은 꼭 strong 태그를 이용해야합니다.

 <em> <i> 태그도 눈으로 보기에는 똑같은 효과가 적용되지만 더 중요한 내용에 <i> 태그 대신에 <em> 태그를 적용해야 합니다.

 <mark> 태그는 형광펜으로 칠한 효과가 적용되는 것을 확인할 수 있습니다.

 <blockquote> <q> 태그는 둘다 인용 내용을 표시하기 위해 사용하지만 태그의 종류와 효과가 다른 것을 확인할 수 있습니다.

 

 <blockquote> <q> 태그가 구체적으로 어떻게 다른지 조금 더 다뤄보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>기초문법#4 예제</title>
</head>
<body>
    <p>blockquote태그적용
        <blockquote>블라블라블라블라블라블라블라블라블라블라블라블라</blockquote>
        blockquote태그완료</p>
    <br>
    <p>q태그적용
        <q>블라블라블라블라블라블라블라블라블라블라블라블라</q>
        q태그적용완료</p>
</body>
</html>

 <blockquote> 태그는 '블록 레벨 태그'라 줄바꿈이 일어난 것을 확인할 수 있고, <q> 태그는 '인라인 레벨 태그'라 줄바꿈이 일어나지 않는 것을 확인할 수 있습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17
[HTML+CSS] HTML 기본 구조  (1) 2020.01.17
[HTML+CSS] HTML이란.  (1) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 HTML 텍스트를 표현할 때 사용하는 태그 중 텍스트를 덩어리로 묶어 주는 '블록 레벨' 태그에 대해서 익혀보겠습니다.

<h> <p> <br> <hr> <blockquote> <pre> 태그는 모두 텍스트를 블록으로 묶어 처리하는 태그들입니다. 따라서 이 태그들은 선택한 텍스트 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용됩니다.

 

<h> 태그 - 제목 표시하기

 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 제목 크기에 따라 <h1> ~ <h6> 태그까지 사용할 수 있고, <h1> 태그가 가장 크게 표시되고 <h6> 태그가 가장 작게 표시됩니다.

<p> 태그 - 단락 만들기

 텍스트를 표시할 때 가장 많이 사용하는 태그가 <p> 태그입니다. <p> 태그는 텍스트 단락을 만드는데 이때 '단락'이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말합니다. 즉, <p> 태그로 표시하는 텍스트 단락은 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

<br> 태그 - 줄 바꾸기

 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 <br> 태그를 사용합니다. <br> 태그는 닫는 태그가 따로 없습니다.

<hr> 태그 - 수평 줄 넣기

 <hr> 태그는 수평 줄을 삽입할 때 사용합니다. 기본적으로 가로선이 삽입되고 닫는 태그는 따로 없습니다.

<blockquote> 태그 - 인용문 넣기

 다른 블로그나 사이트의 글을 인용할 경우, <blockquote> 태그를 이용해 표시합니다. 이때, 인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별됩니다. 인용한 사이트 주소가 명확할 경우, cite 속성을 이용해 인용 사이트 주소를 표시할 수도 있습니다.

<pre> 태그 - 입력하는 그대로 화면에 표시하기

 HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다. 하지만 <pre> 태그를 사용할 경우, 브라우저에 그대로 표시됩니다.

 

예시를 통해서 위의 태그들을 익혀보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>기초문법#3 예제</title>
</head>
<body>
    <h1>h1태그입니다.</h1>
    <h2>h2태그입니다.</h2>
    <h3>h3태그입니다.</h3>
    <h4>h4태그입니다.</h4>
    <h5>h5태그입니다.</h5>
    <h6>h6태그입니다.</h6>
    <p>p태그입니다.</p>
    <p>p태그에<br>br태그를추가했습니다.</p>
    <p>hr태그</p>
    <hr>
    <p>hr태그</p>
    <blockquote>blockquote태그입니다.</blockquote>
    <pre>pre태그는    띄어쓰기도 그대로 보여줍니다.</pre>
</body>
</html>

 h태그를 보시면 h1태그가 가장 크고, h6태그는 p태그보다도 작아지는 것을 확인할 수 있습니다.

br태그를 추가하면 한 줄 띄어쓰기가 적용되고, hr태그는 가로선을, blockquote 태그는 인용문이기 때문에 들여쓰기가 자동으로 적용되는 것을 볼 수 있습니다. pre태그는 입력한 그대로 웹 브라우저에서 보여주기 때문에 띄어쓰기가 입력한 만큼 적용된 것을 볼 수 있습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] HTML 기본 구조  (1) 2020.01.17
[HTML+CSS] HTML이란.  (1) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 HTML 문서의 기본 구조에 대해서 알아보겠습니다.

HTML 기본 구조

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 웹 문서(HTML 문서)는 아무리 길더라도 <!doctype>, <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시합니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

위와 같이 웹 문서는 기본적인 구조를 가집니다. 하나하나 어떤 의미인지 살펴보도록 하겠습니다.

<!doctype>

 문서 유형을 지정하는 선언문으로 <html> 태그보다 먼저 사용해야 합니다. 이때 지정하는 문서 유형이란 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.' 라고 알려주는 것입니다. 과거 HTML4에서는 문서 유형이 여러 가지여서 문서 유형을 지정하는 소스가 길었습니다. 하지만 HTML5부터는 단 한줄로 문서 유형을 선언하면 됩니다.

<html>

 문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다. <html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다. 한국형 웹 콘텐츠 접근성 지침에 의해 웹 페이지의 기본 언어 선언을 규정해야합니다. 그래야 화면 낭독기에서 웹 문서를 소리 내어 읽어줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 해서 들려줄 수 있습니다. 또한, 검색 사이트에서 '한국어로 된 문서' 로 범위를 제한해 검색할 경우, <html lang="ko"> 라고 된 문서를 우선 검색합니다. 

<head>

  웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다.

<title>

 <head> 태그 안에서 가장 중요한 태그는 <title> 태그입니다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있습니다.

<meta>

 <meat> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다. <meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것입니다. 웹 서버는 영어를 기본으로 하기 때문에 웹 문서에서 한글을 표시하려면 '문자 인코딩'을 지정해줘야 합니다. HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 'utf-8' 방식을 사용합니다. 또한 <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있는데 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시됩니다.

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

<body>

 <body> 태그에는 실제 브라우저에 표시될 내용을 입력합니다. 

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17
[HTML+CSS] HTML이란.  (1) 2020.01.17

+ Recent posts

티스토리툴바