728x90
테이블 태그
지금까지 다양한 웹(Web)상에서 접한부분이 있을거라고 생각합니다. 혹시나 테이블 태그라고 들어보셨는지 모르겠습니다만 보통 표 형식의 문서를 만들 때 사용하게되는 태그이다. 과거에는 사실 테이블 태그를 사용하여 레이아웃(Layout)도 구성하곤 하였는데 반면에 요즘 현대에는 웹 페이지 대부분은 <div>태그를 사용하여 사용빈도가 극도로 높습니다. 테이블 태그의 기본을 먼저 간략하게 공유하자면, 거의 모든 대부분의 데이터중에 표 형식으로 된 자료들은 테이블 태그를 사용합니다. 예를들면 아래와같이 만들어 볼 수 있다.
<body>
<table>
</table>
</body>
일단 기본적으로 뼈대를 만들어놓았다만 여기서 <table></table>태그사이에 실제로 무슨 내용이들어갈지 지정되지않았다. 그 안에 넣을 수 있는 태그는 사실상 다양하지만 실질적으로 실무에서 혹은 웹상에서 많이 쓰이는 태그를 정리 및 나열해본다. tr/ 표 내부의 행 태그, th/ 표 내부의 제목 셀 태그, td/ 행 내부의 일반 셀 태그를 의미한다. 하지만 이렇게 그냥 단순히 보고 암기하는 것 보다는 조금 더 세부적으로 알면 조금 더 정확한 의미를 이해할 수 있어 좋다. 먼저 tr태그는 table row를 의미하고, th태그는 table header, td태그는 table data를 의미한다. 전체적인 의미를 알고 아무래도 주기적으로 연습해보는 것이 백만번 유용할 것같다고 생각하는 부분이다. 그렇게하여 조금 더 응용하여 태그를 만들어보자면 아래와 동일하다.
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
이렇게 만들어볼 수 있다. 물론 처음이라면 어렵고 복잡할 수 있는 부분인데 앞전에 HTML5에 필요한 기본적인 태그를 숙지하였다면 이번에 새로 등장한 태그를 알고 원리를 알면 조금 더 확실하게 알 수있는 부분이다. 특히나 코드에 보면 table border이라는 부분은 표의 테두리 두께를 지정해주는 부분이다. 게다가 여기서 조금 더 응용하자면 rowspan과 colspan을 추가로 들어볼 수 있다. rowspan은 셀의 높이를 지정하는 태그이고 colspan은 셀의 너비를 지정하는 태그이다. 앞전에 span이라는 태그를 들어본 적이있을지도 모른다. 하지만 앞에 col 또는 row를 붙이면 이와같은 태그가 만들어진다. 여기서 조금 더 응용하면 더 다양한 표의 형식을 만들어볼 수 있을것인데 그 부분은 추후 다시한번 연습해보도록 할 예정이다. 그리고 다음으로 또 보게되었던 내용은 이미지 태그이다.
이미지 태그
사실상 지금까지 쭉 확인해본 내용들은 너무 기본적인 태그들이다. 이러한 기본적인 태그들로는 사실 조금 익히기에 복잡할 수 있고 한번에 숙지하기가 어려운 부분도 있을것이라고 생각한다. 그래서 이번에는 비주얼적으로 조금 달리보이는 이미지 태그를 설명하고자한다. 이미지태그는 img라는 태그를 사용한다. 하지만 단순히 그냥 img라는 태그만 넣는다면 아무런 변화가 없지않을까라고 자연스럽게 생각해보게된다. 정답은 맞다. 일단 img라는 속성을 넣기에는 아래와 같이 기본적인 뼈대를 만들어준다. 물론 당연히 <body>및 중간 내용에 들어가기에 이 영역 안에 넣어보겠다.
<body>
<img />
</body>
여기서 이미지를 넣게되는 방법은 img태그와 연관성있는 속성이다. 무수히 많은 속성이 있지만, 이번에는 4가지 속성을 넣어보려한다. <src>, <alt>, <width>, <height> 이렇게 4가지이다. 먼저 <src>는 이미지의 경로를 지정해주는 역할을 한다. 다음으로 <alt>는 이미지가 없을 때 나오는 글자를 지정해주고, <width>는 이미지의 너비지정, <height> 이미지의 높이를 지정해주는 역할을 한다. 하지만 요즘 현대시대에는 스타일시트를 사용해 입력하는 것이 기본적이므로 width와 height의 속성은 잘 사용하지않습니다. 예를들어 img 태그의 속성에 관한 뼈대를 만들어보겠습니다. 그리고 다음으로 이어질 내용은 오디오 태그입니다.
<body>
<img src="iris.jpg" alt="홍채" with="200" />
<img src="nothing" alt="그림이 존재하지 않습니다." width="500" />
</body>
오디오 태그
오디오 태그는 사실상 일반적으로 너무 많이 쓰이는 부분이라 추가적으로 정리해볼 필요는 딱히 없을것으로 보입니다. 대체적으로 대부분의 많은 사람들은 인터넷을 통하여 웹 브라우저에서 음악을 재생하고 듣곤하는데, 이를 재생할 수 있게 만들어주는 태그가 오디오 태그입니다. 이는 img태그와 사용방법이 매우 비슷하므로 정말 쉽게 사용할 수 있을 것입니다. 우선 일단 mp3파일을 준비해주고 아래와같이 기본 태그를 만들어봅니다.
<body>
<audio></audio>
</body>
여기서도 위에서 언급했던 img태그와 마찬가지로 오디오 태그도 입력은 먼저 하긴했지만 어떠한 음악을 어떤 방식으로 재생하게할지 정해지지 않았습니다. 여기서 또 한가지 짚고 넘어가야할 부분은 이전과 마찬가지로 몇가지 관련 속성입니다. <src>, <preload>, <autoplay>, <loop>, <controls> 이렇게 곱아볼 수 있는데 하나씩 태그를 간략하게 풀이해보면 이렇습니다. <src>는 음악파일의 경로를 지정, <preload>는 음악을 재생하기 전에 모두 불러올지 지정, <autoplay> 음악을 자동으로 재생할지 지정, <loop> 음악을 반복할지 지정, <controls> 음악 재생도구를 출력할지 지정해주는 부분입니다. 사실상 이 모든 부분은 음악을 재생할때 모두 다 사용되는 부분이기때문에 반드시 알아야할 필요가 있다고 생각한다. 예제로 아래와같이 만들어볼 수 있다. 이렇게 코드를 만들어 실행을 하면 직접 음악을 재생할 수 있다.
<body>
<audio src="california dream.jpg" controls="controls"></audio>
</body>
단, 혹시나 재생이 안되는 경우에는 <source> 태그를 사용할 수가 있는데 이는 이러한 문제를 해결하고자하기 위함의 태그이다. <source> 태그를 사용하면 아래와같이 사용할 수 있다.
<body>
<audio controls="controls">
<source src="california dream.mp3" type="audio/mp3"/>
<source src="california dream.ogg" type="audio/ogg"/>
</audio>
</body>
*OGG파일을 만들때는 MP3 OGG 파일변환이라고 검색하면 아무런 프로그램을 통하여 만들 수가있다. 뿐만아니라 video 태그도 이와 정말 많이 유사하여 추후 다시한번 체크해보려한다. 이러한 부분을 공유하여 많은 도움이 되었으면 하는 바램에 공유해본다.
'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글
| [IT·HTML+CSS] CSS 선택자 종류와 정의 설명하기 (0) | 2021.07.15 |
|---|---|
| [IT·HTML+CSS] HTML에 필요한 기본적인 응용태그 정리9(4) (0) | 2021.07.07 |
| [IT·HTML+CSS] HTML에 필요한 각종 여러 태그 알아보기(2) (0) | 2021.07.02 |
| [IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0) | 2021.07.01 |
| [IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0) | 2021.07.01 |