데니스의 놀이터

<abbr>태그는 다음과 같은 형태로 사용합니다.

<abbr>태그

1. abbr은 abbreviation(약어)이라는 단어의 앞 부분을 사용한 단어입니다. 약어란 WWW(World Wide Web), HTML(HyperText Markup Language), DEC(December)와 같이 줄여서 사용하는 것을 말합니다. 한글로는 갑분싸, 아아(아이스 아메리카노) 등이 있죠?

2. 마우스 커서가 <abbr>태그를 설정한 곳(dot형식으로 밑줄)에 올려두면 약어에 대한 설명이 툴팁 형태로 나타납니다.

3. title 속성을 사용해서 약어에 대한 설명을 작성할 수 있습니다. ex) title="설명"

다음 코드는 WWW, HTML, DEC의 약어를 설명하는 코드입니다.

안녕하세요. 후니입니다!

이번 포스팅에서는 HTML5의 <button>태그에 대해서 알아보겠습니다. 

<button>태그와 <button>태그 안에 들어가는 속성(Attribute)들도 많지만 한 개의 버튼을 우선 만들어보고 살펴보겠습니다.

다음은 결과 화면입니다.

<button>버튼 이름</button> 형태를 가지고 있으며 버튼 태그 사이에 버튼의 이름을 지정할 수 있습니다.

간단하게 버튼 한 개 만드는 방법을 알아봤고 이제부터는 <button>태그의 속성들을 살펴보겠습니다.

<button>태그의 type 속성과 속성 값

1. button : 클릭할 수 있는 기능

2. submit : 데이터를 전송할 수 있는 기능

3. reset : 데이터를 리셋하는 기능

<button>태그의 type속성에 들어갈 수 있는 속성 값들은 위처럼 총 세 가지가 있으며 다음 코드는 button, submit. reset을 사용했습니다. <form>태그나 모르는 태그들이 있을 경우엔 일단은 무시하고 진행해도 괜찮지만 이 참에 같이 공부하는걸 추천합니다.

코드를 직접 타이핑 후 실행해보면 <사진1.2>와 같은 결과가 나옵니다.

First name의 텍스트 박스에 값을 입력하고 Second name 텍스트 박스에 값을 입력 후 submit 속성 값을 사용한 Submit버튼을 누르면 다음 화면으로 넘어갑니다. 아직 다음 화면은 만들지 않아서 "파일을 찾을 수 없음"화면이 나오는게 정상입니다. 그리고 값을 입력 후 reset 속성 값을 사용한 Reset버튼을 누르면 입력한 값들이 사라지며 button 속성 값을 사용한 click버튼은 클릭할 수 있는 버튼으로 생성됩니다.

1. <caption>태그, <figcaption>태그 - 표에 제목 붙이기

 기본형 : <caption> 표 제목 </caption>

       <figcaption> 표 제목 </figcaption>

 - 표에 제목을 붙일 때 보통 <caption>태그를 사용하지만 <figcaption>태그를 사용할 때도 있습니다. 두 태그의 사용 방법을 알아보겠습니다.

 1) <caption>태그

   1. <caption>태그는 <table>태그 바로 다음에 사용합니다.

   2. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.

 다음은 <caption>태그를 사용한 코드입니다.

<사진 1.1>

<사진 1.1> 코드는 1행에는 컴퓨터 프로그래밍 언어를 작성하였고, 2행은 서버 단 언어를 작성하였으며 3행은 웹 베이직 3개를 작성했습니다.

<caption>태그는 <table>태그 다음에 위치하고 있습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

<caption>태그를 사용한 결과 화면입니다. <caption>태그로 작성한 테이블 제목은 표의 중앙에 표시되었습니다.

 2) <figcaption>태그

  1. <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목을

     입력합니다.

  2. <caption>태그와 달리 <figcaption>태그는 중앙에 정렬되지 않습니다.

  3. <figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.

  4. <figcaption>태그를 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됩니다.

 다음은 <figcaption>태그를 <table>태그 앞에 사용한 코드입니다.

<사진 1.2>

다음은 결과 화면입니다.

<사진 1.2 결과 화면>

1. colspan 속성 - 열 합치기

 기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>

  <th colspan="합칠 셀의 개수"> 내용 </th>

 - colspan 속성의 col은 영어로 '열'을 뜻하는 column의 앞글자 col을 사용한 것입니다. 즉, 열을 합치고자할 때 colspan속성을 사용합니다. 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

<사진 1.1>

우선 <사진 1.1>의 좌측에 있는 표를 만드는 코드입니다.

<사진 1.2>

<사진 1.2>의 table속성을 보면 width속성과 height속성이 있습니다. 이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.

width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 다음은 결과 화면입니다.

<사진 1.2 결과 화면>

이제 이 표의 2행2열 부분의 우측부분을 하나의 셀로 결합시켜보겠습니다.

<사진 1.3>

<사진 1.3> 코드는 2행2열의 <td>코드 내부에 colspan 속성과 속성 값 3을 작성하였습니다. 열을 통합 시킬 것이므로 colspan 속성을 사용했으며

3개의 셀을 합칠 것이므로 속성 값을 3으로 설정했습니다. 다음은 결과 화면 입니다.

<사진 1.3 결과 화면>

