2020년 7월 16일 목요일

HTML 잘 쓰는 태그

자동 새로고침

1
2
<meta http-equiv="refresh" 
     content="2; url=http://www.digitalbooks.co.kr" />
cs

2초마다 해당 페이지로 이동


스크립트

1
2
3
4
5
<script src="prefixfree.min.js"></script>
<script type="text/javascript" defer>
</script>
<noscript>
</noscript>
cs

cf. defer 은 병렬적으로 로딩하게 해서 응답속도를 높임.

cf. noscript 는 해당 스크립트를 지원하지 않는 브라우저에서 뜰 메시지


Base

1
<base href="http://asdf/html5/" target="_blank" />
cs

기본 디릭터리 지정


HTML 내부에서 이동

1
2
3
<a href="#alpha">Move To Alpha</a>
...
<h1 id="alpha">
cs

href="#id" 을 사용


글자형태

1
2
3
4
5
6
7
8
9
<body>
    <h1><b>볼드</b></h1>
    <h1><i>이텔릭</i></h1>
    <h1><small>작은글자</small></h1>
    <h1>글<sub>아래첨자</sub></h1>
    <h1>글<sup>윗첨자</sup></h1>
    <h1><ins>밑줄</ins></h1>
    <h1><del>가운데 줄</del></h1>
</body>
cs


루비글자

1
2
3
4
<ruby>
    <span>台風</span>
    <rt></rt>
</ruby>
cs


정의 목록


1
2
3
4
5
<dl>
    <dt>Definitnion Tag</dt>
    <dd>Definition Definition</dd>
    <dd>Definition</dd>
<dl>
cs

이지만 사실상 탭한거랑 차이가 없음.


테이블

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table border="1">
    <caption>Caption</caption>
 
    <colgroup>
        <col span="2" style="background:red" />
        <col style="background:blue" />
    </colgroup>
 
    <thead style="background:green">
        <tr>
            <th>table Header</th>
            <th>table Header</th>
            <th>table Header</th>
        </tr>
    </thead>
 
    <tbody>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td colspan="3">data 11</td>
        </tr>
        <tr>
            <td>data 11</td>
            <td>data 12</td>
            <td>data 12</td>
        </tr>
    </tbody>
 
    <tfoot style="background:yellow">
        <tr>
            <td>data 11</td>
            <td>data 12</td>
            <td>data 12</td>
        </tr>
        <tr>
            <td>data 11</td>
            <td>data 12</td>
            <td>data 12</td>
        </tr>
    </tfoot>
</table>
cs


이미지

1
<img src="이미지.png" alt="이미지 없을 때 글자" width="300"
cs

cf. placehold.it 에서 임시 이미지파일 있음


오디오

1
2
3
4
<audio src="audio.mp3" type="audio/mp3"
           controls="controls" loop="loop" 
           autoplay="autoplay" preload="auto">
</audio>
cs



동영상

1
2
3
4
5
<video controls="controls" width="640" height="360" poster="http://placehold.it/640x360">
    <source src="video1.mp4" type="video/mp4" />
    <source src="video2.webm" type="video/webm" />
    <track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
</video>
cs



입력양식

input

1
2
3
4
5
6
7
8
9
10
11
12
<form>
    <input type="text" /><br />
    <input type="button" /><br />
    <input type="checkbox" /><br />
    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" /><br />
    <input type="reset" /><br />
    <input type="submit" /><br />
</form>
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
    <input type="color" /><br />
    <input type="date" /><br />
    <input type="datetime" /><br />
    <input type="datetime-local" /><br />
    <input type="email" /><br />
    <input type="month" /><br />
    <input type="number" /><br />
    <input type="range" /><br />
    <input type="search" /><br />
    <input type="tel" /><br />
    <input type="time" /><br />
    <input type="url" /><br />
    <input type="week" /><br />
</form>
cs

1
2
3
<form>
    <textarea>asdf</textarea>
</form>
cs

select

1
2
3
4
5
6
<select multiple="multiple">
    <option>미래</option>
    <option>양념</option>
    <option>홍수</option>
    <option>마녀</option>
</select>
cs


1
2
3
4
5
6
7
8
9
10
<select>
    <optgroup label="asdf">
        <option>asdf</option>
        <option>asdf</option>
    </optgroup>
    <optgroup label="asddf">
        <option>asdf</option>
        <option>asdf</option>
    </optgroup>
</select>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
    <fieldset>
        <legend>입력 양식</legend>
        <table>
            <tr>
                <td><label for="name">이름</label></td>
                <td><input id="name" type="text" /></td>
            </tr>
            <tr>
                <td><label for="mail">이메일</label></td>
                <td><input id="mail" type="email" /></td>
            </tr>
        </table>
        <input type="submit" />
    </fieldset>
</form>
cs

fieldset 으로 테두리
legend 로 이름 지정


공간분할

<div> 와 <span> 의 차이
=> 전자는 Block 방식(다음줄로 넘어감), 후자는 inline 방식(다음줄로 안넘어감)


시멘틱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <header>
        <h1>제목</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">링크</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>제목</h1>
            <p>글이 많이 들어가야함</p>
        </article>
    </section>
    <aside>
        <p>사이드에 들어가야 함</p>
    </aside>
    <footer>
        <span>밑에 서울특별시 어쩌고 주소</span>
    </footer>
</body>
cs

아무 역할 없고 의미전달용으로 쓰이는 태그

라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)

List