그 밖에 다양한 텍스트 관련 태그

04-2 목록 만들기

순서 목록을 만드는 \

, \
1. 태그

• 순서 목록: 각 항목을 순서대로 나열한 것
• \
  , \
  1. 태그 사용

<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

순서 없는 목록을 만드는 \

, \
• 태그

• 순서 없는 목록: 항목의 순서가 중요하지 않을 때 사용
• \
  , \
  • 태그 사용

  <ul>
    <li>항목1</li>
    <li>항목2</li>
  </ul>

  
  

  설명 목록을 만드는 \, \, \ 태그

  • 설명 목록이란 이름과 값 형태로 구성된 목록
  • 이름 부분을 지정하는 \ 태그와 값 부분을 지정하는 \ 태그로 구성

  <dl>
    <dt>이름</dt>
    <dd>이름</dd>
  </dl>

  
  

  04-3 표 만들기

  표의 구성 요소 알아보기

  • 행(row)
  • 열(column)
  • 셀(cell)

  표를 만드는 \, \ 태그와 셀을 만드는 \

  태그

  <table>
  <caption>표 제목</caption>
</table>

  행를 만드는 \

  , \

  태그 \ 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정 \ 태그는 행을 만들고 \ 태그는 행 안에 있는 셀을 만들기 때문에 \ 태그 안에 \, \, \, \ 행과 열을 합치는 rowspan, colspan 속성 알아보기 <td rowspan="합칠 셀의 개수">내용</td> <td colspan="합칠 셀의 개수">내용</td> 열을 묶어 주는 \ , \ 태그 <colgroup> <col> <col> ... </colgroup> 04-4 이미지 삽입하기 이미지 삽입하는 \ 태그 <img src="이미지 파일 경로" alt="대체 텍스트"> 이미지 파일 경로를 나타내는 src 속성 웹 문서와 같은 폴더에 있는 이미지 파일 경로 넣기 <img src="tangerines.jpg"> 웹 문서 하위 폴더에 있는 이미지 파일 경로 넣기 <img src="images/tangerines.jpg"> 이미지에 대체용 텍스트 넣기 <img src="images/tangerines.jpg" alt="레드향"> <h1>레드향</h1> 이미지 크기를 조절하는 width, height 속성 웹 요소에 설명 글 붙이기 \ 태그와 \ 태그 \ 태그는 도표나 일러스트, 이미지, 소스 코드 등 독립된 콘텐츠를 나타냄 문서의 내용과 구별되는 요소의 의미에서 붙이는 것 <figure> <img src="images/spring.png" alt="제주의 봄"> </figure> \ 태그는 주로 \ 태그와 함께 시용해서 설명 글을 추가할 때 사용 srcset 속성 사용해서 이미지 삽입하기 srcset이라는 속성은 한꺼번에 이미지 정보를 여러 개 알려 주고 화면 너비나 해상도에 따라 이미지를 적절하게 표시하는 것 <img src="기본 이미지" srcset="[파일1, 파일2, 파일3, ...]" alt="대체 텍스트"> w 서술자 사용하기 w는 이미지 파일의 너비를 가리킴 large.png 1000w x 서술자 사용하기 x는 장치의 픽셀 비율을 가리킴 <img src="sky.png" srcset="sky-1.png 1x, sky-2.png 2x" alt="파란 하늘 사진"> 04-5 오디오와 비디오 삽입하기 다양한 멀티미디어 파일을 삽입하는 \, \ 태그 \ 태그 \ 태그는 오디오 파일뿐만 아니라 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용 <object width="너비" height="높이" data="파일"></object> data 속성에 보여 줄 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정함 <object width="900" height="800" data="product.pdf"></object> \ 태그 \ 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입 src 속성을 사용해 삽입할 멀티미디어 파일을 지정함 <embed src="파일 경로" width="너비" height="높이"> <embed src="medias/spring.mp3"> 웹 브라우저에 지원하는 멀티미디어 파일의 종류 웹 브라우저에서 지원하는 오디오, 비디오 파일의 형식은 여러 가지가 있음 오디오와 비디오 파일을 삽입하는 \, \ 태그 오디오와 비디오 파일 삽입하기 음악이나 효과음 등 오디오 파일을 삽입할 때는 \ 태그를 사용 비디오 파일을 삽입할 때는 \ 태그를 사용 <audio src=" 오디오 파일 경로"></audio> <video src=" 비디오 파일 경로"></video> \, \ 태그의 속성 알아보기 섬네일 이미지 삽입하기 \ 태그의 poster 속성은 섬네일 이미지를 삽입할 때 사용 <video src="medias/salad.mp4" controls width="700" poster=" images/salad.jpg></video> 비디오 파일 자동 재생하기 비디오 파일을 자동 재생하고 싶다면 소리를 제거해야 함 muted: \ 태그에서 소리를 제거하는 속성 muted 속성과 autoplay 속성을 함께 사용해야 비디오를 자동 재생할수 있음 <h1>웹 문서에 비디오 파일 삽입하기</h1> <video src="medias/salad.mp4" controls width=1700" poster="images/salad.jpg" muted autoplay loop></video> 04-6 하이퍼링크 삽입하기 링크를 삽입하는 \ 태그와 href 속성 \: 링크를 만듦 <a href=" 링크할 주소">텍스트 또는 이미지</a> 텍스트 링크 만들기 \와 \ 태그 사이에 링크로 만들 텍스트를 입력 href 속성에는 텍스트를 클릭했을 때 연결할 문서의 경로와 파일명을 넣으면 됨 <div> <p><a href="order.html">주문서 작성하기</a></p> </div> 텍스트에 링크를 추가하면 텍스트에 밑줄이 생기면서 글자색이 검은색에서 파란색으로 바뀜 한 번이라도 클릭한 텍스트 링크는 자주색으로 바뀜 이미지 링크 만들기 \ 태그를 사용해 이미지에 링크를 추가 <a href="order.html"><img src="images/tangerines.jpg" alt="레드향"></a> 링크를 새 탭에서 열어 주는 target 속성 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열림 <div> <p><a href="order.html" target="_blank">주문서 작성하기</a></p> </div> 한 페이지 안에서 점프하는 앵커 만들기 \ 태그를 사용하면 한 페이지 안에서 이동하는 링크를 만들 수 있음 페이지가 긴 웹 문서에서 메뉴를 클릭했을 때 내용이 있는 위치로 한 번에 이동할 수 있는 기능 <태그 id="앵커명">내용</태그> <a href="#앵커명">링크</a> 각 제목에 id를 사용해 앵커 이름을 지정 링크를 만들 때 # 다음에 이동할 앵커 이름을 붙임 <ul> <li><a href="#info">레드향</a></li> <li><a href="#recipe">레드향 샐러드 레시피</a></li> <li><a href="#product">상품 구성</a></li> </ul> ... <h1 id="info">레드향</h1> ... <h2 id="recipe">레드향 샐러드 레시피</h2> ... <h2 id="procuct">상품 구성</h2> ... 태그가 모두 모여야 만들 수 있음 <table> <tr> <td>1행 1열</td> <td>1행 2열</td> </tr> <tr> <td>2행 1열</td> <td>2행 2열</td> </tr> </table> 표의 구조를 지정하는 \