2. rowspan 속성 - 행 합치기

 기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>

 기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>

 - rowspan 속성의 row는 영어로 '행'을 뜻하는 row 입니다. 즉, 행을 합치고자할 때 rowspan속성을 사용합니다. 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

.

<사진 1.4>

<사진 1.4>의 좌측에 있는 표는 위에서 이미 작성하였으므로 바로 rowspan 속성을 사용하여 셀을 합치는 코드를 작성해보고 결과를 확인해보겠습니다.

<사진 1.5>

3개의 행을 합칠 것이므로 rowspan 속성을 사용하였으며, 속성 값으로 3을 설정했습니다. 만약 2개의 행을 합치고자 한다면 속성 값을 2로 주면 됩니다.

그리고 2행과 3행 부분을 보면 <td></td>속성이 4개에서 3개로 수정되어 있습니다. 이유는 셀을 합치고 결과적으로 표현되는 표는 <사진 1.4>의

우측 표와 같이 3개의 셀이므로 <td></td>속성을 3개를 작성합니다. 다음은 결과 화면입니다.

<사진 1.5 결과 화면>

1. <table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

 기본형 :

 <table>

<tr>

<th></th> <!-- 표에 제목 셀 만드는 태그입니다. 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.-->

<td>내용</td>

<td>내용</td>

</tr>

</table>

 - 우리가 일상에서 자주 보는 표를 머릿속으로 상상해보세요. 가로, 세로로 각각 행과 열이 있고 그 안에 내용이 입력됩니다.

   이런 표를 만들 때는 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 각각 필요합니다.

   이렇게 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다.

2. 기본적인 표 만들기

 우선 <table> 태그를 이용하여 표 전체 윤곽을 잡은 다음에 행(row)을 먼저 만들고 각 행마다 몇 개의 셀(cell)이 들어갈지 결정합니다.

 예를 들어 2개의 행과 3개의 열을 가진 표를 만든다면 다음과 같은 순서로 만들면 됩니다.

 1) <table> 태그를 이용하여 표 자리를 만듭니다.

<사진 1.1>

 2) <tr> 태그를 사용하여 2개의 행을 만듭니다.

<사진 1.2>

 3) <td> 태그를 사용하여 각 행마다 셀을 3개씩 만듭니다.

<사진 1.3>

 4) 각 셀에 들어갈 내용은 <td>와 </td> 사이에 입력합니다.

 다음은 내용이 들어간 코드입니다.

<사진 1.4>

다음은 <사진 1.4> 결과 화면입니다.

<사진 1.4 결과 화면>

결과 화면을 보면 입력한 대로 출력이 되었지만 우리가 생각했던 표가 아닙니다. 왜냐하면 표를 구분 짓는 테두리 없이 표현이 되었기 때문입니다.

테두리를 표현하고자 한다면 <table> 태그 안에 border 속성으로 속성 값을 1을 주어야 합니다. 다음은 border 속성을 입력한 코드입니다.

<사진 1.5>

다음은 결과 화면입니다.

<사진 1.5 결과 화면>

<table> 태그 안에 border 속성을 입력한 결과입니다. border 속성값으로 1을 입력했지만 숫자가 올라갈수록 테두리 색이 진하게 표현됩니다.

1. <dl>, <dt>, <dd> 태그 - 설명 목록 만들기

 기본형 :

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

...

</dl>

 - <dl> 태그는 사전 구성처럼 '제목'<dt>과 '설명'<dd>이 한 쌍인 설명 목록(Description List)을 만듭니다.

   <dt> 태그는 제목을 표시할 때 사용됩니다.

   <dd> 태그는 설명을 표시합니다. 하나의 <dt> 태그에 여러 개의 <dd> 태그를 가질 수 있습니다.

다음은 <dl>, <dt>, <dd> 태그를 사용한 예제입니다.

<사진 1.1>

제가 좋아하는 배우 3명과 가수 3명을 작성하였습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

1. <ul> 태그 - 순서 없는 목록 만들기

 기본형 :

<ul>

<li> 내용 </li>

<li> 내용 </li>

...

</ul>

 - <ul> 태그는 Unordered List의 약자로써 '정돈되지 않은 리스트'를 뜻 합니다.

   <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용하여 각 항목을 표시합니다. <ul> 태그 사용 시 각 항목 앞에 작은 원이나 사각형 같은

   불릿(bullet)이 붙습니다. 작은 원이 디폴트 값입니다.

<사진 1.1>

<사진 1.1> 코드는 <ul> 태그와 <li> 태그를 사용했습니다. 그리고 <li> 태그의 끝 태그인 </li> 태그를 생략해도 결과는 같습니다.

<사진 1.1 결과 화면>

결과 화면을 보면 a, b, c, d, e의 앞에 작은 원인 불릿이 붙어서 출력되는 것을 확인할 수 있습니다.

2. <ol> 태그 - 순서 목록 만들기

 기본형 :

<ol>

<li> </li>

<li> </li>

<li> </li>

....

</ol>   

 - <ol> 태그는 Ordered List의 약자로써  '정돈된 리스트'를 뜻 합니다.

   <ul> 태그처럼 순서 없는 목록이 아닌, 순서를 알고 싶은 목록을 사용하고 싶으면 <ol> 태그를 사용하면 됩니다.

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