[dg ai school]Webプログラミング3

16764 ワード
WebProgramming 大邱AI学校 テキストリンク

1）学習内容


大構造

<!DOCTYPE html>
<html>
    <head>

        <meta charset="ftp-8">

    </head>
    <body>

        <h1>Hello World</h1>

    </body>
</html>

  • Sytle設計の適用(HTML+CSSリンク)

  • color: red; (セミコロン注意)
    • <link rel="stylesheet" type="text/css" href="style.css">
    スタイルシート/変更するテキストは、cssに設定/関連付けするファイルのパスです.
    **変更がある場合は、それぞれ保存してください
  • リンクラベル(HTMLとCSSの間のリンク)

    • 親子関係設計の適用


    HTML>
    <header>
	<h1>header h1</h1>
    <p>header p</p>
    <a href="#">네이버</a>
<footer>
	<h1>footer h1</h1>
    <p>footer p</p>
</footer>
    css>
    header {
	color: red;
}

header h1,
footer h1 {
	color: blue;
}

header p,
footer p {
	color: green;
}
  • 、使用時両方に色を指定

    • ID、クラス


    HTML>
    	<h1>Hello World</h1>
    <h2 id="test1">Nice to meet you</h2>
    <h3 class="test2">
    Welcome</h3>
    
    <input type="text" placeholder="이름">
    <input type="password" placeholder="비밀번호">
    CSS>
    h1 {
	color: red;
}

#test1 {
	color: blue;
}

.test2 {
	color: green;
}

input[type="text"] {
	border: solid 10px red;
}

input[type="password"] {
	border: solid 10px blue;
}
    HTML>
    <h2 id="color-1">ID 선택자</h2> --> 잘못된 코드
<h2 id="color-1 font-style-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>


<p class="bg-1">Welcome</p>

<h4 id="color-1"></h4>
  • 同じアイデンティティには、
    • の属性値が1つしかありません.
    css>
    .bg-1 {
	background-color: red;
}

.font-size-1 {
	font-size: 50px;
}

#color-1 {
	color: red;
}

#font-style-1 {
	font-style: italic;
}
  • クラスは別名(複数可能)、IDは名前(1つ)
    • である.
  • 「IDは名前なので、属性値は1つしか使用できません.」
    • css>
    #intro h2 {
	color: red;
}

header div p {
	color: blue;
}

또는 

#intro .container p {
	color: blue;
}
  • intro領域での変更
    • pを
  • ヘッダーのdivの
    • に変更します.
  • #introわあコンテナ

    • スタイルのプロパティ


    HTML>
    <h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>
  • スタイルプロパティ(id>class>tag)

    • カスケード(スタイルの優先順位)


    CSS>
    #intro div h1 {  ---> 원본 코드
	color: green;
}

#intro h1 {
	color: blue;
}

#intro h1 {
	color: red;
}

#intro .container h1 { 
	color: pink;
}
---> 캐스캐이딩 부분, 원본을 지우지 않고 스타일 적용
    レッスンには
  • ソースコードがありますが、異なるコードに適用されます.
  • 上から下へ、
    • に継承または従属する
  • 多くのアプリケーションのスタイルで使用するスタイルを決定します.

    • 上限、下限、フォント


    HTML>
    	<div>
    	<h1>Nice</h1>
    </div>
    CSS>
    div {
	width: 100%;
    height: 300px;
    
    min-width: 600px;
    max-width: 800px;
    
    border: 10px red;
    border-radius: 50px;
    
    background-color: yellow;
}
---> 상한선 하한선 사각형 부분

h1 {
	color: rgb(123, 111, 21);
    font-size: 80px;
    font-style: initial;
    font-family: Arial, Times, sans-serif;
    font-weight: 300;
    text-decoration: line-through;
    text-align: right;
}
---> 폰트부분

    バッジ


    HTML>
    	<div id="bg"></div>

	<img src="icon.png" width="100px"
	height="50px" alt="네이버 로고">
  • 情報を有する画像はimgタグ
    • を行う必要がある.
    CSS>
    #bg {
	width:256px;
	height: 356px;
	back-ground-color: yellow;
	back-ground-image: url(icon.png);
	back-ground-repeat: no-repeat;
	back-ground-position: top left;
}
  • 装飾用背景画像
  • 情報は、imgタグ
    • を含む.

    2）難しいところ


  • 親子概念(属性継承の有無)

  • HTMLとCSSの間のリンクとスタイルの応用概念

  • 機能は同じですが、異なるラベルを使用したcssは混同を開始します.

    • 3）解決方法


  • 実際には、(プロパティは取得されていますが、すべてのプロパティが継承されるわけではありません.ex)aタグ自体が青色のプロパティであることがわかります.

  • 実際のエンコーディングによる検証

  • 相変わらず混同していますが、慣れるまで練習を繰り返します.

    • 4）勉強の心得


  • ページスタイルを適用するのは不思議だと思います.簡単そうに見えますが、想像以上に手動で操作する必要があります.

  • 符号化も符号化ですが、設計部分と結びつくと多くの相違が生じるのは避けられません.

  • リンクとの連絡や使用に戸惑う
    • テストエンコーディング|(JavaScript)プログラマー:同じ数字が好きではありません
    [Algorithm] CHEEZE