Web開発（5）：CS 2：属性

1.箱型

縦横長方形

width height

デフォルト:ブラウザの幅の計算
単位:px、em、vwなど

<span>Hello</span>
<span>World</span>

Hello World
// 가로 세로 모두 포함한 콘텐츠 크기만큼 자동으로 줄어듦 (인라인)

<div>Hello</div>
<div>World</div>

Hello World
// 가로는 부모요소 크기만큼 자동으로, 세로는 콘텐츠 크기만큼 자동으로 (블록)

min/max-width/height

最小/最大幅の制限なし단위

margin

がいぶマージン
デフォルト:ブラウザによる余白の計算
単位:px、em、vwなど
margin: top, right, bottom, left ;
margin: top, bottom left right ;
margin: top left,right bottom ;
margin: top right bottom left ;
margin-top
margin-bottom
margin-left
margin-right

padding

内部余白
デフォルト:ブラウザによる余白の計算
単位:px、em、vwなど
%:親要素の水平幅の割合を指定します.
padding: top, right, bottom, left ;
padding: top, bottom left right ;
padding: top left,right bottom ;
padding: top right bottom left ;
padding-top
padding-bottom
padding-left
padding-right

border

厚み:
border:線-厚さ線-種類線-色;

border: 4px solid black;

border-width: top, right, bottom, left ;
border-width: top, bottom left right ;
border-width: top left,right bottom ;
border-width: top right bottom left ;
border-style

none

solid

dashed

border-style: top, right, bottom, left ;
border-style: top, bottom left right ;
border-style: top left,right bottom ;
border-style: top right bottom left ;
border-color

black

色

transparent

border-color: top, right, bottom, left ;
border-color: top, bottom left right ;
border-color: top left,right bottom ;
border-color: top right bottom left ;색상
border-top/right/bottom/left:厚さタイプカラー;
border-top/right/bottom/left-width:厚さ;
border-top/right/bottom/left-style:タイプ;
border-top/right/bottom/left-color:色;
border-radius

0:ドットレス

単位:px、em、vwなど
同様border-radius:0.10 px 0;

box-sizing

content-box:要素の内容(content)でサイズを計算する
border-box:要素の内容+padding+borderを使用してサイズを計算

overflow

visible:オーバーフローの表示(デフォルト)
hidden:オーバーフロー内容の切り取り
スクロール:オーバーフロー内容を切り取り、スクロールバーを作成する
Auto:スクロールバーは、コンテンツがオーバーフローした場合にのみカットおよび作成されます.
overflow-x/overflow-y

display

block:ボックス(レイアウト)要素
inline:文字要素
inline-block:文字+ボックス要素
flex:Flexbox(1 Dレイアウト)
grid:グリッド(2 Dレイアウト)グリッド2 Dレイアウト
none:表示されないプロパティが画面から消えます
その他:table、table-row、table-cell等

opacity

透明度
1:不透明
0-1:透過性
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

2.フォント

font

font-style
デフォルト:傾斜なし
イタリックイタリックイタリック
斜体文字
font-weight
normal,400:デフォルト厚さ(デフォルト)
bold,700:厚くする
100～900:100、9個の数値単位、非正常および太字の厚さ
font-size
16 px:デフォルトサイズ
単位:px、em、remなど
font-family
serif:基板シリーズ
sans-serif:ゴシックフォントシリーズ

line

line-height
数値:要素のフォントサイズを指定する倍数
単位:px、em、remなど
推奨:倍数(1.4=16 pxX 1.4)
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

3.文字

color

rgb(0,0,0):黒(デフォルト)
色:その他の指定可能な色

text

text-allign
左:左揃え
右:右揃え
中心ちゅうしん:中央揃えちゅうしんはいち
正当性:両端揃え
text-decoration
none:無装飾
下線:下線
前の行
直線通過ちょくせんせんこう:中線ちゅうせん
text-indent
インデント
単位:px、em、remなど
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

4.背景

background

background-color
透明:透明(既定)
色:指定可能な色
bakground-image
none:画像なし
url(「パス」):イメージパス

background-color: orange;
background-image: url("./images/anthony.png");

background-repeat
repeat:垂直、水平に画像を繰り返す(デフォルト)
repeat-x:水平繰返し画像
repeat-y:垂直繰り返し画像
No-repeat:重複なし

background-color: orange;
background-image: url("./images/anthony.png");
background-repeat: no-repeat;

background-position
方向:top、bottom、left、right、center
単位:px、em、remなど

background-color: orange;
background-image: url("./images/anthony.png");
background-repeat: no-repeat;
background-position: top right;
background-position: 100px 30px;

background-size
単位:px、em、remなど
cover:スケールを維持し、より広い要素幅に適しています.
contain:スケールを維持し、短い要素幅に適しています.

