안녕하세요, 여행벌입니다.

이번 포스팅에서는 웹에서의 이미지에 대해 알아보고 이미지를 삽입할 때 사용하는 태그와 다양한 속성을 살펴보겠습니다.

웹에서 사용하는 이미지 형식

 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 다음과 같은 파일 형식만 사용할 수 있습니다. 다른 형식으로 된 이미지 파일을 사용하려면 형식 변환을 해야 합니다.

<img> 태그 - 이미지 삽입하기

 웹 문서에 이미지를 삽입할 때는 <img> 태그를 사용합니다.

src 속성 - 이미지 파일 경로 지정하기

 src 속성을 사용해 이미지 파일이 있는 경로를 알려 주어야 화면에 이미지를 표시할 수 있습니다. src 속성을 이용하면 내 컴퓨터의 이미지 파일을 불러올 수도 있고, 웹 상의 링크를 복사해 이미지를 불러올 수도 있습니다.

 images 라는 이름의 폴더 안에 있는 image1 을 불러와보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>이미지 삽입하기</title>
</head>
<body>
  <h1>내 컴퓨터의 이미지 파일 불러오기</h1>
  <img src="images/image1.jpg">
</body>
</html

 물론, 다른 사용자 입장에서는 해당 이미지 파일이 없기 때문에 같은 html 파일을 열어도 이미지가 보이지 않습니다. 따라서, 웹 문서를 공유하려면 FTP 서버에 웹 문서와 함께 이미지 파일도 올려야 합니다.

 이번에는 웹 상에 있는 image 를 링크를 통해 불러와보겠습니다.

 제가 예전에 포스팅한 글에 있는 이미지를 불러와보겠습니다.

 (https://travelbeeee.tistory.com/126?category=807507)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>이미지 삽입하기</title>
</head>
<body>
  <h1>내 컴퓨터의 이미지 파일 불러오기</h1>
  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fk.kakaocdn.net%2Fdn%2FYi6Qd%2FbtqyOUNcEnT%2FvcAYZsKONfSSOo3WnVJRB0%2Fimg.jpg">
</body>
</html

 이런 식으로 웹 상에 있는 이미지를 주소를 통해 불러올 수도 있습니다.

alt 속성 - 이미지를 설명해 주는 대체 텍스트

alt 속성을 이용하면 이미지를 설명해 주는 대체 텍스트를 삽입할 수 있습니다. 웹 문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인들은 그 내용을 알 수 없습니다. 따라서, 화면 낭독기에게 어떤 이미지인지 alt 속성을 이용해서 알려 줄 수 있습니다.

 위의 src 속성에서 다뤘던 벌룬이 있는 사진은 다음과 같이 alt 속성을 적용할 수 있을 겁니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>이미지 삽입하기</title>
</head>
<body>
  <h1>내 컴퓨터의 이미지 파일 불러오기</h1>
  <img src="images/image1.jpg" alt="하늘위에벌룬이떠있는사진.">
</body>
</html

width, heigth 속성 - 이미지 크기 조정하기

 이미지 파일을 넣을 때 브라우저 창에 원하는 크기로 조정해 넣고 싶다면 width 속성과 height 속성을 사용해야 합니다. width 속성과 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저에 표시됩니다. 

 기본 형식은 다음과 같습니다. px 를 이용해 이미지 크기를 고정시킬 수도 있고, % 를 이용해 상대적으로 이미지 크기를 조정할 수도 있습니다.

<img src="" width="" height="" alt="">

이상으로 이미지를 불러오고, 크기를 맞추는 <img> 태그 포스팅을 마치겠습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 사용자의 입력을 받는 <form> <label> <fieldset> <legend> 태그  (0) 2020.01.20
[HTML+CSS] 링크를 만들어 주는 <a> 태그  (0) 2020.01.20
[HTML+CSS] 표의 틀을 잡아주는 <thead> <tbody> <tfoot> <col> <colgroup> 태그  (0) 2020.01.20
[HTML+CSS] 표를 만드는 <table> <tr> <td> <th> <caption> <figcaption> 태그  (0) 2020.01.20
[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17

안녕하세요, 여행벌입니다.

저번 포스팅에서 테이블을 만드는 태그들에 대해서 알아봤습니다.

( 저번 포스팅 : https://travelbeeee.tistory.com/235 )

이번 포스팅에서는 테이블을 조금 더 구조적으로 만들 수 있게 도와주는 태그들에 대해서 알아보겠습니다.

<thead> <tbody> <tfoot> 태그 - 표 구조 정의하기

 일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약 내용을 표시하기도 합니다. 이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문, 그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋습니다. 이때 사용하는 태그들이 table의 t와 제목(head), 본문(body), 요약(foot)을 합친 태그입니다.

 <thead> <tbody> <tfoot> 태그를 이용하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있으므로, 화면상으로는 차이가 없을지라도 이용하는 것이 좋습니다. 또, CSS를 사용해 표의 제목 부분과 요약 부분, 본문에 각각 다른 스타일을 적용하는 것도 쉬워집니다.

 

 기본 구조는 다음과 같습니다.

    <table>
        <thead>
            <tr> 제목 </tr>
        </thead>
        <tbody>
            <tr> 본문 </tr>
        </tbody>
        <tfoot>
            <tr> 요약 </tr>
        </tfoot>
    </table>

  예시를 통해 익혀보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>표 만들기</title>
	<style>
	</style>
</head>
<body>
	<table border="1">
		<caption>표의 상단 제목</caption>
		<thead>
			<tr>
				<th>thead제목</th>
				<th>thead1</th>
				<th>thead2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>tbody1제목</th>
				<td>tbody1-1</td>
				<td>tbody1-2</td>
			</tr>
			<tr>
				<th>tbody2제목</th>
				<td>tbody2-1</td>
				<td>tbody2-2</td>
			</tr>
			<tr>
				<th>tbody3제목</th>
				<td>tbody3-1</td>
				<td>tbody3-2</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>tfoot제목</th>
				<td>tfoot1</td>
				<td>tfoot2</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

 caption 태그를 이용해 표의 상단에 제목을 주고, thead 태그, tbody 태그, tfoot 태그를 이용해 제목, 본문, 요약으로 표를 구분했습니다.

<col> <colgroup> 태그 - 여러 열 묶어 스타일 지정하기.

 표에서 하나의 열에 스타일을 지정하고 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다. <col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 따로 없습니다. <col> 태그에 span 속성을 이용하면 몇 개씩 묶어서 스타일을 적용할지 지정할 수 있습니다. <colgroup> 태그를 사용해서도 여러 열을 묶어 스타일을 적용할 수 있습니다. <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣으면 됩니다. 이때 주의할 점은 <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr> <td> 태그 전에 사용해야 합니다.

 

 2행 4열 테이블을 만들어, 2~3열에는 파란색을 4열에는 노란색 스타일을 적용해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>표 만들기</title>
	<style>
	</style>
</head>
<body>
	<table border="1">
		<caption>colgroup 연습</caption>
		<colgroup>
			<col> // 열 개수를 맞추기 위해.
			<col span="2" style="background-color:blue;">
			<col style="background-color:yellow">
		</colgroup>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

 1열에는 아무런 스타일을 적용하지 않으므로 <col> 태그만 선언해 열 개수를 맞춰줍니다.

 결과는 다음과 같이 2 ~ 3열은 파란색, 4열은 노란색 스타일이 적용되는 것을 볼 수 있습니다. 

행을 묶는 태그

 표를 만들 때 <tr> 태그로 행을 만든 후 그 안에 필요한 개수만큼 열을 만드므로 애초에 행은 <tr> 태그로 조절합니다. 따라서 행을 묶는 태그는 따로 없습니다.

이상으로 포스팅을 마치겠습니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 링크를 만들어 주는 <a> 태그  (0) 2020.01.20
[HTML+CSS] 이미지를 삽입하는 <img> 태그  (1) 2020.01.20
[HTML+CSS] 표를 만드는 <table> <tr> <td> <th> <caption> <figcaption> 태그  (0) 2020.01.20
[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 테이블을 만드는 태그들에 대해서 다뤄보겠습니다.

<table> 태그 - 표 윤곽 잡기.

 <table> 태그를 이용해서 표 전체 윤곽을 잡습니다.

<tr> 태그 - 행 만들기.

 <table> 태그 안에 <tr> 태그를 추가하면 행이 생깁니다.

<td> 태그 - 열 만들기.

 <tr> 태그 안에 <td> 태그를 추가하면 열이 생깁니다.

<th> 태그 - 표에 제목 셀 만들기

 표를 만들다 보면 첫 번째 행이나 첫 번째 열에 셀의 제목을 넣는 경우가 많습니다. 그럴 때 <th> 태그를 이용하면 다른 글자보다 굵게 표시되고 셀의 중앙에 자동으로 배치가 됩니다.

 

 2행 3열짜리 표를 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>첫 번째 제목</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <th>두 번째 제목</th>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>
</body>
</html>

 테이블을 눈으로 쉽게 구분하기 위해 border 속성을 적용했습니다.

 <th> 태그를 이용하면 다른 글자보다 굵게 표시되고 셀의 중앙에 배치되는 것을 확인할 수 있습니다.

rowspan, colspan 속성 - 행 또는 열 합치기.

 행을 이루는 <tr>, <th> 태그에 rowspan 속성 값을 적용하면 행을 합칠 수 있습니다.

 기본 형은 다음과 같습니다.

<tr rowspan="합칠 행의 개수"> 내용 </td>
<th rowspan="합칠 행의 개수"> 내용 </td>

 마찬가지로 열을 이루는 <td>, <th> 태그에 colspan 속성 값을 적용하면 열을 합칠 수 있습니다.

 기본 형은 다음과 같습니다.

<td colspan="합칠 열의 개수"> 내용 </td>
<th colspan="합칠 열의 개수"> 내용 </td>

 위에서 만들었던 2행 3열 테이블에서 제목 셀을 행 합치기를 적용하고, 1행 2열과 3열에 열 합치기를 적용해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2">제목</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td colspan="2">2행 2~3열</td>
        </tr>
    </table>
</body>
</html>

 <th> 행은 두 번째 행과 rowspan에 의해 합쳐지므로 하나의 행만 있으면 됩니다. 따라서, 두 번째 <tr> 태그 안에 <th> 태그가 따로 존재하지 않습니다. 마찬가지로 두 번째 <tr> 태그의 2개의 열들도 하나로 합칠 예정이므로 <td> 태그가 하나만 있으면 됩니다.

<caption>, <figcaption> 태그 - 표에 제목 붙이기.

 <catpion> 태그는 <table> 태그 바로 다음에 사용합니다. <caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시되고, 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있습니다.

 <figcaption> 태그는 <figure> 태그와 같이 이용합니다. <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력하고, <caption> 태그와는 다르게 중앙에 정렬되지 않습니다. 또, <table> 태그보다 앞에 사용하면 표 위에 제목이 표시되고, </table> 태그 다음에 추가하면 표 아래에 제목이 표시됩니다.

 

<caption> 태그를 사용해서 표에 제목을 붙여보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>표의 제목입니다.</caption>
        <tr>
            <th rowspan="2">제목</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td colspan="2">2행 2~3열</td>
        </tr>
    </table>
</body>
</html>

표 상단 중앙에 제목이 생긴 것을 확인할 수 있습니다.

 

<figcaption> 태그를 이용해서 표 위와, 아래에 각각 제목을 붙여보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <figure>
        <figcaption>
            표 상단에 제목.
        </figcaption>
        <table border="1">
            <tr>
                <th rowspan="2">제목</th>
                <td>1행 2열</td>
                <td>1행 3열</td>
            </tr>
            <tr>
                <td colspan="2">2행 2~3열</td>
            </tr>
        </table>
    </figure>
</body>
</html>

 표의 상단에 제목이 생겼지만, <catpion> 태그와는 다르게 중앙배치되지 않는 것을 확인할 수 있습니다. 이번에는 표 하단에 제목을 붙여보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <figure>
        <table border="1">
            <tr>
                <th rowspan="2">제목</th>
                <td>1행 2열</td>
                <td>1행 3열</td>
            </tr>
            <tr>
                <td colspan="2">2행 2~3열</td>
            </tr>
        </table>
        <figcaption>
            표 하단에 제목.
        </figcaption>
    </figure>
</body>
</html>

 표의 하단에 제목이 생겼지만, <caption> 태그와는 다르게 중앙 배치 되지않는 것을 확인할 수 있습니다.

위에서 다룬 태그들을 이용하면 원하는 테이블을 모두 만들 수 있습니다.

이상으로 테이블 태그 포스팅을 마치겠습니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 이미지를 삽입하는 <img> 태그  (1) 2020.01.20
[HTML+CSS] 표의 틀을 잡아주는 <thead> <tbody> <tfoot> <col> <colgroup> 태그  (0) 2020.01.20
[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 목록을 만드는 태그들에 대해서 다뤄보겠습니다.

<ul> <li> 태그 - 순서 없는 목록 만들기

 순서가 필요하지 않은 목록(unordered list)을 만들 때는 <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다. <ul> 태그의 경우 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다. CSS를 이용하면 불릿을 수정할 수 있습니다.

<ol> <li> 태그 - 순서 있는 목록 만들기

 순서가 필요한 목록(ordered list)을 만들 때는 <ol> 태그를 사용하고 <ol> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다. <ul> 태그와 사용 방법은 같으나 <ol> 태그에는 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다.

 type 속성 : 1(숫자, 기본값)  a(영문 소문자)  A(영문 대문자)  i(로마숫자 소문자)  I(로마숫자 대문자)

 start 속성 :  순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있습니다.

 reversed 속성 : 항목을 역순으로 표시합니다.

<dl> <dt> <dd> 태그 - 설명 목록 만들기

 <dl> 태그는 '제목'과 설명이 한 쌍인 설명 목록(description list)을 만듭니다. <dl> 태그는 목록을 만들고 <dt> 태그는 제목을 <dd> 태그는 설명을 표시합니다.

 

 예시를 통해서 익혀보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>기초문법#4 예제</title>
</head>
<body>
    <p>중국집 메뉴(ul, li)</p>
    <ul>
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>볶음밥</li>
        <li>탕수육</li>
        <li>양념탕수육</li>
    </ul>
    <p>중국집 메뉴(ol, li type = 1)</p>
    <ol type=1>
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>볶음밥</li>
        <li>탕수육</li>
        <li>양념탕수육</li>
    </ol>
    <p>중국집 메뉴(ol, li type = i)</p>
    <ol type=i>
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>볶음밥</li>
        <li>탕수육</li>
        <li>양념탕수육</li>
    </ol>
</body>
</html>

 <ol> 태그는 type 에 따라서 목록을 표시해주는 방법이 달라지는 것을 확인할 수 있습니다.

 reversed 속성을 추가해보겠습니다.

    <p>중국집 메뉴(ol, li type = 1)</p>
    <ol type=1 reversed=true>
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>볶음밥</li>
        <li>탕수육</li>
        <li>양념탕수육</li>
    </ol>

 reverse 속성에 의해 순서가 반대로 표시되는 것을 확인할 수 있습니다.

 

 이번에는 start 속성을 추가해보겠습니다.

    <p>중국집 메뉴(ol, li type = i)</p>
    <ol type=i start=3>
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>볶음밥</li>
        <li>탕수육</li>
        <li>양념탕수육</li>
    </ol>

 start 속성을 추가하면 다음과 같이 3부터 시작합니다.

 

 <dl> <dt> <dd>태그도 예시를 통해서 익혀보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>제주 올레</title>
</head>
<body>
	<h1>제주 올레 </h1>
	<dl>
		<dt>올레 1코스</dt>
		<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
		<dd>거리 : 14.6km(4~5시간)</dd>
		<dd>난이도 : 중</dd>
		<dt>올레 2코스</dt>
		<dd>코스 : 광치기 해변 - 온평 포구</dd>
		<dd>거리 : 14.5km(4~5시간)</dd>
		<dd>난이도 : 중</dd>
	</dl>
</body>
</html>

<dl> <dt> <dd> 태그를 이용하면 위와 같이 설명 목록을 만들 수 있습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 표의 틀을 잡아주는 <thead> <tbody> <tfoot> <col> <colgroup> 태그  (0) 2020.01.20
[HTML+CSS] 표를 만드는 <table> <tr> <td> <th> <caption> <figcaption> 태그  (0) 2020.01.20
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17

+ Recent posts

티스토리툴바