728x90

웹에서 사용하는 대표적인 이미지 파일로는 크게 세가지가 있다.

  • GIF (graphic interchange format) : 
    최대 256가지의 색상을 표시할 수 있다.
    다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용한다.

  • JPG / JPEG (joint photographic experts group) :
    GIF보다 색상과 명암을 다양하게 표현할 수 있다.
    이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있다.

  • PNG (portable network graphics) :
    네트워크용으로 개발된 파일 형식이다.
    색상을 다양하게 표현하면서 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용된다.

<img> : 이미지 삽입 태그 (image)

 

가장 기본이 되는 태그로 다양한 속성을 통해 웹 문서에 이미지를 삽입할 수 있다.

 

<img src="이미지 파일 경로" alt="대체용 텍스트">

  • src : 이미지 파일의 경로 (image soruce)
    하위 폴더를 포함한 경로를 작성해야 한다.

  • alt : 대체용 텍스트 (an alternate text for an image)
    화면 낭독기와 같은 보조기기에서 이미지를 대신해서 읽어 줄 텍스트
    인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을때 등의 이유로 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 나타난다.
  <img src="images/tangerines.jpg" alt="레드향">

  • width : 이미지의 너비 
  • height : 이미지의 높이
    <img> 태그로 이미지를 삽입하면 원래 이미지 크기대로 표시되는데,
    이를 이미지파일을 수정하지 않고 웹 브라우저 창에서 보이는 크기만 조절하고 싶을 때 사용한다.
    둘 중 하나의 속성만 지정했을 경우 나머지 속성의 비율은 자동으로 계산되어 나타난다.
    그키의 단위는 퍼센트(%)와 픽셀(px)을 사용한다.
    • % : 퍼센트
      이미지 크기의 값을 퍼센트로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.
      ex) width="50%"
    • px : 픽셀
      이미지 크기의 값을 픽셀로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.
      픽셀을 사용할 경우에는 px 단위를 쓰지 않고 숫자만 입력한다.
      ex) width="150"
  <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">

'웹 개발' 카테고리의 다른 글

[HTML] 하이퍼링크 삽입하기  (0) 2021.12.23
[HTML] 오디오와 비디오 삽입하기  (0) 2021.12.18
[HTML] 표 만들기  (0) 2021.12.17
[HTML] 목록 태그의 종류  (0) 2021.12.16
[HTML] 텍스트 태그의 종류  (0) 2021.12.16
728x90
  • <table> : 표의 시작과 끝
  • <caption> : 표의 제목
    제목은 표의 위쪽 중앙에 표시된다.

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

  • <tr> : 행 만들기 (table row)
    하나 이상의 <td> 태그 혹은 <th> 태그를 포함해야 한다.
  • <td> : 셀 만들기 (table data cell)
  • <th> : 제목 셀 만들기 (table header cell)
    제목과 내용을 구분하기 위해 굵은 서체, 가운데 정렬로 표현된다.

    <table>
       <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
      </tr>
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
      </tr>
    </table>

  • 구조를 지정해 주는 태그
    구조를 지정하면 편리하게 표의 제목, 본문 요약에 각각 다른 스타일을 적용하는 등 편리하게 구분할 수 있다.
    • <thead> : 제목 (table head)
    • <tbody> : 본문 (table body)
    • <tfoot> : 요약 (table foot)
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</th>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>선물용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>가정용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

  • rowspan : 행 합치기
  • colspan : 열 합치기 (colum span)
    행이나 열을 합치는 것은 <td> 태그나 <th> 태그에서 이루어진다.

    <td rowspan="합칠 셀의 개수">셀의 내용</td>
    <td colspan="합칠 셀의 개수">셀의 내용</td>
    <caption>선물용과 가정용 상품 구성</caption>
    <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>        
  </table>



  • <colgroup> :  다수의 <col> 태그 묶어주기 (column group)
    표의 내용이 시작되기 전에 열의 상태를 알려주기 위해 <caption> 태그 다음에 사용된다.
  • <col> : 열 1개 지정하기 (column)
    닫는 태그 없이 단독으로 사용된다.
    스타일 속성을 지정하지 않은 열이 있을 경우에도 각각 태그를 명시해야 한다.

    <colgroup>
      <col>
    <colgroup>
    • span : 같은 스타일 속성을 사용하는 <col> 태그가 있을 경우 묶어주기
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col span="2" 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>        
  </table>

'웹 개발' 카테고리의 다른 글

