HTML 3일차 공부

Programming Language/HTML | CSS | JS

HTML 3일차 공부

chaerlo127 2022. 1. 10. 16:27

1. HTML Style, Title Attribute, Horizon rule

<!DOCTYPE html>
<html lang="eng">
    <head></head>
    <body>
        <h3>Unordered HTML List</h3>
        <ul>
            <!-- title, style attribute -->
            <li title="it's first unordered html list" style="color: blueviolet;">Hello</li>
            <li>How are you</li>
            <li>Hello</li>
        </ul>
        <!-- Horizon Rule -->
        <hr>
        <h3>Ordered HTML List</h3>
        <ol>
            <li style="color: Red;">Hello</li>
            <li>How are you</li>
            <!-- <br>는 Enter 와 같은 것 -->
            <li>Hello <br> How are you</li>
        </ol>
    </body>
</html>

<!-- style="color: "  -->

2. HTML pre element

고정폭 글꼴을 사용하며 표현되며, 사용된 띄어쓰기와 줄 바꿈이 모두 브라우저 화면에 나타남.

<!DOCTYPE html>
<html lang="eng">
    <head></head>
    <body>
        <p title="paragraphs" style="color: blue;"> this is Paragraphs</p>
        <pre> 
            <!-- pre element -->
            i'm pre elements
            i'm pre elements 2
            i'm pre elements 3
        </pre>
    </body>
</html>

3. HTML BackGround Color, Font, Text Color, Text Size, Alignment

<!DOCTYPE html>
<html lang="eng">
    <head></head>
    <!-- style: background-color -->
    <body style="background-color: aquamarine;";">
        <!-- style: color -> font color -->
        <p title="paragraphs" style="background-color: brown; color: blue;"> this is Paragraphs</p>
        <p title="background practice" style="background-color: black; color: white"> this is background practice</p>
        <!-- style: font family(폰트 스타일) font size(font size), text-align(줄 design) -->
        <pre style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 300%; text-align: center; background-color: white;">
            hello
            how are you
            i'm studying HTML now
        </pre>
    </body>
</html>

<복습>

1. title : 설명

2. <hr> : 줄, 구분선

3. <br> : enter

4. <pre></pre>

5. style

color : font color
background-color : background color
font-family : font style
font-size : font size
text-align: 텍스트

저작자표시