데니스의 놀이터

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

 기본형 : <span> 내용 </span>

 - <span> 태그는 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때

   즉, CSS스타일을 지정할 때 주로 사용합니다. <span> 태그는 한 문장 단위로 묶습니다.

<사진 1.1>

위 코드는 '제임스 고슬링(James Gosling)'의 문자열 부분만 파란색으로 바꾸기 위하여 <span> 태그와 CSS를 적용시켰습니다.

아래 코드는 결과 화면 입니다. 

<사진 1.1 결과 화면>

1. <mark> 태그 - 형광펜 효과

 기본형 : <mark> 텍스트 </mark>

 - 형광펜으로 그어 놓은 효과를 내는 태그입니다.

<사진 1.1>

Hello, World!입니다. 라는 문장에서 Hello, World! 부분을 <mark> 태그를 사용했습니다. 아래는 결과 화면 입니다.

<사진 1.1 결과 화면>

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

 기본형 : <q> 인용 내용</q>

 - 인용 내용을 표시하기 위해 <q> 태그를 사용할 수 있습니다. <q> 태그가 <blockquote> 태그와 다른 점은 <blockquote> 태그는 인용 내용이

   줄이 바뀌어 나타나고, 다른 내용과 구분이 되도록 들여쓰기 기능이 적용되지만 <q> 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른

   내용과 함께 한 줄로 표시되고 인용 내용을 구분할 수 있도록 따옴표를 붙어 표시합니다.

   간단한 <q> 태그 예제를 작성해보겠습니다. 웹의 창시자인 팀 버너스리를 위키 백과에서 검색 한 결과입니다.

<사진 1.1>

<사진 1.1>은 <q> 태그와 <blockquote> 태그의 차이점을 알아보기 위해 같은 내용의 문장을 <q> 태그와 <blcokquote> 태그를 사용하여 작성했습니다. 

<사진 1.1 결과 화면>

보시다시피 <q> 태그를 사용한 내용은 줄바꿈이 없고, 큰 따옴표("")가 자동으로 문장의 끝과 처음에 삽입이 되었습니다.

아래 문장 즉, <blockquote> 태그는 인용 내용이 줄이 바뀌어 적용이 되고 들여쓰기 기능이 적용되었습니다. 

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

 기본형 : <strong> 굵게 강조할 텍스트 </strong>

            <b> 굵게 표시할 텍스트</b>

 - 텍스트 중에서 굵게 표시하려고 할 때 <strong> 태그나 <b> 태그를 사용합니다. 두 태그의 차이점은 *화면 낭독기에서 차이점을 보이는데,

   <strong> 태그를 사용하면 화면낭독기는 해당 부분이 강조되었다고 알려주나, <b> 태그는 알려주지 않습니다.

    그래서 중요한지 아닌지에 따라 구분해서 사용하면 편리합니다.

   <strong> : 중요한 내용 강조

   <b> : 단순히 굵게 표시

   * 화면 낭독기는 시각 장애인들을 위해 웹 브라우저의 정보를 음성으로 알려주는 프로그램입니다.

     화면 낭독기를 사용하여 두 개의 태그 차이점을 확인해보고 싶지만 유료 프로그램이라 확인은 못 했습니다.

   두 개의 태그를 사용하여 웹 브라우저에서 어떤지 확인해보겠습니다.

<사진 1.1>

<사진 1.1> 코드는 <strong> 태그와 <b> 태그를 사용하여 Hello, World! 문장을 출력하도록 작성했습니다.

<사진 1.1 결과 화면>

이렇게 웹 브라우저에서는 <strong> 태그나 <b> 태그를 사용해도 큰 차이 없이 출력 됩니다.

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

 기본형 : <pre> 텍스트 </pre>

 - HTML에서는 아무리 많은 공백(스페이스 바)을 넣어도 브라우저 창에는 한 개의 공백만 표시됩니다.

   아래 <사진 1.1> 코드는 ABCD는 스페이스바를 한 번 입력했고 E와 F는 스페이스를 엄청 눌렀습니다.

<사진 1.1>

아래는 결과 화면입니다.

<사진 1.1 결과 화면>

많은 공백을 원했지만 웹 브라우저는 많은 공백을 무시하고 단 하나의 공백으로만 표현이 되었습니다. 이 문제를 해결하고자

