본문 바로가기
Front end/HTML

웹 문서에 다양한 내용 입력하기

by re-hwi 2022. 8. 15.

이번 단원에서는  웹의 내용을 조금 더 풍성하게 돕는 여러가지 태그를 배웠다. 평소에 쉽게 접하는 테이블, 리스트와 같은 것들인데 내가 생각했던 것 보다는 더 복잡했던 것 같다.

 

또 이미지를 내가 원하는 이미지를 넣어보려고 했었는데 자꾸 화면에 보이지 않아 고민하던 중 이미지 파일의 경로를 해당 파일 안에 넣어야 한다는 것도 알 수 있었다.

텍스트 입력 태그

  • <h1> ~ </h1> : 1부터 6까지 제목을 의미
  • <p> ~ </p> : 글의 한 단락
  • <br> : 줄바꿈
  • <blockquote> ~ </blockquote> : 인용문 
  • <strong> ~ <strong> : 굵은 글씨로 강조
  • <b> ~ </b> : 굵은 글씨체로 형태만 변환
  • <em> ~ </em> : 기울임꼴로 강조
  • <i> ~ </i> : 기울임꼴로 형태만 변환

다양한 태그를 이용한 텍스트 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>
    레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이
    붉고 통통하다.
  </p>
  <p>
    <i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br>
    혈액순환<sup>1</sup> <ins>또는</ins> 감기예방<sub>2</sub>등에
    좋<del>은 것으로 알려져 있</del>다.
  </p>
  <h2>레드향 샐러드 레시피</h2>
  <h2>상품 구성</h2>
</body>

</html>

 

미리보기

상품 소개 페이지

레드향

껍질에 붉은 빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환1 또는 감기예방2등에 좋은 것으로 알려져 있다.

레드향 샐러드 레시피

상품 구성

목록과 관련된 태그

  • <ol> ~ </ol> : 순서가 있는 목록을 만들기 위한 태그
  • <ul> ~ </ul> : 순서가 없는 목록을 만들기 위한 태그
  • <li> ~ </li> : list를 줄임말. ol 태그 안에서 사용하면 순서를 나타내고 ul 태그 안에서 사용하면 앞에 있는 것처럼 동그라미를 나타낸다.
  • <dl> ~ </dl> : 사전의 시작과 끝을 알리는 태그
  • <dt> ~ <dt> : 단어의 이름을 지정하는 태그,
  • <dd> ~ </dd> : 단어의 설명을 지정하는 태그

다양한 태그를 이용한 목록

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>탐라국 입춘굿</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <div id="container">
    <h1>탐라국 입춘굿</h1>    
    <p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.</p>
    <p>제주에서 입춘은 새철 드는 날. <br>
      신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>
    <h3>일정</h3>
    <ul>
      <li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
      <li>낭쉐코사 : 2/1(토)</li>
      <li>거리굿 : 2/2(일)</li>
      <li>열림굿 : 2/3(월)</li>
      <li>입춘굿 : 2/4(화)</li>
    </ul>
    <h2>먹거리</h2>
  </div>
</body>
</html>

 

미리보기

탐라국 입춘굿

탐라국 입춘굿

탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.

제주에서 입춘은 새철 드는 날.
신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.

일정

  • 입춘맞이 : 1/27(월) ~ 1/31(금)
  • 낭쉐코사 : 2/1(토)
  • 거리굿 : 2/2(일)
  • 열림굿 : 2/3(월)
  • 입춘굿 : 2/4(화)

먹거리

표와 관련된 태그

  • <table> ~ </table> : 테이블의 시작과 끝을 알리는 태그
  • <caption> ~ </caption> : 테이블의 제목을 지정해주는 태그
  • <tr> ~ </tr> : 테이블의 행을 나타내는 태그
  • <td> ~ </td> : 행 안의 셀을 만드는 태그
  • <thead> ~ </thead> : 테이블의 헤드
  • <tbody> ~ </tbody> : 테이블의 본문
  • <tfoot> ~ </tfoot> : 테이블의 요약

다양한 태그를 이용한 테이블

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    table, th, td {
      border:2px solid #ccc;
      border-collapse: collapse;
    }
    th, td { padding:10px 20px; }
  </style>
</head>
<body>
  <img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
  <img src="images/salad.jpg" width="320">
  <hr>
  <h2>상품 구성</h2>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:rgb(238, 238, 238);">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>
    <tfoot>
      
      <th colspan="4">
        개졸리당
      </th>
    </tfoot>        
  </table>
</body>
</html>

 

미리보기

상품 소개 페이지 레드향

레드향

껍질에 붉은 빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

레드향 샐러드 레시피

재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g

드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

상품 구성

선물용과 가정용 상품 구성
용도 중량 갯수 가격
선물용 3kg 11~16과 35,000원
5kg 18~26과 52,000원
가정용 3kg 11~16과 30,000원
5kg 18~26과 47,000원
개졸리당

이미지 삽입 태그

  • <img> ~ <img> : 이미지를 불러오는 태그. 사용할 때에는 src 와 alt 를 같이 사용하여 이미지를 불러온다.
  • src = '' : img 태그 안에 사용되는 속성. 따옴표 안에 사진의 주소를 입력한다.
  • alt = '' : img 태그 안에 사용되는 속성. 따옴표 안에 사진의 설명을 입력한다.
  • widgh = ''  : img 태그 안에 사용되는 속성. 따옴표 안에 사진의 가로 길이를 입력한다. 이 때 px 또는 % 를 이용할 수 있다. 
  • hight = '': img 태그 안에 사용되는 속성. 따옴표 안에 사진의 세로 길이를 입력한다. 이 때 px 또는 % 를 이용할 수 있다. 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <hr>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
  <ol>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>
  <p>원래 크기의 이미지</p>
  <img src="images/salad.jpg" alt="레드향">
  <p>width="50%", height="50%"로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="50%">  
  <p>width="150"으로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="150">
</body>
</html>

src 사이에 사진의 주소를 입력한다. 이 때 사진의 주소가 해당 파일 안에 있어야한다.

 

오디오와 비디오 삽입 태그

  • <audio> ~ </audio> : 오디오 파일을 불러오는 태그
  • <vidio> ~ </vidio> : 비디오 파일을 불러오는 태그

audio / vidio 태그의 속성

  • controls : 플레이어 화면에 컨트롤 바를 표시
  • autoplay : 오디오나 비디오를 자동으로 실행
  • loop : 오디오나 비디오를 자동으로 실행
  • muted : 오디오나 비디오의 음향효과를 제거
  • preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지
  • width, hight : 비디오 파일의 가로 세로 넓이를 지정
  • poster = '파일이름' : 비디오 태그의 속성으로 비디오가 재생되기 전 화면에 표시될 포스터 이미지를 지정

 

하이퍼링크 삽입

  • <a> ~ </a> : 링크를 삽입하는 태그. 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 된다
  • href : <a> 태그의 속성. 링크할 주소를 입력한다. 
반응형
저작자표시

'Front end > HTML' 카테고리의 다른 글

입력 양식 작성하기 (2)  (3) 2022.08.19
입력 양식 작성하기 (1)  (0) 2022.08.16
HTML 기본 문서 만들기  (0) 2022.08.14
웹 개발 시작하기  (0) 2022.08.13
Doit HTML + CSS + JavaScript 출처  (0) 2022.08.11

관련글

댓글

티스토리툴바