[大邱AI学校]開発ログ3日目210630

39293 ワード
CSS Webプログラミング 大邱AI学校 テキストリンク

学習内容


1.CSSを入力する3つの方法


1)HTML Head部分での合成
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color:  red;
		}
	</style>
</head>
<body>
	<h1>Hello World</h1>

</body>
</html>
  • body領域のh 1ラベルはCSSで表される.
    head領域でstyleタグにCSSで表示するh 1タグを指定します.
  • styleラベルは括弧{}で記入
    • ヘッダーにCSSラベルを設定します.
    <head>
    <style> 
    	디자인할 태그를 지정 {
        		    속성: 속성값;
        }
    </style>
</head>
    2)タグ内に直接作成
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color:  red;
		}
	</style>
</head>
<body>
	<h1 style="background-color: pink;">Hello World</h1>

</body>
</html>
    3)CSSファイルを単独で作成してバインドする
    以上の2つの方法は1つのファイルにhtmlとcssを混合しており、後で修正するのは難しい.通常、htmlファイルとCSSファイルを個別に作成し(拡張子.cssを入力して保存する必要があります)、リンクラベルを使用して2つのファイルを関連付けることができます.
    <link rel="stylesheet" type="text/css" href="style.css">
  • htmlでlinkタグを作成
  • rel:バインドファイルのタイプ
  • type:タグがどの言語で作成された関連ファイル
  • href:バインドされたファイル名.拡張子

    • 2.親ラベル、子ラベル、兄弟ラベルを使用してCSSを適用する

    <header>
	<h1>header h1</h1>
	<p>header p</p>
</header>

<footer>
	<h1>footer h1</h1>
	<p>footer p</p>
</footer>
    htmlでタグを使用する場合、あるタグ内にタグと同じ位置のタグがあります.
    上記の場合、headerラベルとfooterラベルはh 1とpラベルの親ラベルであり、h 1とpラベルはそれぞれheaderラベルとfooterラベルの子ラベルである.
    h 1ラベルとpラベルは兄弟ラベルであり、ヘッダラベルとテールラベルも兄弟ラベルである.
    CSSで親ラベルを指定してスタイルを作成すると、そのスタイルはすべてのサブラベルに適用されます.
    header {
	color: red;
}
    단, 아래의 경우에는 자식태그마다 개별적용된다.1)親ラベルにcssスタイルが適用されている場合は、サブラベルを直接指定することでスタイルを作成できます.
    header {
	color: red;
}

h1 {
	color: blue;
}

p {
	color: green;
}

    2)初期設定値を持つhtmlタグについては、初期設定が優先されます.
    <header>
	<h1>header h1</h1>
	<p>header p</p>
	<a href="#"></a>
</header>

<footer>
	<h1>footer h1</h1>
	<p>footer p</p>
</footer>
    上のcssコードに従ってhtmlにラベルを追加します.
    aラベルはもともと青色の下線が付いた設定なので、headラベルの文字色redの適用は継承されません.

    スタイルをより詳細に適用するには、親ラベルと子ラベルを同時に指定します.
    header h1 {
	color: blue;
}

footer p {
	color: green;
}
    複数のタグをカンマ(,)に接続してスタイルを指定することもできます
    header h1,
footer h1 {
	color: blue;
}

header p,
footer p {
	color: green;
}

    3.属性選択器


    タグ属性を使用して選択した属性セレクタ.四大類を多く使う.
    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;
 }
  • タグにidとclassを指定してスタイルを適用できます.
  • idは#,classは.追加します.
  • 同じタグを複数使用する場合、同じタグ全体ではなくidまたはclassを指定してスタイルを適用できます.
    • idとclassの違い
    html
<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1"></h3>

<!-- id는 이름값이기 때문에 하나만 설정할 수 있다. -->
<!-- class는 별명. 띄어쓰기를 통해 여러개를 작성할 수 있고, css에서 각 class명에 설정된 값들은 통합되어 나타난다. -->

<h4 id="color-2 font-style-2">ID선택자2</h4>

<!-- id를 class처럼 여러개를 사용할 경우 모두 적용되지 않는다. -->
    css

 .bg-1 {
 	background-color: red;
 }

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

 #color-1 {
 	color: red;
 }

/* 잘못된 id선택자↓↓↓↓↓ 모두 적용되지 않는다.*/

#color-2 {
 	color: red;
 }

#font-size-2 {
 	color: 45px;
 }
  • idは名前値なので、1つしか設定できません.ドキュメントにも1つしか使用できません.
  • classは別名です.複数のスペースを作成できます.cssで各クラス名に設定された値が表示されます.
  • idはclassのように複数使用されている場合、すべて有効になりません.

    • 4. Cascading


    css符号化の優先度.ソースコードを保持したまま上書きする場合に使用
    html
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>
    1)同じcssスタイルをtagとして指定した場合:最後に記述したコードに基づいている.
    h1 {
	color: red;
}

h1 {
	color: blue;
}
    後ろの青
    2)tagとclass:classがtagより優先されるように指定した場合.
    .color-1 {
	color: green;
}

h1 {
	color: red;
}

h1 {
	color: blue;
}
    classとして指定されたgreenに適用されます.
    3)tag、class、idとして指定されている場合、idはtag、classより優先されます.
    #color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1 {
	color: red;
}

