데니스의 놀이터

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> 태그는 인용 내용이 줄이 바뀌어 적용이 되고 들여쓰기 기능이 적용되었습니다.