mingling

WEB/HTML

[HTML] HTML강의 - ch02

밍글링글링 2017. 8. 22.
728x90
 
[ex01]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title><!-- 다수가 블럭영역 일부가 인라인영역 css를 이용하면 블럭을 인라인으로 서로 수정가능하다. -->
</head>
<body>
    <section><!-- 블럭. -->
        <h2>이용안내</h2><!-- 글자색깔 크기는 css로 변경. -->
            <article><!-- 블럭 -->
                <h3>이곳에서는</h3><!-- 블럭영역 -->
                <p>도로변에 있어서 접근이 용이하고<br>
                    저녁에는 조용합니다.
                </p><!-- 모든영역은 블럭영엉 or 인라인영억 -->
                <div>block</div>블럭<br><!-- div - 블럭영역표시 -->
                <span>inline</span>인라인 <!-- span - Java에서의 print 느낌. 데이터보여줄만큼만 차지 -->
            </article>
    </section>
    
    <blockquote cite="http://www.w3.org/">HTML이란</blockquote> 무엇인가<br><!-- blockquote 블럭 타입까지 생각한 것 -->
    <q cite="https://www.w3.org/">HTML이란</q>무엇인가<!-- cite타입: 부과데이터. 화면에는 출력하지않지만 알았으면 하는 데이터 -->
    <pre>프로그램         소스    적당</pre><!-- 블럭영역 pre: 안에다가 프로그램 소스들을 많이 씀. 빈칸 값대로 모두 출력되는 태그 -->
</body>
</html>

 

[ex02]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
    <mark>형광펜</mark><!-- mark: 형광펜 표시 -->
    <p><time>2016.7.7</time></p><!-- time: 시간데이터 -->
    <p>
        <time datetime="2016-07-07"></time><!-- 속성들은 출력되지 않음. 객체 안에 데이터를 담을 수 있음.-->
        <time datetime="09:00:00"></time>
        <time datetime="2016-07-07T09:00:00"></time>
    </p>
    <p> 
        <strong>strong:강조O, 진하게</strong><br>
        <b>b:강조X, 진하게</b><br>
        <em>em: 강조O, 이탤릭(기울기)</em><br>
        <i>i: 강조X, 이탤릭(기울기)</i>
    </p>
</body>
</html>

 

[ex03]

<!DOCTYPE html> <!-- 데이터를 바꾸기 위해(동적스타일) JSP를 이용 -->
<html>
<head>
<meta charset="UTF-8">
<title>list</title> <!-- 목록을 만드는 태그는 ul, ol, dl 3가지 -->
</head>
<body>
    <ul><!-- 순서 상관X -->
        <li>항복1</li>
        <li>항복2</li>
    </ul>
    
    <ol> <!-- ol: ordered list 순서를 정해주는 것-->
        <li>항복1</li>
        <li>항복2</li>
    </ol>
    
    <ol type="a" start="2"> <!-- a, A, i, I-->
        <li>항복1</li>
        <li>항복2</li>
        <li>항복3</li>
        <li>항복4</li>
    </ol>
    
    <dl> <!-- 정의리스트 생성 (사전)-->
        <dt>젊음</dt><!-- 제목을 지정 -->
        <dd>젊음이 파생되어 젊다가 된다. 순간</dd><!-- 설명 -->
        <dt>늙음</dt>
        <dd>늙다에서 파생되었다. 진행</dd>
    </dl>
</body>
</html>

 

[ex04]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head><!--테이블 구성: row(행)-tr 데이터1개, column(열,셀)-td -->
<body>
    <table>
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
        </tr>        
    </table>
    
    <table>
        <caption>표제목</caption>
        <tr>
            <th>방이름</th><!-- column(셀)의 제목-th -->
            <td>인원수</td>
        </tr>
        <tr>
            <th>유채방</th>
            <td>4인실</td>
        </tr>
        <tr>
            <th>동백실</th>
            <td>2인실</td>
        </tr>
        <tr>
            <th>천혜향방</th>
            <td>4인실</td>
        </tr>        
    </table>
    
    <table border="1">
        <caption>객실</caption>
        <thead> <!-- 테이블의 맨위(테이블 머릿글) -->
            <tr>
                <th>방 이름</th>
                <th>대상</th>
                <th>크기</th>
                <th>가격</th>
            </tr>
        </thead>
        <tfoot><!-- 테이블의 맨 아래로(테이블 바닥글)-->
        <tr>
            <td colspan="4">바깥채 전체를 렌트합니다.</td>
        </tr>
        </tfoot>
        <tbody>
            <tr>
                <th>유채방</th>
                <td>여성 도미토리</td>
                <td rowspan="2">4인실</td>
                <td rowspan="3">1인 20,000원</td>
            </tr>
            <tr>
                <th    >동백방</th>
                <td rowspan="2">동성 도미토리</td>

            </tr>
            <tr>
                <th>천혜향방</th>
                <td>2인실</td>
            </tr>    
        </tbody>
    </table>
</body>
</html>

 

[ex05]

<!DOCTYPE html>
<html>
<head><!-- 현장에서는 상대경로 위주 http통신은 항상 연결이 끊어져있다.
connectionless 물리적, sessionless 논리적
로고, 화면구성은 소스로, 데이터들만 이미지로-->
<meta charset="UTF-8">
<title>link</title>
</head>
<body>
    <a href="ex052.html"><p>이동하기</p></a>
    <p><a href="ex052.html"><img src="img/house.jpg"></a></p><!-- URL은 상대경로//포토샵작업을 했던 로고들을 
 css에서 가능해짐-->
    
    <p>
        <a href="ex052.html" target="_blank">새 탭에서 열기</a>
        <a href="ex052.html" target="content">프레임에서 열기</a>
        <a href="ex052.html" target="_self">현재탭에서 열기</a>
    </p>
    <iframe name = "content"></iframe>
</body>
</html>

 

728x90

'WEB > HTML' 카테고리의 다른 글

HTML 태그 먹히지 않게 하기.  (0) 2018.05.04
[HTML] SVG를 이용하여 색깔 그라데이션 넣기.  (0) 2017.08.28
[HTML] HTML강의 - ch04  (0) 2017.08.22
[HTML] HTML강의 - ch03  (0) 2017.08.22
[HTML] HTML강의 - ch01  (0) 2017.08.22

댓글

티스토리툴바