망각에 재주 있는 나를 위해 기록하는 곳.

[HTML] 시맨틱 태그 (& html tag 정리2) 본문

HTML, CSS

[HTML] 시맨틱 태그 (& html tag 정리2)

baobabtree 2021. 7. 15. 02:26

시맨틱 태그(semantic tag)

: 의미를 가지고 있는 태그. 시맨틱 태그를 사용함으로써 각 태그가 담고 있는 내용을 명확하게 해 준다.

그 요소들로 header, nav, aside, article, section, footer가 있다.

이것들을 그림으로 표현하면

이런 형태로 만들 수 있다. 이 외에도 위치는 필요에 따라 변경이 가능하다.

이 태그들을 보면 대략적으로 어떤 내용이거나 목적을 알 수 있다. 

    header는 제목의 같은 느낌이다. 사이트 메인의 이름, 로고가 될 수도 있고 article 내의 제목이 될 수도 있다.

소개나 내비게이션 기능의 묶음을 나타낸다.

    nav는 방금 위에 말한 내비게이션(navigation) 역할을 하는 태그이다.  사이트 내에서 다른 페이지로 링크되어 있는 경우다. 사이트에서 메뉴, 목차들을 표현하는 것이 nav의 대상이다. (예를 들면 네이버에서 인터넷 뉴스를 보기 위해 뉴스 탭을 누르면 뉴스를 볼 수 있는 페이지로 이동하는 경우)  그리고 header, footer, aside에 포함되어서 사용될 수도 있다.

    aside는 페이지에 다른 콘텐츠들과 연관성이 좀 낮은 내용들로 구성된 영역이다. 웹사이트에 한쪽 사이드나 양 사이드에 광고가 있거나 다른 부가적인 보조기능을 하는 형태로 표현된다.

    article은 이름에서도 알 수 있듯 기사 같은 내용을 담는다. 독립적인 콘텐츠를 담을 수 있는 영역이다.

블로그 게시물, 뉴스 기사 같은 것 들이다.

    section은 article을 포함한 페이지 내에 제목이 있는 또 다른 영역이다. article은 독립적인 내용을 담는 태그라면 section은 비슷한, 관계가 있는 것끼리 묶는다. article안에 section이 있을 수 있고, section안에 여러 article이 있을 수도 있다. 또 div는 특별한 의미가 없다. 단순히 어떤 콘텐츠들을 묶어 놓는 기능만 한다.

    footer는 저작권 정보, 제작자 정보, 연락처 정보, 회사주소 정보 등 보통 사이트 맨 아래를 보면 얻을 수 있는 정보들로 구성된다.

 

(일단 이렇게 정리해두겠지만 나중에 웹사이트들은 실제로 어떻게 구성되어 있는지 실력이 좀 더 쌓이면 한번 파 해쳐 봐야겠다.

그리고 여기에 링크 걸어 수정해야겠다....)

 

 

html tag 정리 2

 

<div>

: div(Division)는 특정 구역, 영역을 정의함. 

 

<dl>, <dt>, <dd>

: 같이 사용하는 세트라 한 번에 적었다. <dl>은 용어나 이름을 리스트로 정의하고, <dt>는 용어/이름을 정의하는 태그, <dd>는 그 용어/이름을 설명하는 태그이다.

<dl>
   <dt>html</dt>
   <dd>: 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다. 
   하이퍼텍스트를 작성하기 위해 개발되었다.</dd>
   
   <dt>java</dt>
   <dd>: 객체 지향 프로그래밍 언어</dd>
</dl>

 

<form>

: 사용자로부터 입력을 받는 입력 폼(form)이다.

이 <form> 태그는 아래와 같은 요소(element)들과 같이 구성된다.

<button>, <fieldset>, <input>, <label>, <option>, <optgroup>, <select>, <textarea>, <legend>

 

또한 form이 가지는 속성(Attribute)은 아래와 같다.

accept, accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target