background-color: orange;
background-image: url("./images/anthony.png");
background-repeat: no-repeat;
background-size: cover/contain;

background-attachment
スクロール:画像を要素に沿ってスクロール(デフォルト)
固定:画像をビューポートに固定し、Xをスクロールします.
local:要素内をスクロールすると、画像が一緒にスクロールします.

background-color: orange;
background-image: url("./images/anthony.png");
background-repeat: no-repeat;
background-size: cover/contain;
background-attachment: scroll;

ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

5.配置

position

静的:無条件(デフォルト)
相対:要素自体に基づく
absolute:位置親要素ベース
固定:ビューポートベース(ブラウザ)ビューポートベース
sticky:スクロール領域ベース

tob, bottom, left, right

Auto:計算ブラウザ
単位:px、em、remなど
relative

position: relative;
top: 30px;
left: 30px
ㅤ
요소 자신을 기준으로 얼마나 떨어져있는지

absolute

position: absolute;
top: 30px;
right: 30px
ㅤ
위치 상 부모 요소를 기준으로 얼마나 떨어져있는지
상위 요소가 relative라면 부모 요소 기준, 아니라면 뷰포트 기준
만약 부모요소 static, 부모의 부모 요소 relative라면 후자를 기준

fixed

position: fixed;
top: 30px;
right: 30px
ㅤ
뷰포트(브라우저)를 기준으로 배치

z-index

デフォルト:スタックの度合いは親要素と同じ
数字:数字が高いほど上になる
スタック順序(Stack order)
ユーザーに近い要素を特定
1.エレメントに位置属性の値がある場合は、そのエレメント上にスタック(デフォルトは静的除外)
2.条件が1と同じであればあるほど、z-index属性の値が高くなる
3.条件が同じ場合、HTMLで作成する時間が長ければ長いほど条件が高くなります

position: static;
z-index: 999;

positionのプロパティ値absoluteとfixedに指定した要素は、表示プロパティをblockに変更します.
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

6.ベンド(水平位置合わせ)

display: flex;

flex:ブロック要素のようにflexコンテナを定義する
inline-flex:flexコンテナ(行内要素など)を定義する
flex-direction(主軸の決定)
row:行軸(左->右)
row-reverse:行軸(右->左)
column:列軸(上->下)X
column-reverse:列軸(下->上)X
felx-wrap
nowrap:バンドルなし(改行)(デフォルト)
wrap:マルチライン
rivided-content(主軸に位置合わせ)
flex-start:flex itemsを始点に位置合わせ(デフォルト)
flex-end:flex itemsをエンドポイントに整列
center:flex items中央揃え
align-content(交差軸の位置合わせ)
streth:flex itemsと始点の位置合わせ
flex-start:flex itemsを始点に整列
flex-end:flex itemsをエンドポイントに整列
center:flex items中央揃え
allign-items(交差軸に1行揃え)
stretch:flex itemsを交差軸に引き伸ばす
flex-start:flex itemsを各行の始点に整列
flex-end:flex itemsを各行の端点に整列
center:flex items行ごとに中央揃え
order
0:順序なし(デフォルト)
数字:数字が小さいほど、まず
flex-grow(幅パーセント増加)
0:成長なし
数値:成長率
flex-srift(幅パーセントを減らす)
1:flexコンテナ幅による減算率の適用
数値:減少率
flex-basic(スペース割り当て前のデフォルト幅)
デフォルト:要素のコンテンツ幅
単位:px、em、remなど
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

7.変換

transition

transition: 속성명 지속시간 타이밍함수 대기시간transition-property
all:すべてのプロパティに適用
≪属性名｜Attribute Name｜ldap≫:変換効果を使用する属性名を指定します.
transition-duration
時間:期間の設定(s)
transition-timing-function
ease:遅い-速い-遅い
直線:一定
ease-in:遅い-速い
ease-out:高速-低速
ease-in-out:遅い-速い-遅い
transition-delay
0 s:遅延時間なし(デフォルト)
時間:指定ヒステリシス時間(s)
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

8.変換

transform

変換:変換関数1変換関数2変換関数3...;
変換ヘンカン:ピボット移動サイズの傾斜ピボット移動サイズの傾斜ピボットいどうさいずのけいしゃ;
<2 D変換関数>
translate(x,y)移動
translate(x)
translate(y)
scale(x,y)サイズ
かいてんかいてん
傾斜(x軸)
傾斜(y軸)
＜3 D変換関数)
透視(n)透視(距離)
一番前に作成

perspective

プロパティ:perspection:600 px;->オブジェクトに適用される親/perspection-originプロパティ
関数:transform:perspective(600 px)->オブジェクト/transform-originプロパティに適用->基点
親要素を付与するパースビュー:500 px;アドバイス!
backface-可視性(背面に隠すかどうか)
visible:背面を表示(デフォルト)
hidden:背面を隠す본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.