HTML UI

18226 ワード
html テキストリンク

HTML UI


本稿の目的は,授業中に作成したUI記述コードを見てhtmlタグを1つずつ整理することである.

コード#コード#

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
</head>

<body leftmargin="300px" , rightmargin="300px">
    <h1 align="center">
        <font color="red">Galaxy S</font>
    </h1>
    <h5 align="center"><ins>삼성 갤럭시 S 시리즈</ins></h5>
    <b>목차</b>
    <ol>
        <li>개요</li>
        <li>사양</li>
        <li>
            상세
            <ol>
                <li>기능</li>
                <li>
                    주변기기 및 액세서리
                    <ol>

                        <li>
                            <font color="purple">주변 기기</font>
                        </li>
                        <li>
                            <font color="purple">액세서리</font>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            출시
            <ol>
                <li>한국 출시</li>
                <li>한국 외 지역</li>
                <li>
                    특별한 모델
                    <ol>
                        <li>
                            <font color="purple">Galaxy S9 Microsoft Edition<sup>1)</sup></font>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
    <br>
    <h3>
        <font color="red">1. 개요</font>
    </h3>
    <hr color="red"> <br>
    <p>삼성전자가 2018년 2월 25일(한국 시각 2월 26일)에 공개한 안드로이드 스마트폰. 개발 코드네임은 Star.</p><br>
    <h3>
        <font color="red">2. 상세</font>
    </h3>
    <hr color="black" , size=3> <br>
    <font color=blue><i>프로세서</i></font> : 삼성 엑시노스 9 Series <br><br>
    <font color=blue><i>메모리</i></font> : 4 GB SDRAM
</body>

</html>

実行画面



bodyラベルの要素を1つずつ見てみましょう.

  • margin
    bodyラベルのプロパティとして使用します.属性は、この要素の外部に白を残すか、左、右などの目的の方向に白を残すことができます.このコードではbodyの左,右に300 pxの空白を残した.

  • h1~h5, b, ins
    これらはテキストに関連するラベルです.
    hタイトル表示に使用します.数字が小さいほど、字の大きさが大きくなります.alignは、テキストを整列させるためのプロパティで、変数が中央に整列します.
    b bold効果を与える.字が厚くなりました.
    insは下線を引く.

  • font
    文字を飾るラベル.プロパティにはsize、colorなどがあり、テキストの外観を変更できます.

  • ol, li
    リストを表すタグ.基本形式は、ol(Ordered List)またはul(Unordered List)タグを使用してリストを決定するフレームワークであり、liタグを要素として使用して単一リストを作成する.olとulの違いはliラベル番号を付けるかどうかです.

  • hr
    横線を引くラベル.プロパティを使用すると、線のサイズや色を変更することもできます.
    • 勉強したり、整理したり、感じたりしますが、html自体はかなり直感的で、書くときに直接どんな様子なのかを見ることができるので便利です.htmlの大まかな文脈は把握しているようで、cssをもっと重点的に整理する必要があるかもしれません.
    GMP Install Instruction for Windows Platform
    スライド