4. TAG
4.1 List TAG
List tag(목록)
- 순서없는 목록 (Unordered List)
<body> <h2>순서없는 목록 (Unordered List)</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body>순서없는 목록 (Unordered List)
- Coffee
- Tea
- Milk
- 순서있는 목록 (Ordered List)
<body> <h2>순서있는 목록 (Ordered List)</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body>순서있는 목록 (Ordered List)
- Coffee
- Tea
- Milk
-
type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정가능.
value 설명 “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 -
start 어트리뷰트를 사용하여 리스트 시작값 지정가능.
-
reversed 어트리뷰트를 지정하면 리스트 순서값을 역으로 표현
- 중첩 목록
<h2>중첩 목록</h2> <ul> <li>Coffee</li> <li>Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li> </ul>
list tag(ol,ul)은 navigation 메뉴를 만들 때 자주 사용.중첩 목록
- Coffee
- Tea
- Black tea
- Green tea
- Milk
- 순서없는 목록 (Unordered List)
4.2 Table TAG
-
Table tag(테이블)
table 생성 시 사용하는 태그.
tag Description table 표를 감싸는 태그 tr 표 내부의 행 (table row) th 행 내부의 제목 셀 (table heading) td 행 내부의 일반 셀 (table data) 
<table border="1"> <tr> <th>First name</th> <th>Last name</th> <th>Score</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>First name Last name Score Jill Smith 50 Eve Jackson 94 John Doe 80 row를 순차적으로 써주는 개념이며, row에 column이 포함되어있어 내부 열값들을
<tr>안에 작성해준다. 이 때 첫 행을 안에th로 헤더를 표시, 이후는td로 값들을 표시해준다.-
table tag attribute
attribute description border 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) rowspan 해당 셀이 점유하는 행의 수 지정 colspan 해당 셀이 점유하는 열의 수 지정 example)
<h2>2개의 culumn을 span</h2> <table> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h2>2개의 row를 span</h2> <table> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>2개의 culumn을 span
Name Telephone Bill Gates 555 77 854 555 77 855 2개의 row를 span
Name: Bill Gates Telephone: 555 77 854 555 77 855
-
4.3 Multimedia TAG
-
image & multimedia tag(멀티미디어)
이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
-
img tag
- attributes
attribute Description src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지의 너비 (CSS에서 지정하는 것이 일반적) height 이미지의 높이 (CSS에서 지정하는 것이 일반적)
<body> <img src="https://media.istockphoto.com/photos/dog-puppy-on-garden-picture-id1142412984?k=20&m=1142412984&s=170667a&w=0&h=VLomTUSZwXDrVauJrpiyMboe0Q7lUYYiMO89sFy2dgY=" alt="doug" width="400"> <img src="assets/images/wrongname.gif" alt="이미지가 없습니다."> </body>
- attributes
-
audio tag
-
attribute
attribute Description src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. 웹브라우저 별로 지원하는 음악 파일 형식이 다름. 파일 형식에 따라 재생되지 않는 브라우저가 존재 : source 태그를 사용해 파일 형식 차이 문제 해결가능.
브라우저별 파일형식지원)
Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES(24~) YES YES Safari YES YES NO Opera YES(25~) YES YES <audio src="//bit.ly/3euuS7B" controls type="audio/mpeg"></audio>
-
-
video tag
-
attribute
attribute Description src 동영상 파일 경로 poster 동영상 준비 중에 표시될 이미지 파일 경로 preload 재생 전에 동영상 파일을 모두 불러올 것인지 지정 autoplay 동영상 파일을 자동의 재생 개시할 것인지 지정 loop 동영상을 반복할 것인지 지정 controls 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. width 동영상의 너비를 지정 height 동영상의 높이를 지정 웹브라우저 별로 지원하는 비디오 파일 형식이 다름. 파일 형식에 따라 재생되지 않는 브라우저가 존재 : source 태그를 사용해 파일 형식 차이 문제 해결가능.
브라우저별 파일형식지원)
Browser MP4 WebM Ogv Internet Explorer YES NO NO Chrome YES YES YES Firefox YES(21~) YES YES Safari YES NO NO Opera YES(25~) YES YES <!-- 1 --> <video width="640" height="360" controls> <source src="assets/video/wildlife.mp4" type="video/mp4"> <source src="assets/video/wildlife.webm" type="video/webm"> </video> <!-- 2 --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VA5jT7pScpM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
-
-
정선용