6.30 AI SCHOOL CSS(1)開発ログ
✔ TODAY
今日からCSSについての進捗が始まりました.
HTMLは設計図、CSSは内装です.勉強の内容をよく知っていて、おしゃれをしています.😎
✔学習内容
CSSの起動
-CSSをHTMLに適用する方法
1)HTMLのheadにcss構文を加える.
2)適用するトピックにスタイル属性を作成し、css構文を直接適用します.
CSSの起動
-CSSをHTMLに適用する方法
1)HTMLのheadにcss構文を加える.
2)適用するトピックにスタイル属性を作成し、css構文を直接適用します.
-HTML headセクションで、次のコードのlinkタグを入力します.
<link rel="stylesheet" type="text/css" href="css주소">「3)」を使った書き方をお勧めします!
💥に注意
css構文"{属性:属性値;}
;そうしないと、次のcssコードが適用されない可能性があります.
💖Tip
cssの注釈処理はc言語の注釈処理と同じである.コメントのコメントはできません
-CSS優先度
<header>
<ul>
<li></li>
</ul>
</header>
<div></div>たとえば、上のソースコード構造です.
ヘッダー(親ラベル)>ul(子ラベル)
Li(それぞれ独立したli兄弟関係)
divとheaderは独立した関係、兄弟関係と見なすことができる.
CSSを遺伝子にたとえる.
親の遺伝(css)が子供に伝わる
<header>
<h1>header h1</h1>
<p> header p1</p>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>header{color: red;} header밑의 자식태그 색도 레드
footer{color: blue;} footer밑의 자식태그 색도블루header{color: red;}
h1{color: blue;} 이런경우, header의 h1 파랑색選択者
cssからhtml特定の領域にアクセスする方法
<h1>hello world</h1> (1)타입
<h2 id="test1" >nice to meet you</h2> (2)id
<h3 class="test2">welcome</h3> (3)class
<input type="text" placeholder="이름" >
<input type="password" placeholder="비밀번호"
(4)속성 h1{color: red;} ...(1)
#test1{color: blue;} ...(2)
.test2{color: green;}...(3)
input[type="text"]{border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}
...(4)1つのラベルに2つの値が含まれている場合、エラーは発生しません.
class(別名)
同じラベルに異なるデザインを適用する場合は、idとclassを使用します.
(タイプについては、共通のポイントとして適用できません)
スケートをする
どのようなデザインを優先するかについて.
属性値が同じである場合、
タイプ
<header id="intro">
<div class="container">
<h1>header h1 </h1>
</div>
</header>#intro div h1{color: green;} 하위 id코드보다 더 구체적
#intro h1{color: blue;} id
header h1{color: red;} 타입元の符号化で新しいcssを上書きするために使用
属性(1)
-スペースについて
div{ width: 100%; 넓이
height: 300px; 높이
min-width/height: 600px; 최소넓이/높이값
max-height/width: 800px; 최대높이/넓이값
border: solid 10px red; 테두리: 선종류
border-radius: 50px; 공간 꼭지곡선
background-color: yellow; 공간 색상
opacity: 0.5;} 투명도(0~1)-透明なので、背景色を設定するのが入門にいいです
-pxに設定すると、サイズは固定されます(固定値).
-%はブラウザのサイズを表します(ベースライン-親エンティティタグ、すなわちブラウザ/親タグはヘッダーに一致します(ヘッダーのサイズをあらかじめ設定します)=親タグに基づいてヘッダーになります)、スペースが大きくなります.(可変値変化)
-テキストについて
h1{ color: #eaeaea; 글자색상
font-size: 80px; 글자크기
font-style: initial; 글자스타일: 일반
font-family: 'Noto Sans KR', sans-serif; 폰트단체지정
font-weight: 100; 글자넓이
text-decoration: line-through; 글자선(취소선,밑줄)
text-align: center; 글자위치
background-color: pink; 글자배경색상(h1영역)
}Font Familians-serifで締めくくります!(ほとんどのブラウザで使用できるフォントだからです.
-イメージについて
#bg{ width: 900px; 이미지 넓이(액자)
height: 900px; 이미지 높이(액자)
background-color: yellow; 이미지배경색
background-image: url(icon.png); 이미지삽입
background-repeat: no-repeat; x-x축에만,y-y축에만, no 1개
background-position: top left; 이미지위치
}htmlとcssはどのように画像を配置します
Html
画像は切断されません(パーセンテージが破壊されても...)
css
スペースが画像より小さい場合、画像は切断されます.(フォトフレームに切り取った形状として表示されます)
フォトフレーム内に背景画像を用いて画像の概念を入れる.
Html-img>alt-Webアクセス性
css-読解困難者読解文章
✔学習内容の難点または未解決
✔ソリューションの作成
学習の心得.
今日は体が悪いので、授業に集中するのは難しい.しかし幸いなことに、基本概念なので、基本を集中的に学ぶしかありません.回復に集中し、明日は不足を補う.
VELOGより就職や徹夜が心配….ㅜgithubを連夜実行するため、gitインストール時に「config--global」は定義されていません...今晩git、concept、velogを設定します.
Reference
この問題について(6.30 AI SCHOOL CSS(1)開発ログ), 我々は、より多くの情報をここで見つけました https://velog.io/@leeminnjung9813/6.30-AI-SCHOOL-CSS1-개발일지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol