[HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (2)

목록을 나타내는 태그 : <ul>, <ol> --- <li>

<ul></ul>

unordered list : 목록들의 앞에 기호가 표시됨(기호모양은 바꿀 수 있음)

 

<ol></ol>

ordered list : 목록들의 앞에 숫자가 표시됨

 

<li></li>

목록의 요소들을 적어줌

 

 

텍스트를 꾸며주는 태그들 : <b>,  <strong>, <i>, <mark>

<b> : bold

<i> : italic

<mark> : highlighting >> style = "background-color: 컬러값"으로 색깔 변경 가능

<strong> : bold처리가 되며, 단순 글자강조가 아니라 의미적으로도 강조가 될 때 사용

<span> 태그로 문구를 지정해 style 속성으로 하이라이트 효과를 줄 수도 있긴 함.

 

 

HTML 문서의 구성을 나타내는 태그들
<header>, <nav>, <section>, <article>, <aside>, <footer>

<header> : 사이트명, 로고 포함 >> 페이지가 전환되어도 잘 바뀌지 않음
<nav> : 사이트의 메뉴 포함(navigation)  >> header에서 메뉴바같은 역할
<section> : 문서의 내용 포함
<article> : 문서의 내용이 많은 경우 세부적으로 구분
<aside> : 문서의 주내용을 제외하고 section 주변에 배치
<footer> : 사이트의 정보(주소, 전화번호), 저작권, 부가정보

 

 

----------> 모두 block tag임

이와같은 구역설정을 <div id="header">와 같이 설정할 수도 있다.

<footer>에는 <address> 태그를 사용할 수 있는데,

<address>는 기본적으로 italic체를 갖고있다.

 

 

<꿀팁>

id 속성으로 본문 내 위치참조가 가능하다.

<div id="idname">

<a href="#idname"> ---> #의 역할!

 

 

더보기(접힌글) 만들기 : <details></details>

<details>

해당 구역 안에 들어있는 내용이 접힌글로 들어간다.

즉, 지정된 단락의 내용이 접힌다.

</details>

 

 

미디어 컨텐츠 삽입 : <object>, <embed>, <audio>, <video>, <iframe>

HTML5 이전에는 <object> 또는 <embed> 를 이용해 미디어 파일을 삽입했으나,

이후에는 <audio>태그와 <video>태그를 이용해 미디어를 삽입한다.

 

<audio></audio>

src = "경로"

controls : 이 속성이 없으면 사용할 수 없다

autoplay="autoplay" : 불러와졌을 때 자동실행

 

 

<video></video>

width와 height 속성으로 출력되는 영상의 크기를 조정할 수 있다.

<video><source src = "경로"></video> 형식으로도 사용 가능

 

 

<iframe></iframe>

영역을 지정해 그 안에 영상이나 텍스트 등을 삽입하는 태그.

외부컨텐츠, 즉 유투브 등의 콘텐츠를 가져올 때 사용할 수 있다.

[유투브>영상>공유>퍼가기]를 누르면 <iframe>이 적용된 HTML 코드를 편하게 가져올 수 있다.

(*TIP : 유투브는 시작시간 설정 가능)

 

외부컨텐츠 뿐만 아니라 서버가 갖고있는 pdf 파일 등도 보이게 할 수 있다.

 

 

테이블(표)를 만드는 태그 : <table>, <tr>, <td>

<table>
  <tr> : 행
    <td> : 데이터(셀) </td>
  </td>
</table>

table 구역구분 (시멘틱)

<thead> : 테이블 제목

<tbody> : 테이블 내용

<tfoot> : 테이블 하단

 

위 구역들을 따로 지정해주지 않으면

기본적으로 모두 <tbody>로 설정된다.

 

 

table 하위태그

<th>: <thead>를 쓰지 않을 때,테이블 제목을 표시하기 위해 td 대신에 쓸 수 있음.

기본적으로 centered, bold 속성으로 표현된다.

<tr> : table row, 즉 행을 만드는 역할(가로줄)

<td> : table data, 즉 셀을 만드는 역할

 

 

 

table의 속성

border = "테두리 두께값 1부터~"

width = "너비 픽셀값"

height = "높이 픽셀값"

align = "텍스트 정렬방식 center, left, right"

** 테이블의 위치는 테이블테그 안에 지정할 수 없지만, <div>태그로 테이블을 감싸서

이 <div>의 속성으로 align="center" 해주는 방식으로 가운데 정렬 가능

 

===> 이런식으로 속성값이 너무 많이 나열될 때,

보다 더 간단히 표현하기 위해 style = "width:너비값; height:높이값;" 과 같은 형태로 지정해줄 수도 있다.

 

 

테이블의 컬럼 

 

텍스트의 내용에 따라 셀의 크기가 자동으로 조절된다.

같은 크기만큼의 공간이 있다면 자동으로 너비/컬럼갯수, 높이/행갯수로 표현되지만

<td>에 width 속성을 주어 컬럼너비를 조절할 수 있다.

 

 

셀병합을 할 수 있는 속성도 있다.

rowspan = "병합할 셀의 갯수" (가로셀 병합)

colspan = "병합할 셀의갯수" (세로셀 병합)

 

 

row 단위는 <tr>태그에 속성을 주어 행 단위로 속성변경이 가능하지만, 열 단위로는 속성관리가 쉽지 않다.

따라서 컬럼 단위로 속성관리를 위해 나온 태그가 <col> 이다.

<col>  --> 첫번째 컬럼(변화없음)
<col style = "background-color: yellow"> --> 두번째 컬럼(배경이 노란색으로 변함)

위와 같이 컬럼의 속성을 변경 가능하며,

n번째 컬럼을 지정하기 위해서는 그 전까지 컬럼 갯수만큼 <col>을 적어주면 된다.

<col>
<col span="2"> <-- 두 번째 컬럼부터 2개 컬럼 지정

위와같이 span 속성으로 여러 개의 연속된 컬럼을 함께 지정해줄 수 있다.

 

 

테이블 안에 <caption> 태그로 설명을 달 수도 있다.

 

 

 

 

이 외에도 많은 태그들을 참고하려면 HTML 표준문법을 확인하는 것이 좋다. 아래 사이트 참고.

>> https://html.spec.whatwg.org/#toc-semantics

HTML Standard