Dev Log#3-6月30日

45071 ワード
大邱AI学校 CSS Webプログラミング 開発ログ TIL html テキストリンク

今日の勉強内容


設計を担当するcss要素
89 htmlタグ構造-親、子、兄弟関係
セレクタ-type、id、class、attributeセレクタ
カスケード
8989 cssの複数の属性

1.設計をh 1に適用する方法は概ね3つある


headラベルでstyleラベルを使用して設計を適用する
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>
</head>
<body>

	<h1>Hello Wrold!</h1>

</body>
</html>
タグにstyleプロパティを追加することで、サマリーにcss構文を作成します.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>
</head>
<body>

	<h1 style = "background-color: hotpink;">Hello Wrold!</h1>

</body>
</html>
この2つの方法では🚨致命的な欠点がある.
コードが2000行を超えると、1つのドキュメントにhtml、cssがあり、可読性が低下します.例えば、本を買って読むと韓国語と英語が混ざっているような感じがします.後でメンテナンスする時も不便になります.この問題を解決するには、htmlドキュメント、cssドキュメントを個別に作成し、2つのファイルをバインドして作業することができます.
htmlファイルとcssファイルの作成
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>

	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<h1 style = "background-color: hotpink;">Hello Wrold!</h1>

</body>
</html>
🚨注意!2つのラベル(html、css)のうちの1つだけが格納されているからといって、すべて保存することはできません.両方とも貯金しなければならない.
産品¥2,000

2.親、子、兄弟関係構造


特長必然的にhtmlタグは親、子供、兄弟関係の構造を持っている.

<header>
	<ul>
		<li></li>

		<li></li>
			
		<li></li>
	</ul>
</header>
<div></div>
  • ヘッダにとって、ulは子供です.
  • ulにとって、頭は両親です.
  • 各里の関係は兄弟関係です.
  • 頭とdiv関係も兄弟関係です.
    • 特長親に色の遺伝子があれば、子供に伝えて継承させることができます.
    👉 htmlタグ
    <header>
	<h1>header h1</h1>
	<p>header p</p>
</header>

<footer>
	<h1>header h1</h1>
	<p>header p</p>
</footer>
    👉 cssラベル
    header {
	color: red;
	
}
    産品¥2,000
  • 頭の親が赤色遺伝子を持っているため、子供も赤色遺伝子を持っている.

    • 🚨 注意点


    しかし、生まれながらにして自分の遺伝子があれば、その遺伝子について行きます.つまり、すべての子供が親の持っている遺伝子を受け継いでいるわけではない.最初、aラベルは青を遺伝子とした.
    👉 htmlタグ
    	<header>
		<h1>header h1</h1>
		<p>header p</p>
		<a href="#">네이버</a>
	</header>

	<footer>
		<h1>header h1</h1>
		<p>header p</p>
	</footer>
    👉 cssラベル
    header {
	color: red;

}

h1 {
	color:  blue;
}

p {
	color:  green;
}
    産品¥2,000

    特長親の子のスタイル値を指定できます.(誰の家の子供か指定できます)
    👉 htmlタグ
    	<header>
		<h1>header h1</h1>
		<p>header p</p>
		<a href="#">네이버</a>
	</header>

	<footer>
		<h1>header h1</h1>
		<p>header p</p>
	</footer>
    👉 cssラベル
    header {
	color: red;

}

header h1 {
	color:  blue;
}

header p {
	color:  green;
}
    産品¥2,000

  • 親を指定することで、スタイル値を指定できます.

  • 同じ色の場合は、組み合わせ(,使用)で指定できます.
    👉 cssラベル
    header h1,
footer h1 {
		 color:  hotpink;
}

