오늘의 주제:콘텐츠
콘텐츠란 HTML 내부 요소들을 구성하는 태그로 태그에 따라 다양한 기능을 가지고 있다.
H1~H6
H1이 가장 상위,H6가 가장 하위 제목이다
들여쓰기를 올바르게 사용해야 가시성이 확보되고 차후 수정이나 내용 확인도 하기 쉽다.
<H1>올바른 제목1</H1>
<H2>올바른 제목2</H2>
<H3>올바른 제목3</H3>
<H2>올바른 제목2</H2>
<H3>올바른 제목3</H3><H1>잘못된 제목1</H1>
<H2>잘못된 제목2</H2>
<H1>잘못된 제목1</H1>
<H4>잘못된 제목4</H4>P
문단 태그, 한 문단을 구분하기 위해서 사용한다
<p>문단 태그</p>b,strong
둘 다 태그 내부의 글자를 두껍게 해준다. 하지만 strong 태그는 강조의 의미도 가지고 있으며 문법적으로도 다르게 취급하므로 주의해야 한다.
<b>글자를 두껍게</b>
<strong>글자 강조</strong>i,em
둘 다 태그 내부의 글자를 기울이게 된다. em 태그는 strong처럼 강조의 의미를 띄며 문법적으로 서로 다르게 취급한다.
<i>글자를 기울이기</i>
<em>기울임 강조</em>s,del
글자의 취소선을 표시하게 한다. del 태그의 경우 ins 태그와 함께 사용하면 del 태그의 내용을 없애고 ins 태그의 내용으로 대체하게 한다.
<s>글자의 취소선</s>
<p>
이 문장은 <del>오래된 정보</del> <ins>새로운 정보</ins>를 포함하고 있습니다.
</p>a
해당 태그는 해당 속성이 달린 객체를 클릭을 통해 새 링크로 갈수 있게 한다. href는 연결된 주소를, target 속성은 해당 창에서(_self) 또는 새로운 창에서 (_blank)로 나타낼 수 있다.
멀티미디어
멀티미디어는 그림,소리,영상과 같은 여러 종류의 외부 객체를 가져오기 위한 방식이다.
img
문서 내부에 이미지를 넣는 태그, src 속성을 통해 이미지의 링크를 달 수 있고 alt속성을 통해 이미지를 불러올 수 없을때의 대체 텍스트를 달 수 있다.
figure,figcaption
하나의 독립적인 컨텐츠를 넣고 그에 대한 설명을 넣을 수 있는 태그
figure 태그에서 img처럼 이미지의 src로 링크를 가져올 수 있고 figcaption 태그를 통해 이미지의 설명을 넣을 수 있다.
video
영상을 보여주는 태그 ,src 태그를 통해 영상을, poster 속성으로 미리보기를, source 속성을 통해 확장자를 지정해 줄 수 있다.(mp4,webp 등)
svg
img 태그와 비슷하지만 img와는 달리 코드로 이루어진 이미지를 보여주므로 확대/축소나 추가적인 속성 부여가 가능하다.
리스트
리스트는 타 언어의 배열이나 스택과 같은 기능을 가진다.
ul
정렬되지 않은 ul태그는 기본적인 배열이며 하위 목록으로 li 태그를 가질 수 있다.
ol
정렬된 배열 태그인 ol 태그는 기본적인 기능은 ul과 비슷하나 자동적으로 정렬이 된다는 점에서 차이점이 있다.
li
ul이나 ol 태그는 li 태그를 하위 목록으로 가질 수 있으며 마찬가지로 li 태그는 ul이나 ol 태그를 하위 목록으로 가질 수 있게 된다.
dl,dd,dt
dl 태그 내에서 dd 태그로 정한 단어의 설명을 dt태그를 통해 설명문을 달 수 있게 한다.
표
table
기본적인 표 테이블로 tr로 행,td로 열을 늘릴 수 있다.
th
테이블 내부 셀의 제목을 나타나는 태그다.
thead
thead 내부에 th 태그를 담으로써 그룹을 만들 수 있다.
tfoot
테이블의 바닥을 나타내는 태그로 html4와 html5에서의 태그 사용이 다르다
html4
...<tfoot>...</tfoot>
</tbody>html5
...</tbody>
<tfoot>...</tfoot>iframe
현재 문서 내에 다른 문서를 불러오는 태그
src 속성을 활용해 URL을 넣어 외부 페이지를 넣을 수 있다.
그러나 모든 페이지가 아이프레임으로 불러올 수는 없다(호환성, 불러오기 허가, 보안 등)
양식
정보를 저장하거나 제출하는 등의 태그
form
정보를 제출하는 태그로 input,selectbox,textarea 등으로 정보를 입력받아 제출하며 action 속성으로 페이지를 이동하거나 method 속성으로 제출된 정보의 입력 방식을 정할 수 있다.
label
input,selectbox,textarea의 설명을 작성하는 태그
for 속성을 사용해 입력의 id와 연결시키면 설명을 지정할 수 있다. 다만 id를 중복해서 사용하면 안된다.(id는 한 페이지 내에서 하나의 객체에만 적용 되어야 한다.)
select
옵션 메뉴를 제공하는 태그
옵션 태그를 통해 정의할 수 있으며 첫번째 옵션 태그가 이름이 된다.
value 속성을 선언하지 않으면 option 태그 내용이 값이 된다. 흔히 셀렉트박스라고 불리우며 첫번째 option이 버튼명이므로 placeholder를 사용할 수 없다.
textarea
텍스트를 입력하는 태그, 태그 내부의 콘텐츠가 기본적인 내용이 되며 rows/cols를 통해 좌우 높이를 조절 가능하며 단위는 글자 크기이다.
(알아두면 좋은 옵션
readonly:사용자가 수정할 수 없음
required:제출 시 필수적으로 작성하게 함, 관련 행동은 브라우저가 처리
placeholder:input과 textarea의 설명을 작성 가능,select 태그에선 작성 불가
disable:제출이 불가능하게 잠기게 한다.)
button
form 내부에서 입력을 담당하는 태그로 type=reset 버튼을 눌러 입력값을 초기화하거나 type=submit 버튼을 통해 입력값을 제출할 수 있게 된다.
주의사항
느낀 점:
그동안 주먹구구로 구글링하거나 ChatGPT에게 물어보며 작성하던 것들을 이런 식으로 한번에 정리해서 듣게 되니 HTML 태그들의 대한 이해도가 많이 상승했다는 것을 느낄 수 있었다.