<pre> 태그를 사용할 경우, 소스에 표시한 모든 공백이 웹 브라우저에 그대로 표시됩니다.

<사진 1.2>

<사진 1.1>에서 작성한 코드에서 <pre> 태그를 사용해봤습니다. 결과 화면은 아래와 같습니다.

<사진 1.2 결과 화면>

<pre> 태그를 사용하니 제가 원하던 공백이 모두 표현이 되었습니다.

1. <blockquote> 태그 - 인용문 삽입하기

 기본형 : <blockquote> 인용 내용 </blockquote>

 - 다른 홈페이지의 글을 인용할 경우, <blockquote> 태그를 이용할 수 있습니다. 이때 인용한 문장은 다른 텍스트 안으로

   들여쓰기 기능이 되므로 다른 텍스트들과 구별이 가능합니다.

   그러면 바로 예제를 작성해보겠습니다. JAVA 언어 개발자인 제임스 고슬링을 위키백과에 검색하여 나온 결과로

   작성했습니다.

<사진 1.1>

코드 12~17번째 줄을 보면 <blockquote> 태그를 사용 했습니다. 아래는 결과 화면입니다.

<사진 1.1 결과 화면>

결과 화면을 보면 <blockquote> 태그를 사용한 부분은 앞서 말한 것과 같이 인용한 문장이 자동으로 들여쓰기가 되었습니다!

1. <hr> 태그 - 수평 줄 넣기

 기본형 : <hr>

 - <hr> 태그의 hr은 수평선 이라는 뜻을 가진 horizontal 에서 스펠링 hr을 따와서 사용하는 태그입니다.

   보통 여러 개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용합니다.

<hr>태그를 사용하여 간단한 예제를 작성해보겠습니다.

<사진 1.1>

<hr> 태그, 즉 수평선을 기준으로 위에는 프로그래밍 언어를 입력하고 수평선 밑에는 나라별 언어를 작성했습니다. 

결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

프로그래밍 언어와 나라별 언어를 구분하기 쉽게 <hr> 태그를 사용하여 구분지었습니다.

1. <br> 태그 - 줄 바꾸기

 기본형 : <br>

 - 코드 작성시 줄바꿈(엔터)을 하더라도 결과 화면은 줄바꿈 없이 한 줄로 표시됩니다.

<사진 1.1>

<사진 1.1>은 Hello, World!를 입력 후 엔터를 눌렀고 HTML5를 입력 후 엔터를 눌렀으며 CSS와 JavaScript도

마찬가지입니다. 우리가 예상하는 결과와는 달리 결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

이렇게 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시됩니다. 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에

<br> 태그를 사용합니다. <br>태그는 닫는 태그가 없습니다.

<사진 1.2>

<사진 1.2>과 같이 줄바꿈을 희망하는 곳에 <br>태그를 입력하면 마치 엔터를 누른 것과 같은 기능을 합니다.

<사진 1.2 결과 화면>

1. <p> 태그 - 단락 만들기

기본형 : <p> 텍스트 </p>

 - 텍스트를 표시할 때 가장 많이 사용하는 태그가 <p> 태그입니다. <p> 태그는 단락을 만드는데 '단락'이란 앞뒤에 줄바꿈이

   있는 텍스트 덩어리를 의미합니다.

   <p> 태그는 다음 </p> 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 웹 브라우저의 창의

   너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

   아래 코드는 <p>태그를 사용하여 다섯 문장을 작성했습니다.

 <사진 1.1>

<사진1.1> 코드의 결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

결과 화면을 보시면 <br>태그를 사용하지 않았지만 <p>태그를 사용하여 자동 줄바꿈이 되는 것을 확인할 수 있습니다!

 * <br> 태그를 두 개 삽입하면 <p> 태그와 비슷한 기능을 한 것처럼 보일 수 있으나 웹 브라우저는 이것을 텍스트 단락으로

   인식하지 않는다는 것을 주의해주세요!

1. <hn> 태그 - 제목 표시하기

기본형 : <hn> 제목 </hn>

  - <hn> 태그는 일반 텍스트보다 크고 진하게 표시됩니다.

    <h1> ~ <h6> 태그까지 사용할 수 있는데 <h1> 태그가 가장 크게 표시되고 <h6> 태그가 가장 작게 표시 됩니다.

    코드를 작성해보겠습니다.