header p,
footer p {
		 color:  orange;
}
    産品¥2,000

    • 3.選択者

  • 選択者は、cssでhtmlドキュメントにアクセスする方法であり、特定の領域にアクセスする方法である.
  • タイプ、id、class、およびプロパティセレクタの4種類のエンクロージャ
    • ✔typeセレクタ:htmlタグに基づいてアクセスするためのセレクタ
    👉 htmlタグ
    	<h1>Hello World!</h1>
	<h2 >Nice to Meet you</h2>
	<h3>Welcome</h3>
    👉 cssラベル
    h1 {

	color: red;
}
    ✔idセレクタ:タグに一意の名前を付けることができます.(貼り付け#)
    👉 htmlタグ
    	<h1>Hello World!</h1>
	<h2 id="test1" >Nice to Meet you</h2>
	<h3>Welcome</h3>
    👉 cssラベル
    h1{
	color: red;
}

#test1 {
	color: blue;
}
    ✔class選択者:ラベルに別名を付けることができます.(貼り付けます.)
    👉 htmlタグ
    	<h1>Hello World!</h1>
	<h2 id="test1" >Nice to Meet you</h2>
	<h3 class ="test2">Welcome</h3>
    👉 cssラベル
    h1{
	color: red;
}

#test1 {
	color: blue;
}

.test2 {
	color: green;
}
    ✔¥attributeセレクタ:typeの形態(typeの属性値を持つ)に基づいて設計を相互に適用する.
    👉 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;
}
    産品¥2,000

    4.idセレクタとclassセレクタの違い


  • idは名前なので、属性値は1つしか指定できません.

  • classは別名なので、複数の別名を追加できます.

  • classは、作成した別名をいつでもどこでも再利用できます.同じクラス名は、1つのドキュメントに複数回書き込むことができます.

  • idは1つのドキュメントに1つしか存在しません.
    • 👉 htmlタグ
    	<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>
    👉 cssラベル
    .bg-1 {
	background-color: red;
}


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

#color-1 {
	color: red;
}

#font-style-1 {
	font-style: italic;
}
    産品¥2,000

    5.idとclassセレクタを使用して設計する


    👉 htmlタグ
    	<header id="intro">
		<div class="container">
			<h2>header h2</h2>
			<p>header p</p>
		</div>
	</header>

	<p>Out p</p>
    👉 cssラベル
    #intro h2 {
	color: red;
}

#intro .container p {
	color:  blue;
}
    産品¥2,000

    6.スケート


  • カスケードはcssコードの作成時にどの設計を優先するかに影響する概念です.

  • 同じ属性値が適用されたときにどの属性値が処理されるかを判断します.

  • 同じ選択者が使用されている場合、後で適用されるcssプロパティは優先度が高くなります.次の例は、後述するh 1(青)を適用する.
    • 👉 html 
    <h1>Hello World!</h1>
    👉 css
    h1 {
	color: red;
}

h1 {
	color: blue;
}

  • typeセレクタ

  • classセレクタ

  • idセレクタ

  • styleプロパティ>id>class>tag
    • 👉 html
    <h1 style = "color:gray;" id="color-2" class="color-1">Hello World!</h1>
    👉 css
    #color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1 {
	color: red;
}


h1 {
	color: blue;
}
    産品¥2,000

    7.鋳造応用


  • もう少し細部を優先します.(以下のコード例では、intro.container h 1はintro div h 1よりも詳細である.)

  • ソースコードを保持したまま新しいcss方式を追加するために使用します.
    • 👉 html
    	<header id ="intro">
		<div class="container">
			<h1>header h1</h1>
		</div>
	</header>
    👉 css
    #intro div h1 {
	color:  green;
}


#intro div {
	color: green;
}


#intro h1{
	color: blue;
}

header h1 {
	colror: red;
}


#intro .container h1 {
	color: pink;
}

    8.cssの複数の属性

  • pxは固定値です.
  • ブラウザのサイズに合わせて自然にサイズを変更したい場合は、パーセント
    • を使用します.
  • %単位は親を基準とし、相対値は測定値である.
    • 👉 html
    <header>

	<div>
		<h1>Nice</h1>
	</div>