h1 {
	color: blue;
}
    idとして指定されたpink.
    4)htmlに直接スタイルを指定する場合:cssファイルで単独で作成したスタイルより優先されます.
    <h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>
    まずhtmlに直接指定されたgrayを適用します.
    同じ指定でも、より詳細に指定されたcssが優先的に適用されます.
    <header id="intro">
	<div class="container">
		<h1>header h1</h1>
	</div>
</header>
    上のhtmlでは、cssは以下の順序で優先的に適用されます.
    #intro .container h1 {
	color: pink;
}

#intro div h1 {
	color: green;
}

#intro h1 {
	color: blue;
}

header h1 {
	color: red;
}

    5.スペース仕様設計

    
<div>
	<h1>Nice</h1>
</div>
    上のhtmlの場合、cssを使用して次のスペースを設計します.
    div {
	width :100%;
	height : 300px;
	min-width : 600px;
	max-width : 800px;

	border: 10px red solid;
	border-radius: 50px;

	background-color: yellow;
}
  • widht:pxではなく%を指定すると、親ラベルのサイズで
    • が表示されます.
  • min-width:ブラウザのウィンドウサイズを小さくしながら最小のウィンドウサイズを維持するために最小のウィンドウサイズを指定します
  • max-width:ブラウザウィンドウサイズの最大値を指定
  • border-radius:空間境界をラウンドで表示

    • 6.フォントデザイン

    <div>
	<h1>Nice</h1>
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
	</ul>
</div>
    上のhtmlで文字設計に使用されるcssコード
    div {
	color : rgb(123,111,31)
	font-size: 80px;
	font-style: initial;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: line-through;
	text-align: right;

	background-color: pink;
}

ul {
	list-style: none;
}

/* sans-serif 는 모든 브라우저에서 사용가능하므로 맨 마지막에 항상 넣어주는 것이 좋다. */
  • color:色名、色コード、rgbを使用できます.
  • font-family:各ブラウザに使用可能なフォントがあります.最初のフォントが使用できない場合は、次のフォントを適用します.
  • 新しいフォント適用方法
  • font-weight:フォントサイズ
  • text-chentication:under-line(下線)、line-throughがよく使用されます.タグに自動的に生成されたアンダースコアの設定を削除する場合は、noneを入力します.
  • text-align:文字の位置を指定します.ここで、親ラベルはh 1であるため、h 1の領域でのみ右、左、中心に移動できます.
  • list-style:ulタグで自動的に生成される点は、noneを入力すればよい.

    • 7.背景属性

    <div id="bg"></div>
    htmlに背景画像を配置するスペースを作成する
    #bg {
	width: 256px;
	height: 256px;
	background-color: yellow;
	background-image: url(파일명.확장자);
	background-repeat: no-repeat;
	background-position: top left;
}
  • background-image:背景空間に入れる画像.画像のサイズがスペースサイズより小さい場合は、タイルで塗りつぶします.
  • background-repeat:タイル塗りの画像を調整できます.repeat-x、repeat-y、repeat、no-repeatのいずれかを選択します.
  • background-position:重複しない場合は画像の位置を指定できます.
    • htmlのimgタグとcssの背景-画像の違い
  • htmlのimgタグ:widthとheightの値を変更するとパーセンテージのみが破壊されます
  • background-image:image:画像が背景領域として指定された空間より大きい場合は、切り捨てられます.スペースが画像より大きい場合は、タイルを繰り返します.
  • Naverロゴなどの情報の画像はhtmlにimgタグを使用する必要があります.

    • 好奇心のある場所


    linkラベルがhead領域に置かなければならないかどうか知りたいのですが.

    解決策


    Teamsのクイズに掲載(今日は遅すぎて明日の朝アップ予定)

    学習の心得.


    今日は月末の評価をするそうで、昨日の未明までにMS Azure Machine Learning StudioとPythonを見ていたので、もう少しで寝坊しそうになりました.9時55分に目を開けてよかった
    もう一度見て、その時説明を聞いた時についてきたと思っていたのですが、今は忘れていたので危機感を感じました…もっと復習して、自分に慣れさせるべきだと思います.
    あ、でもAzure Machine Learning Studioは当時かっこよさも知らずについていくだけで、Pythonをしているときにもトレーニングデータを3つ、学習データを3つに分けてエンコードしていることを思い出して、こんな認識を得ました.
    今日学んだcssは難しくない...弟は大学の时に汉学のhtmlとcssの内容を学んだことがなくて、3日以内に完成する感じ、ほほほ
    難しいというよりいつ暗記できるかな?心配する
    昨日は思ったより簡単な感想を書きました.いくら簡単な量でも多くなるので覚えられないのが心配です
    そして、今日はhtmlとcssを同時に使う必要があるので、postingの使い方を考えるのに多くの時間を費やしました.
    他の人がバニラを使っているのを見て、それを見学して、みんな頑張って、また危機感を感じました
    まだバニラに何も置いていませんが・・・開発ログも慌ただしく書かれていて、私だけが遅れているのではないかと心配しています.
    より多くの内容を蓄積する前に、私たちはできるだけ早くダウンジャケットに置く必要があります.
    jsオブジェクトコンポーネント向け開発---弾窓
    TIL - CodeKata(4)