CSSデフォルトスタイル

フォント、テキストに関連するスタイル
font-family:フォントグループ

複数のユーザーが

を指定し、コンピュータにフォントが指定されないようにします.

  p { font-family: 돋움; }
  p { font-family: "맑은 고딕", 돋움, 굴림; }

font-size:文字数
単位コメントコメントpx絶対サイズ:ディスプレイ上のプレースホルダでは、ブラウザで=>低アクセスem相対サイズを調整できません.すなわち、親のサイズ、比例して重畳された平方rem相対サイズ:親のサイズ、例えば子のサイズ、通常は16 pxです.
font-style:フォントスタイル
値説明備考一般フォント斜体斜体字=>主に斜体字斜体字を使用
色:文字の色

/* 빨강 + 초록 + 파랑 (0~255) */
p { color: rgb(0, 0, 255); }

/* 빨강 + 초록 + 파랑 (0~255) + 불투명도 (0~1) */
p { color: rgba(0, 0, 255, 0.5); }

/* 16진수 표기 */
p { color: #FF0000 }

text-装飾:文字に線を引く

p { text-decoration: none; } 
p { text-decoration: underline; } /* 밑줄 */
p { text-decoration: overline; } /* 윗줄 */
p { text-decoration: line-through; } /* 취소선 */

文字間隔もじかんかく:文字間隔の調整もじきょりのちょうせい

ピッチ調整

p { letter-spacing: 0.1em; }

text-align:テキストの整列

block、inline block、table要素

ブロック要素内のinline要素

を配列する

/* left, right, center, justify */
p { text-align: left; }

line-height:行間

記事の行間(行高)

p { line-height: 24px; }
p { line-height: 1.25; }
p { line-height: 1.25em; }
p { line-height: 125%; }

List-style:ulリストの項目記号をクリアする

ul { 
  list-style: none;
}

不透明度ふとうめいど:不透明度ふとうめいど

span {
  opacity: 0.5;
}

ボックスに関連するスタイル
Width,height:高さと幅
単位説明px絶対サイズ:ディスプレイ上の一点%相対サイズ:親サイズに比例vw相対サイズ:ビューポート幅の1/100 vh相対サイズ:ビューポート高さの1/100 vmax相対サイズ:ビューポート幅、高さ中長の1/100 vmin相対サイズ:ビューポート幅、高さ中短の1/100
マージンマージン:外側マージン

/* 상하좌우 24px */
.inner {
  margin: 24px;
}

/* 상하좌우 각각 설정 */
.inner {
  margin-top: 24px;
  margin-right: 48px;
  margin-bottom: 0;
  margin-left: 12px;
}

/* 상-우-하-좌 (시계방향) 순으로 설정 */
.inner {
  margin: 24px 48px 0 12px;
}

/* 상하(12px) 좌우(48px) */
.inner {
  margin: 12px 48px;
}

/* 상하(12px) 좌우(중앙정렬)  */
.inner {
  width: 300px;
  margin: 12px auto;
}

padding:内側マージン

/* margin과 동일한 방식 */

.outer {
  padding: 24px;
}

.outer {
  padding-top: 24px;
  padding-right: 48px;
  padding-bottom: 0;
  padding-left: 12px;
}

.outer {
  padding: 24px 48px 0 12px;
}

.outer {
  padding: 12px 48px;
}

border:枠線

border:(線の太さ)(線のスタイル)(線の色);

線スタイルは、実心直線の破線点が長い破線を示します.

div {
  border: 1px solid black;
}

border-radius:フィレット

div {
  border-radius: 8px;
}

div {
  border-radius: 50%;
}

/* 각 모서리마다 설정 가능 */
div {
  border-radius: 24px 0 25% 50%;
}

背景:背景
属性説明背景-色背景色背景-画像背景画像背景-サイズ背景画像サイズ背景-位置背景画像位置背景-重複背景画像

div {
  background-color: green; 
  background-image: url("./nature.jpg");
  background-size: 50% 50%;
  background-position: 50px 50%;
  background-repeat: no-repeat;
}

box-shadow:シャドウシャドウ

box-シャドウ:(x軸位置)(y軸位置)([オプション]展開)(色)

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}