[勉強の内容]

CSSコース

1.設計の適用方法

(1)headタグ内でstyleタグを使用する

適用するラベル{プロパティ:プロパティ値;}

(2)適用するラベルにstyleラベルを直接使用する

<適用するタグスタイル=属性:属性値;
1-2メソッドは、属性値の後にある.漏れてはいけません.もう1つの上記の2つの方法の欠点は、可読性が悪いことである.

(3)cssファイルを単独でパブリッシュする

cssファイルを単独で作成する場合は、適用するhtmlファイルのheadラベルに次のリンクラベルを適用します.

<link rel="stylesheet" type="text/css" href="(파일경로)">

※CSSファイルにおけるコメント処理:/**/

3.設計アプリケーションの優先順位

(1)タグの関係による優先度の決定

タグの包含関係

<header>
          	<h1>Hello World</h1>
          	<p>Nice to Meet You</p>
 </header>
 
<footer>
	<h1>footer h1</h1>
	<p>footer p</p>
</footer>

→ 여기서 안에 속하는 것을 기준으로, header는 h1와 p의 부모태그, 반대로 h1와 p는 header의 자식태그이다. 같은 위치에 있는 h1태그와 p태그는 형제관계에 있는 태그이다.

関係の優先順位

1親ラベルの性質は子供ラベルにも適用される.
:ヘッダーに文字色赤が設定されている場合、文字色赤はサブラベルh 1およびpにも適用されます.
②本人の性格は親の性格より優先する.
:ヘッダーに文字色赤が設定されていても、h 1に文字色青が設定されていれば、h 1には独自の性質があるので、赤から青に変わります.
③親ラベルの性質は、すべての子ラベルには適用されません.
例えば、aタグについては、青色と下線の性質を持つため、親タグに赤色のスタイルを適用しても赤色ではなく青色で表示される.
④複数のラベルに同じ性質を付与したい場合は、使用します.
:、(カンマ)はandの性質を有するため、複数のタグに対して同じ性質を有することを望む場合はheader h 1、footer p{}と同じように入力することができる.

(2)選択者タイプによる優先度

選択者のタイプ

①タイプ選択者
:htmlタグアクセスに基づいてスタイルを適用する
ex) h1{ color: red;}
②アイデンティティ選択者(id=")
:htmlファイルにタグの名前を付けてスタイルを適用します.
名前が一意であるため、タグは属性値として1つのIDしか指定できません.
ex) #test1{color: blue}

[html파일]
<h2 id="test1">Something</h2>

[css파일]
#test1{color: blue;}

③クラス選択者(class="")
:htmlファイルでは、タグに別名を付けることでスタイルを適用します.
別名は名前とは異なり、複数の種類を指定できます.
ex) .test2{color: green;}

[html파일]
<h3 class="test2">Nothing</h3>

[css파일]
#test2{color: green;}

→ ②,③ 두가지 방법은 같은 태그를 여러번 사용했을 경우 그 중에서도 각기 다른 스타일을 적용하고 싶을때 사용자가 내용에 이름이나 별명을 붙혀주어 스타일을 입힐 수 있는 방법이다.④選報者
:属性セレクタ.typeの形態に応じて、異なるスタイルを適用します.
ex) input[type="text"] { border: solid 10px blue;}

選択者の書き換え順による

ちゅうぞう

styleプロパティ>id>class>tag順序適用スタイル
詳しく書けば書くほど優先度が高くなります.

2.CSSの複数属性

スペースの作成

{
width:(画素(px)またはパーセント(%)で表される);
height: ;
min-width: ;
max-width: ;
backgroung-color: ;
border:(色の太さの形式-順番なく書く);
border-radius:px(ラウンドを適用)
}

色の設定方法

①単語red、blueなどで表す
②色コードで#FFFFFを表示
③rgbをRGBコードで表す(123、111、21)

フォントの設定

{
font-size: ;
font-style: ;
font-family: ;
}

font-familyは、様々なフォントを、に分割し、すべてのアプリケーションではなく、順番に第1のフォントを適用します.第1の非適用ブラウザでは、第2のフォント...以下のように順次適用する.font-familyの最後の設定はsans-serifです.sans-serifはすべてのブラウザでエラーなく表示できます.

画像を挿入

{
width: 180px;
height: 180px;
background-color: yellowgreen;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right bottom;
}

スペースを作成すると、スペースより小さい画像を挿入すると、スペース内で繰り返し適用されます.

背景画像をフォトフレームに写真を入れるように想像すればいいです.フォトフレームが画像より大きいと空白が生じ、フォトフレームが画像より小さいとカットされた部分しか見えません.
Naver Logoのような情報を持つ画像は、css環境ではなくhtmlでimgタグを使用するべきである.その理由は,ネットワークアクセス性に関係し,imgタグはaltで画像の情報を入力できるが,背景画像を用いて画像の説明を含めることができず,視覚障害者は画像の情報を理解できないためである.したがって、情報性のある画像を挿入する場合は、imgタグを使用します.

[困難な点]

class選択者はあだ名なので、多くのあだ名を取ることができますが、これは理解できますが、なぜ1つのラベルにいろいろなあだ名をつけなければならないのですか?いずれにしても、色を適用すると最優先順位に設定された色しか適用されません...その部分は少し怪しい.

[解決策]

授業を受けながら今日の開発を整理し、同じh 2ラベルが複数ある場合はidまたはclassを用いてそれぞれ異なるスタイルを付与します.例えば、1級は文字色、2級は背景色です.第3クラスではフォントやフォントスタイルなどを設定し、1つのラベルに複数のカテゴリスタイルを適用する場合に使用できます.明日、指導者にもう一度質問して確認します.

[勉強の感想]

今日の進度は1時間半しかないので楽だと思いますが、今日は思ったよりも勉強量が多く、内容が少し複雑なようです.しかし、久しぶりに勉強の楽しさを感じたので、楽しく授業を受けています.本当に遅いですが、ますますホームページの先端に近づいてきたようです.