본문 바로가기
Programming/Web Programming (2021)

[웹프로그래밍 실습] 3. HTML 기본태그

앤 썸 2021. 4. 19. 13:53
반응형

2-1. 제목과 문단 태그 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-1 </title>
</head>
<body>
    <h1>example 2-1</h1>
    <h2>html example</h2>

    <p>hello world</p>
    <p>hello
        world
    </p>
    <p>hello<br>world</p>
    <pre>

        hello world
        hello
            world
    </pre>
        <h2>hello
                world
        </h2>
</body>
</html>

2-2. 텍스트 관련 태그 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-2</title>
</head>
<body>
    <b>bold text</b><br>
    <strong>strong text</strong><br>
    <i>italic text</i><br>
    <em>emphasized text</em><br>
    <mark>mark text</mark><br>
    <small>small text</small><br>
    <del>deleted text</del><br>
    <ins>inserted text</ins><br>
    This is <sup>superscript text</sup><br>
    This is <sub>subscript text</sub>
    
</body>
</html>

2-3. 목록 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-3</title>
</head>
<body>
    <h2>Unordered List</h2>
    <ul type="square">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <h2>Ordered List</h2>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>    
</body>
</html>

2-4. 하이퍼 링크 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-4</title>
</head>
<body>
    <a href="http://www.naver.com" target="_blank">Naver</a><br>

</body>
</html>

2-5. 책갈피 구현하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-5</title>
</head>
<body>
    <h1>Menu</h1>
    <a href="#index1">Coffee</a><br>
    <a href="#index2">Cake</a><br>
    <a href="#index3">Juice</a><br
    
    <h2 id="index1">Menu01::Coffee</h2>
    <ul>
        <li>Americano</li>
        <li>Cappuccino</li>
        <li>Cafe Latte</li>
    </ul>

    <h2 id="index2">Menu02::Cake</h2>
    <ul>
        <li>Carrot cake</li>
        <li>black tea cake</li>
        <li>Strawberry shortcake</li>
    </ul>

    <h2 id="index3">Menu03::Juices</h2>
    <ul>
        <li>Orange</li>
        <li>Grape</li>
        <li>Watermelon</li>
    </ul>
    
</body>
</html>

2-6. 인라인, 블럭태그 차이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example::2-6</title>
</head>
<body>
    <h3>block tage -div</h3>
    <div>Hello</div><div>World</div>
    <hr>
    <h3>inline tag -span</h3>
    <span>Hello</span><span>World</span>
    
</body>
</html>

반응형
저작자표시 비영리

'Programming > Web Programming (2021)' 카테고리의 다른 글

[웹프로그래밍 실습] 4. 이미지와 테이블  (0) 2021.04.19
[웹프로그래밍] 4. 이미지와 테이블  (0) 2021.04.19
[웹프로그래밍] 3. HTML 기본태그  (0) 2021.04.19
[웹프로그래밍 실습] 6. CSS 기초  (0) 2021.04.19
[웹프로그래밍] 6. CSS 기초  (0) 2021.04.19

'Programming/Web Programming (2021)' Related Articles

티스토리툴바