DAY3) CSS
14678 ワード
タグに直接作成(行内)
ユーザーを選択せずにHTMLで直接作成
数が多い場合に修正が必要なデメリット
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->
<div style="color: red;">태그에 직접 작성4</div> <!-- red -->HTMLに埋め込む(埋め込む)
個別のCSSのみを作成するため、選択者が必要です
CSSコードはHTMLに含まれています
一括変更が容易
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>HTML外部から読み込む
CSSファイルを使用するために複数のHTMLファイルをロードできます
<!-- HTML 1 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>
<!-- HTML 2 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기2</div> <!-- red -->
</body>例)
ファイルを保存する;command + s
./; 現在のファイルに基づいて、来週ファイルを検索します.
<link rel="stylesheet" href="./main.css">
選択者
HTMLの特定部分の記号を選択
ラベルで検索
選択者入力部に適用するタグの名前を入力
気に入らない場合は、タグが見つかります.
h 1ラベルを検索して赤に変更
Pラベルを見つけて青に変更
/*<h1>은 글자색이 빨강이야!*/
h1 {
color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
color: blue;
}
必要な要素を明確に検索するためにクラスセレクタが存在します
.title ; クラスセレクタ
肩書きのあるあだ名.
titleという名前の要素を検索し、文字の色を赤に指定します.
.main-text ;
/*class="title"은 글자색이 빨강이야!*/
.title {
color: red;
}
/*class="main-text"는 글자색이 파랑이야!*/
.main-text {
color: blue;
}
<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p><h1>제목2</h1>
<p>본문2</p>属性1
サイズ、余白、色など、目に見えるスタイルを指定できます.
サイズ
-width(横幅)
要素の幅を指定します.単位はpxです.
横x,縦y
div {
width: 300px;
요소가로너비: 너비값;
}エレメントの垂直幅の指定
div {
height: 150px;
요소세로너비: 너비값;
}無効化時に再入力
- font size
文字サイズの指定
何も指定しない場合は、文字サイズを16 px(default)に設定します.
で行ないます。
空白
エレメントの外側距離を指定するには
要素と要素の間の余白(距離、空間)を作成するための
div {
margin: 20px;
요소바깥여백: 여백값;
}; ショートカットのプロパティ
div {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
요소바깥여백-위쪽: 여백값;
요소바깥여백-오른쪽: 여백값;
요소바깥여백-아래쪽: 여백값;
요소바깥여백-왼쪽: 여백값;
};個々のプロパティ
指定要素の内側余白
div {
padding: 20px;
요소내부여백: 여백값;
};ショートカットのプロパティ
div {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
요소내부여백-위쪽: 여백값;
요소내부여백-오른쪽: 여백값;
요소내부여백-아래쪽: 여백값;
요소내부여백-왼쪽: 여백값;
};個々のプロパティ
速成。
テキスト色の指定
div {
color: red;
글자색상: 빨강;
}要素の背景色を指定する
div {
background-color: red;
요소배경: 빨강;
}Reference
この問題について(DAY3) CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@jeonbora/DAY3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol