본문 바로가기
HTML5

21. 01. 26. 목록, 표 만들기.

Levinni 2021. 1. 26. 09:12

태그이름 + 속성 + "속성값" 큰따옴표대신 작은따옴표도 됨.

속성: 태그를 추가적으로 수식하는 것.

 <q cite="http://www.w3.org/standard/webdesign/accessbility">

            웹의 힘은 보편성에 있다. 정애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

 </q>

출력결과- "웹의 힘은 보편성에 있다. 정애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다." 

  • 루비(윗첨자) 사용법
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
</head>
<body>
    <h2>야외 텐트를 닮은 건축물 <mark style="background-color: rgb(226, 253, 198);">"테쉬폰"</mark></h2>
    <p>아일랜드 출신 ... ... 남아 있으며 <span style="color:blue;"국내 근현대 건축사의
        한 페이지를 보여주는 가치를 지닌다</span>고 전문가들을 평가합니다.</p>
       
        <p>루비(Ruby)는 1995년 일본의 프로그래머 마츠모트 유키히로
            <ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>가 만든 프로그래밍 언어입니다.
        </p>
        <p><ruby>大韓民國<rt>대 한 민 국</rt></ruby></p>
</body>
</html>

 

  • 목록 중첩
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>목록 중첩</title>
</head>
<body>
    <ul>
        <li>1일차
            <ol type="a">
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차
            <ol type="a" start="3">
            <li>용눈이오름</li>
            <li>만장굴</li>
            <li>카약체험</li>
            </ol>
        </li>
    </ul>
</body>
</html>

※ html, css에서 시작 숫자는 1, 자바스크립트와 자바는 0.

 

  • dl, dt, dd 목록
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>설명 목록</title>
</head>
<body>
    <dl>
        <dt>올레 1코스</dt>
        <dd>코스 : 시흥초등학교 옆 - 광치기 해변</dd>
        <dd>거리 : 14.6km(4~5시간)</dd>
        <dd>난이도 : 중</dd>

        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 - 온평포구</dd>
        <dd>거리 : 14.6km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
    </dl>
</body>
</html>
  • 표 만들기
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
		table, th, td {border: 1px solid black; }
        table {border-collapse: collapse;}
        th, td {padding:10px;}
    </style>
</head>
<body>
	<table>
    	<tr>
        	<th>제목 셀</th>
            <td>1행 2열</td> <!-- th, td줄 개수가 셀 개수-->
            <td>1행 3열</td>
        </tr>
        <tr>
        	<th>제목 셀</th>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>

표 만들기 결과 캡쳐

  • 표 합치기
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
         table, th, td {border: 1px solid black; }
         table {border-collapse: collapse;}
         th, td {padding:10px; width: 10px; height:10px;}
    </style>
</head>
<body>
	<table>
    	<tr>
        	<td>1</td>
            <td>2</td>
            <td>3</td>
            <td colspan="2">4</td>
        </tr>
        <tr>
        	<td>6</td>
            <td colspan="3", rowspan="2">7</td>
            <td>10</td>
        </tr>
        <tr>
        	<td>11</td>
            <td>12</td>
        </tr>
        <tr>
        	<td colspan="2">16</td>
            <td>18</td>
            <td>19</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
        	<td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>

표 합치기 결과 캡쳐

4열과 5열을 합치려면 앞열(4)에 병합태그를 쓰고 뒷열(5)를 지움. 행도 앞 숫자에 병합태그 쓰기.

각 셀에 숫자를 채워서 생각해보면 됨.

 

과제)

02- index rerult처럼 내 자기소개 쓰기. (aws 메인에 사용할 것임.)

 

03장. 

3-1. 이미지

이미지 파일에서 사용할 수 있는 확장자

        jpg, gif, png, bmp, svg 

        비트맵형 이미지, 벡터형 이미지

        bit map

        100 * 100 = 10000

 

        벡터 > 좌표 (주로 로고나 제품 디자인같이 확대/축소를 해도 깨지지 않는 이미지를 사용해야 할 때)

 

        bmp : 각 비트맵 정보를 순수하게 기록 29.3k (원본)

        손실 압축

        png : 0.5k : 투명가능 32bit

        jpg : 1.75 : 협회에서 만든 압축기법, 색상 표기갯수 24bit 투명표현x

                       (Huffman coding 이용해서 압축한대~!)

        gif : 1.0k : 프레임기록 가능 256색 f(빨초)f(파투명) 투명표현o

 

        wav(원본), mp3, ogg

저작자표시

'HTML5' 카테고리의 다른 글

21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일,  (0) 2021.02.01
21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일  (0) 2021.02.01
21. 01. 28. 4장. 폼  (0) 2021.01.29
21. 01. 27. 3장. 이미지 아이프레임, 링크  (0) 2021.01.27
21. 01. 25~26. 기본 태그  (0) 2021.01.26

'HTML5' Related Articles

티스토리툴바