(form은 따로 사용법을 정리해야겠다.)

 

    <form action="/login_page.php" method="get">

        <label for="id">아이디:</label>
        <input type="text" id="id" name="identify"><br><br>

        <label for="pwd">패스워드:</label>
        <input type="password" id="pwd" name="pwd"><br><br>

        <label for="name">이름:</label>
        <input type="text" name="name" id="name"><br><br>
        <input type="submit" value="로그인" id="send">
    </form>

이런식으로 표현이 된다.

 

<span>

: 문장 안에서 특정 영역을 묶어 정의하는 태그. 

    <style>
        div{
            background-color: yellowgreen;
        }
        span{
            background-color: tomato;
        }
        span.t1{
            background-color: pink;
        }
    </style>
</head>
<body>

    <div> 안녕하세요. <span>만나서 반갑습니다.</span> 요즘 날씨가 많이덥죠? </div>
    <P> 안녕하세요. <span class="t1">만나서 반갑습니다.</span> 요즘 날씨가 많이덥죠? </P> 
    
</body>
</html>

간단히 비교하려고 div와 같이 썼는데, 결과를 보면 span은 문장 안에서 span으로 묶인 부분만 색이 들어간 반면 div는 해당 문장을 넘어서 전체에 색이 들어갔다.

 

 

<figure>, <figcaption>, <img>

: figure는 그림이나 사진, 도표, 비디오 등을 담을 수 있게 하는 컨테이너 같은 태그.

figcaption은 figure로 정의된 대상에 설명을 붙이는 태그.

img는 이미지를 넣을 수 있게 하는 태그, src와 alt 속성은 반드시 동반돼야 한다.

(src: 이미지 소스 url을 명시하는 부분,  alt: 이미지를 가져오는데 실패할 경우 대체되는 텍스트)

   <title>Document</title>   
   <style>
        img{
            width:300px; height: 200px;
        }
    
    </style>
</head>
<body>
        <figure>
            <img src="img/owlowl" alt="부엉부엉부엉이">
            <figcaption>부엉이</figcaption> 
        </figure>
</body>
</html>

이미지가 제대로 들어가면 위 처럼 나온다.
이미지를 불러오는데 실패하면 위 처럼 텍스트로 대체 된다.

 

<video>, <audio>

: 오디오파일, 영상파일을 재생하기 위한 태그이다.

이 비디오 태그가 지원하는 형식은 MP4, WebM, Ogg이 있다.

각 브라우저마다 지원하는 형식이 있으니 참고해야 한다. (웬만하면 다 되는거 같다?)

출처: w3schools.com, video
출처: w3schools.com, audio

 

이 태그가 갖는 속성

속성명 속성값 기능설명
autoplay autoplay 비디오 자동 재생
controls controls 비디오를 재생하고 멈추고 볼륨 등을 조절할 수 있는 컨트롤러 제공
height 픽셀값 비디오 높이 사이즈를 정의
loop loop 반복재생
muted muted 음소거 출력
poster url 비디오 재생 전에 보여지는 이미지
preload auto, metadata, none 웹페이지가 로드될때 비디오와 같이 로드되는 방식을 명시
src url 비디오 소스 위치 명시
width 픽셀값 비디오 너비를 정의

( *preload => auto: 비디오 자동 다운로드 / metadata: 비디오의 기본적인 정보만 가져옴 / none: 비디오를  미리 다운받지 않음 )

※ autoplay속성을 명시했다면 preload속성은 무시됨

 

<video src="sound/Pool ball being hit.mp4" poster="img/owlowl.jpg" 
autoplay loop width="400px" height="400px" controls preload="metadata"></video>

<audio src="sound/sound1.mp3" controls autoplay></audio>

 

'HTML, CSS' 카테고리의 다른 글

[HTML] 태그(tag) 여러개 한번에 쓰기 / Emmet Abbreviation  (0) 2021.07.16
[HTML] html tag 정리  (0) 2021.07.13
'HTML, CSS' Related Articles more