</header>
    👉 css
    header {
	width: 500px;
}

div {
	width:  100%;
	height:  300px;

	background-color: yellow;
}

  • min-width、max-widthは使用%の基準で使用します.

  • max-widthが上限、min-widhtが下限

  • 枠線の指定:border:solid 10 px red;

  • 境界ラウンドの指定:border-radius:50 px;

  • フォントに3種類のフォントがある場合は、前から使用できます.各ブラウザには、使用可能なフォントが固定されています.
    font-family: Arial, Times, sans-selif; もしそうであれば、Arialから

  • 最後にsans-selifを指定します.すべてのブラウザで使用できるフォントだからです.

  • text-alignでは、テキストの場所を変更できますが、background-color:pinkなど、範囲がどこからどこまであるかを知りたい場合は、表示されるように、範囲を確認して使用することが望ましい.

  • opacity: 0.5; で、透明度によって透明度が決まります.値は0(最も透明)から1(最も明確)です.
    • 👉 html
    
<head>

	<meta charset="utf-8">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
	<div>
		<h1>Nice</h1>
		<a href="#">네이버</a>
		<ul>
			<li>메뉴1</li>
			<li>메뉴1</li>
		</ul>
	</div>
    
</body>
    👉 css
    div {
	width:  100%;
	height:  300px;
	min-width: 600px;
	max-width: 800px;

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

	background-color: yellow;

	opacity: 0.5; 
}


h1 {
	color: rgb(123, 111, 21);
	font-size:  80px;
	font-style: initial; //italic은 기울임체, initial은 초기값
	font-family: 'Noto Sans KR', sans-serif; // html에서 head부분에 style link를 따로 지정을 해주어야한다.
	font-weight: 900; // 폰트 굵기
	text-decoration: line-through; // 글자 밑줄, 글자 중간줄
	text-align: center; // 텍스트 배치 

	background-color: pink; // text-align을 사용할 때 확인해야하는 요소 
}

a {
	text-decoration: none; //a태그는 디폴트값으로 밑줄을 가지고 있는에 이 속성을 쓰면 지울 수 있다. 
}

ul {
	list-style: none; //ul태그는 디폴트값으로 동그라미 점 목록을 가지고 있는 데 이 속성을 쓰면 지울 수 있다. 
}
    産品¥2,000

    9.背景属性


    👉 html
    <div id ="bg"></div>
    👉 css
    #bg {
	width: 900px;
	height: 900px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: top left;
}
    産品¥2,000
  • 画像タグとバックグラウンド使用画像の違い

    ✔¥1つ目の違い

  • イメージラベル:パーセンテージは破れていますが、カットされません.
  • バックグラウンドで画像を使用:バックグラウンドのサイズに応じて、クリップできます.(フォトフレームを例にとると、フォトフレームより写真が大きければ、フォトフレームと同じ大きさの写真が見られるので、写真がカットされたような気がします)

    • ✔¥2番目の違い

  • 画像ラベル:Webアクセスに対して、画像関連情報をalt値に入れる.情報性のある画像であれば、imgタグを付けるべきです.
  • バックグラウンド使用画像:装飾用途に使用します.

    • きょうの学習後期


    今日はCSSを知る時間があります.📗 今日の授業の核心単語は優先順位とは違うようです.同じラベルでも、Webブラウザで異なる選択者、異なる親-子要素間の優先度を表示できます.デザイン要素を追加したCSSは視覚効果でより多くの情報を載せ、より多くの情報を伝える役割を果たしているので、その使い方をもっと詳しく知るべきだと思います.今日はあまり難しくないので、htmlタグ親子要素と各選択者の違い、カスケード、css属性と要素をもっと復習してまとめます.😊
    白駿14467牛が道路を渡る原因(実施)
    ソート[BaekJoon]10989数字(java)