Ellis翌日火曜日オンライン教室html,css

28675 ワード
エリス テキストリンク

01


1.Webコンポーネント


**
HTML:情報または設計図
CSS:デザインまたはスタイリング
JavaScript:機能と効果
Webの作成には3つの注意点があります
  • Web規格:Webサイトの作成時に従うべき正式規格または技術規格
  • Webアクセス性:
    • 、障害の有無にかかわらず、すべての人がWebサイトにアクセスできるようにします.
  • クロスブラウザ:サイトがすべてのブラウザまたはデバイス上で正常に動作することを可能にする技術(反応型Web)
    • .

    2.HTMLデフォルトタグ


    Hyper Text Markup Language
    <열린태그 속성="속성값">컨텐츠</닫힌태그>
    ラベル名:HTML特有の機能
    ≪コンテンツ｜Content｜ldap≫:タグ間のコンテンツのオンとオフ
    属性:HTMLタグに含まれるコメント
    ≪属性値｜Attribute Value｜ldap≫:特定のコマンドを実行して実行するロール
    <!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html> <!-- html 문서의 시작과 끝 -->
<head> <!-- 문서와 관련된 요약 정보 관리 -->
    <meta charset="UTF-8"> <!-- 문자 코드 -->
    <title>웹프로그래밍</title> <!-- 웹사이트 제목 -->
</head>
<body> <!-- 웹사이트 내용 -->
</body>
</html>
    img:挿入画像(閉じたラベルX)
    <img src="logo.png" alt="회사로고>
<img src="이미지url 주소" alt="회사로고>
    src:挿入する画像ファイルのパス
    alt:Webサイトが画像を出力できない場合は、テキスト情報を使用して置き換えます.
    h:タイトルの略で、タイトルまたはサブタイトルを表す
    <h1>Hello World</h1>
<h2>Hello World</h2>
<h6>Hello World</h6>
    数字が大きいほどサイズが小さくなります.数字は情報の重要性を表す
    h 1タグには最も重要な情報が含まれているため、1つのhtmlドキュメントで1回のみ使用される.6まで
    p:段落の略語でテキストの内容を表す.段落の作成
    <p>Nice to meet you</p>
    ul:無秩序リストの略語を使用して無秩序リストを作成する
    <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ul>

    3.構造をキャプチャするときに使用するタグ

  • ディレクトリ
    タイトル:タイトルを含むスペース
    nav:メニューボタンnavigation,ul,li,aラベルとともに
    • を使用
    <header> <!-- 상단 영역 -->
    <nav> <!-- 메뉴 영역 -->
        ...
    </nav>
</header>
  • 本文
    main:ドキュメントの主な内容が含まれています.IEはサポートされていませんので、mainrole=「main」と記入する必要があります.
    article:情報領域のラベルを設定します.ラベルの領域にはタイトルラベルが必要です.
    • <main role="main"> <!-- 본문 영역 -->
    <article> <!-- 정보 영역 -->
        <h#></#h>
        ...
    </article>
</main>
  • バーを降りて
    脚注:下
    div:任意のスペースを作成する
    • <footer> <!-- 하단 영역 -->
    <div> <!-- 엘리스 정보 -->
        <p></p>
        <p>이메일</p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</footer>

    4.HTMLタグの性質

  • Block要素
    y軸整列形状、改行
    スペースを作成可能、上下に配置可能、width、height調整可能
    ex) p
  • ライン要素
    x軸整列形状
    スペースを作成できません.上下に配置できません.
    ex) a

    • 5. CSS


    積層スタイルシートの略語
  • アセンブリ
    • 선택자 {속성: 속성값;}
    選択者:設計を適用するhtml領域
    ≪プロパティ｜Properties｜ldap≫:適用する設計を定義します.
    ≪属性値｜Attribute Value｜ldap≫:特定のロールを実行するコマンド
  • CSS属性
    • h1 {
    font-size: 20px; /* 폰트 사이즈 */
    font-family: sans-serif; /* 글꼴 */
    color: blue; /*폰트 색깔 */
    background-color: yellow; /* 배경색 */
    text-align: center; /* 텍스트 정렬 */
}
    3種類のCSS駆動方法
    1.行内スタイルシート:必要なスタイルをタグに直接適用する
    <h1 style="color:red;">호호</h1>
  • 内部スタイルシート:headラベルにスタイルラベルを追加し、
    • に適用します.
    <head>
    <style>
        h1 { background-color: yellow;}
    </style>
