フロントラーニング-html、css

34531 ワード
CSS フロント html テキストリンク
HTML:構造、内容
積層スタイルシート(CSS):設計
JS:ダイナミック
<html>

<head>
    <!-- 주석 -->
    <meta charset="utf-8" /> <!-- ASCII, abc... -->
    <title>나의 첫번째 타이틀</title>
</head>

<body>
    hello world,,,
    bye world,,,
</body>

</html>
html:WebブラウザがWebサーバから受信するドキュメントフォーマット(操作コマンド)
プレゼンテーション:Webブラウザでhtmlを読み込み、画面に描画します.
head:ページに関する基本情報
body:実際の内容
:コンテンツが多くない場合は、すぐに閉じることができます.
Open preview:画面に自動的に分析してレンダリングする
Open with live server:小型Webサーバ上でクロムブラウザに回転してレンダリング

住所:127.0.0.1:5500/1 hello world.html
ipアドレス(127.0.0.1):コンピュータipアドレス
5500:(vsコードに組み込まれたWebサーバ)番号

タイトル


見出しの自動上下行
<html>
</head>

<head>

<body>
    <!-- heading h1, h2, ... h6 -->
    <h1> H1입니다. </h1>
    <h2> H2입니다. </h2>
    <h3> H3입니다. </h3>
    <h4> H4입니다. </h4>
    <h5> H5입니다. </h5>
    <h6> H6입니다. </h6>
</body>

</html>

リンクタグ

<html>
    <head></head>
        <body>
            <!-- anchor tag의 attribute, herf : hypertext reference -->
            <a href="https://www.google.co.kr"> 구글 </a>
        </body>
    
</html>

input

<html>
    <head></head>
        <body>
            <!-- input -->
            <input type="text"/>

            <button> 가입</button>
        </body>
</html>

ol(Ordered list)、ul(無秩序リスト)、li(list item)、hr(直線)、image

<html>
    <head></head>
    <body>
        <hr>
        <img src="./빨간차.jfif" alt="TTS Text to Speech에서 읽어줌 "/> <!-- ./ 같은 폴더--> <!-- alternative, 대체-->
        <ul> <!-- unordered list -->
            <li>첫번째</li>   <!-- list item -->
            <li>두번째</li>
            <li>세번째</li>
            <li>네번째</li>
        </ul>
        <hr> <!-- horizontal (수평) rule (자, )-->
        <hr>
        <ol> <!-- ordered list -->
            <li>첫번째</li>   <!-- list item -->
            <li>두번째</li>
            <li>세번째</li>
            <li>네번째</li>
        </ol>
        <hr>
    </body>
</html>

div


div:パーティション化、管理が容易(1行表示)
<html>
    <head>
    </head>
    <body>
        <div id="first">
            <h1> H1 입니다. </h1>
         </div>
         <div id="second">
            <h1> 두 번째 H1 입니다. </h1>
         </div>
         <div id="third">
            <h1> 세 번째 H1 입니다. </h1>
         </div>               
    </body>
</html>

style


#:id表示
styleラベル内のプロパティ:プロパティ値;ダム
id:ユニーク値
ファミリー
<html>
    <head>
        <style>
            /*style 태그 안에 주석*/
            div.divclass{
                background-color:beige;
            }
            /*
            div#first {
                background-color: lime;
            }
            div#second{
                background-color:cadetblue;
            }
            div#third{
                background-color:yellow;
            }*/

        </style>
    </head>
    <body>
        <div class="divclass" id="first">
            <h1> H1 입니다. </h1>
         </div>

         <div class="divclass" id="second">
            <h1> 두 번째 H1 입니다. </h1>
         </div>

         <div class="divclass" id="third">
            <h1> 세 번째 H1 입니다. </h1>
         </div>
    </body>
</html>

cssファイルを生成してhtmlに関連付ける


リンク障害
html
<html>
    <head>
        <!-- res : 링크된 문서와의 관계, href : 주소-->
        <link rel="stylesheet" href="./main.css">
    </head>
    <body>
        <div class="divclass" id="first">
            <h1> H1 입니다. </h1>
         </div>

         <div class="divclass" id="second">
            <h1> 두 번째 H1 입니다. </h1>
         </div>

         <div class="divclass" id="third">
            <h1> 세 번째 H1 입니다. </h1>
         </div>

    </body>
</html>
css
/*div.divclass{
                background-color:beige;
            }
            */
div#first {
  background-color: lime;
}
div#second {
  background-color: cadetblue;
}
div#third {
  background-color: yellow;
}

width:div幅の設定

/* px단위 붙여 써야댐*/
div#first {
  background-color: lime;
  display: inline-block; /* display 형식*/
  width: 500px;
}
div#second {
  background-color: cadetblue;
  display: inline-block;
  width: 600px;
}
div#third {
  background-color: yellow;
  display: inline-block;
  width: 700px;
}

css margin, padding, border


マージンえっじ:外部空間までの距離がいぶくうかんまでのきょり
padding:元のサイズの値で展開
border:枠線
<html>
    <head>
        <style>
            div#outer {
                display: inline-block;
                background-color :blueviolet;
                margin: 100px;
                border:2px solid #FF0000/*경계선*/
            }
            div#inner{
                display: inline-block;
                background-color:aqua;
                /*margin : 50px ;*/
                /*margin : 50px 10px ;*/
                /*margin : 50px 10px 90px;*/
                margin : 50px 10px 40px 100px;
                padding : 50px 10px 40px 100px;
                /*         상 우   하    좌*/
                /*padding: 100px;*/
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id = "inner">Hello</div>
            </div>
        </div>
    </body>
</html>
PR-通常長方形
02.Django-テンプレート