[HTML] 오디오와 비디오 삽입하기  (0) 2021.12.18
[HTML] 이미지 삽입하기  (0) 2021.12.17
[HTML] 목록 태그의 종류  (0) 2021.12.16
[HTML] 텍스트 태그의 종류  (0) 2021.12.16
[HTML] 시맨틱 태그 (semantic tag)  (0) 2021.12.15
728x90
  • <ol>, <li> : 순서 있는 목록 만들기 (ordered list), (list)
    <ol> 태그 안에 <li> 태그를 삽입한다.

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

    순서 있는 목록은 기본적으로 숫자 1, 2, 3 ... 으로 번호가 붙는다.
    이 때 type 속성을 사용하여 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
    이에 따를 속성값은 다음과 같다.
    종류 설명
    type = "1" 숫자(기본값)
    type = "a" 영문 소문자
    type = "A" 영문 대문자
    type = "i" 로마 숫자 소문자
    type = "I" 로마 숫자 대문자

    또한 순서 목록은 기본적으로 '1' 부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수도 있다.
    <h4>재료 준비</h4>
    <ol type="a">
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    </ol>
    <h4>드레싱 준비</h4>
    <ol type="a" start="3">
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    </ol>
    <h4>샐러드 완성</h4>
    <ol type="a" start="4">
      <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>​


  • <ul>, <li> : 순서 없는 목록 만들기 (unordered list), (list)
    <ul> 태그 안에 <li> 태그를 삽입한다.
    순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여 구분하는데 이를 불릿(bullet) 이라고 한다.

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


  • <dl>, <dt>, <dd> : 설명 목록 만들기 (definition list), (definition term), (definition description)
    <dl> 태그 안에 한 쌍의 <dt>, <dd> 태그를 삽입한다. 이 때 <dt> 태그 하나에 여러개의 <dd> 태그를 사용할 수 있다.

    <dl>
      <dt>이름</dt>
      <dd>값</dd>
    </dl>
      <dl>
        <dt>선물용 3kg</dt>
        <dd>소과 13~16과</dd>
        <dd>중과 10~12과</dd>
      </dl>
      <dl>
        <dt>선물용 5kg</dt>
        <dd>중과 15~19과</dd>​

 

'웹 개발' 카테고리의 다른 글

[HTML] 이미지 삽입하기  (0) 2021.12.17
[HTML] 표 만들기  (0) 2021.12.17
[HTML] 텍스트 태그의 종류  (0) 2021.12.16
[HTML] 시맨틱 태그 (semantic tag)  (0) 2021.12.15
[HTML] HTML의 기본 구조 자동으로 만들기  (0) 2021.12.15
728x90
  • <hn> ~ : 제목 (heading)
    n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.
    숫자가 커질수록 텍스트의 크기는 작아진다.

    <hn>제목</hn>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>


  • <p> : 텍스트 단락 입력 (paragraph)
    편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.
    내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄이 바뀐다.
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 
       일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>​


  • <br> : 한 줄 바꿈 (Line breaking)
    단독으로 사용하는 태그이므로 닫는 태그가 필요없다.

    <p>내용</p>
    <br>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>​


  • <blockquote> : 인용문
    다른 텍스트 보다 약간 들여 쓰여진다. 

    <blockquote>인용문</blockquote>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <blockquote>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>​


  • <b> : 텍스트 굵게 표시 (bold)
  • <strong> : 텍스트 굵게 표시
    <b> 태그와 <strong> 태그는 눈으로 볼 때는 별로 차이가 나지 않지만 화면을 낭독해주는 기능이 필요할 때 강조하고 싶은 중요한 텍스트는 <strong> 태그 사이에, 단순히 글자만 굵게 표시하고 싶을 때는 <b> 태그를 사용한다.

    <b>굵게 표시할 텍스트</b>
    <strong>굵게 표시할 텍스트(강조)<strong>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>​


  • <i> : 텍스트 기울이기 (italic)
  • <em> : 텍스트 기울이기 (emphasis)
    <i> 태그와 <em> 태그도 눈으로 볼 때는 별로 차이가 나지 않지만 <em> 태그는 문장 중에서 특별히 강조하고 싶은 부분에 사용하고, 단순히 글자만 기울여 표시하고 싶을 때는 <i> 태그를 사용한다.

    <i>기울일 텍스트</i>
    <em>기울일 텍스트(강조)<em>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br> 
    <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>​


  • <abbr> : 줄임말 표시 (title 속성을 함께 사용할 수 있다.)
  • <cite> : 참고 내용 표시
  • <code> : 컴퓨터 인식을 위한 소스 코드
  • <small> : 작게 표시해도 되는 텍스트
  • <sub> : 아래 첨자 표시
  • <sup> : 위 첨자 표시
  • <s> : 취소선 표시
  • <u> : 밑줄 표시
  • <ins> : 공동 작업 문서에서 추가한 내용 표시
  • <del> : 공동 작업 문서에서 삭제한 내용 표시

 

+ Recent posts