</head>
  • 外部スタイルシート:リンクラベルを使用してCSSファイル
    • にロード
    <head>
    <link rel="stylesheet" href="style.css">
</head>

    6.CSSセレクタ


    優先順位ライン内スタイル>id>class>type
    type
    <style>
    h2 { color: red; }
</style>
    class
    <style>
    .coding { color: blue; }
</style>
    id
    <style>
    #coding { color: green; }
</style>

    7.親子関係

    <head>
	<h1></h1>
    <p></p>
</head>
    headとh 1は親子関係
    h 1とpは兄弟関係

    8.スケート


    1)順序:後で適用する属性値の優先度が高くなる
    p { color: red; }
p { color: blue; ]
    結果:青
    2)詳細:より具体的な選択者の優先度が高い
    header p {color: red; }
p { color: blue; }
    結果:赤
    3)style>id>class>type優先

    9.CSS主要属性


    1) width, height
    <p class="paragraph"> 프로그래밍을 배워봐요! </p>

.paragraph { width: 500px, height: 500 px; }
    幅はば:水平すいへい
    height:垂直
    固定値はpx、可変値は%
    2) font
    <p class="paragraph"> 즐거운 웹프로그래밍! </p>

.paragraph {
    font-size: 50px; /* 글자 크기 */
    font-family: Arial, sans-serif; /* 글꼴 */
    font-style: italic; /* 글자 기울기 */
    font-weight: bold; /* 글자 두께 */
    font-family:入力された優先度で適用されます.sans-serifは、すべてのブラウザでサポートされている最後の書き込みのポーリング値です.
    font=weight:100～900の数字を入力できます
    3) border
    <p class="paragraph"> 즐거운 웹프로그래밍! </p>

.paragraph {
    width: 500px; 
    height: 500px; 
    border-style: solid;
    border-width: 10px;
    border-color: red;
    ここで、pラベルの枠線はborderです.
    4) background
    .paragraph {
    background-color: yellow;
    background-image: url(이미지 경로);
    background-repeat: no-repeat;
    background-position: left;
    background-repeat:x軸繰返しはrepeat-x、y軸繰返しはrepeat-y、繰返しなければno-repeat
    背景-位置:top、bottm、center、左、右などの座標を変更

    02レイアウト


    1.箱型

  • margin vs padding 写真ソース
    • margin:borderの外部に余白を作成する
    padding:border内部に余白を作成する
    top, right, bottom, left
    スペースを余白を含むサイズに変更
    1行に作成でき、12時から時計回りに上下左右に並べられます
    <style>
    div { margin: 100px 0 0 100px; }
</style

    2.Block要素とInline要素


    block要素はwidth、height、margin、padding、pラベル、改行Oを設定できます
    行内要素はwidth、height、margin、padding top bottomを設定できません

    3.利益合併現象

    <div class="box1">Hello World</div>
<div class="box2">Hello World</div>
    .box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { margin-top: 100px; }
    これにより,利益領域が重なると大きな値が得られる.
    box 1とbox 2の間に形成されるエッジ距離は150 pxである.
    <main role="main">
    <article>
    </article>
</main>
    article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
    この場合、100 pxはarticleの親mainのmargine-topに適用されます.

    4.レイアウトに影響する属性


    display:blockとinline要素の性質を変更する
    inline-blockを使用すると、2つの要素の性質を同時に処理できます.x軸とy軸の位置合わせ
    p { display: inline; }
a { display: block; }
a {display: inline-block; }
    float:要素を左端または右端に揃えます.これを使うと、選択者がブーンと浮かび上がり、階層化します.
    この次に作成される要素は、浮動小数点要素の後ろに重なります.
    .left { float: left; }
.next {float: left; }
    clear:floatを使用している場合は、次の要素を使用する場合は、まずclearを宣言する必要があります.floatに制御されないという意味
    それは後ろが重なるのではなく、下が正常に出てきたのです.
    左
    footer { clear: both; }
    htmlとbodyは基本的にmargin、padding値を有するため、画面が不適切である.
    最初は0に初期化し、cssを設定します.
    <style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>
    *htmlタグをすべて選択できます
    <style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
    双方向関連
    1904 01タイル