単位、背景、ボックスモデル
5389 ワード
📚BoostcourseのWeb UI開発課ノート
レッスンリンク
📑CSS属性
1.単位
-絶対長さ
👉固定サイズ単位、他の要素のサイズの影響を受けない
-画面サイズは固定されていますが、相対的なサイズはデバイスの解像度に依存します.
-設計意図を反映するウェブサイトでは、ピクセル単位
-ptはWeb開発推奨の単位ではありません
-Windowsでは9 pt=12 px、Macでは9 pt=9 px
-相対長さ
👉相対長さは、他の要素のサイズやフォントサイズ、ブラウザなどのサイズによって変化します.
-親の割合で換算するサイズ
-font-size換算値
-最大3桁の小数点を表すことができる
2.色
-色キー
red、blue、blackなどの事前定義キーワード
-16進数
ex. #000000
-16進数
ex. #000
- RGB( )
ex. #rgb(10, 255, 2)
- RGBA( )
ex. #rgb(10, 255, 2, 1)
各変数(R赤、G緑、B青、A透明度)の強度は、
3. background
- background-color
👉 default : transparent
- background-image
👉 default : none
プロパティ
- background- repeat
👉 default : repeat
属性
repeat
- x, y축 으로 모두 반복
repeat-x
- x 축 방향으로만 반복
repeat-y
- y 축 방향으로만 반복
no-repeat
- 이미지를 반복하지 않음- background-position
👉 default : 0% 0%
属性
値
%
- 기준으로부터 % 만큼 떨어진 지점에 위치
px
- 기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치
키워드
- top, left, right, bottom, center 키워드를 사용
- top, bottom은 y축 기준 left, right는 x축을 기준으로 합니다.
- background-attachment
👉 default : scroll
プロパティ
scroll
- 배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않음
local
- 배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됨
fixed
- 배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않음
-背景サムネイル
background: [-color] [-image] [-repeat] [-attachment] [-position];4. boxmodel
-コンテンツ領域
-ボーダー領域
-Padding領域
-Margin領域
5. border
- border-width
👉 default : medium
border-top-width
border-bottom-width
border-right-width
border-left-width
축약형
- border-width: [top] [right] [bottom] [left];
키워드
- thin, medium, thick
단위
- px, em, rem ... ( % , 정수 단위 사용불가 )- border-style
👉 default : none
プロパティ.
border-top-style
border-bottom-style
border-right-style
border-left-style
축약형
- border-style: [top] [right] [bottom] [left];
none
- border를 표시 하지 않습니다.
solid
- border를 실선 모양으로 나타냅니다.
double
- border를 이중 실선 모양으로 나타냅니다.
dotted
- border를 점선 모양으로 나타냅니다.- border-color
👉 default : currentColor
border-top-color
border-bottom-color
border-right-color
border-left-color
축약형
- border-color: [top] [right] [bottom] [left];-borderサムネイル
border: [-width] [-style] [-color];6. padding
👉 default : 0
length
- 고정값으로 지정합니다. (ex. px, em ....)
percent
- 요소의 width에 상대적인 크기를 지정합니다.
padding-top
- content 영역의 위쪽 여백을 지정합니다.
padding-right
- content 영역의 오른쪽 여백을 지정합니다.
padding-bottom
- content 영역의 아래쪽 여백을 지정합니다.
padding-left
- content 영역의 왼쪽 여백을 지정합니다.-サムネイルを入力
padding: [-top] [-right] [-bottom] [-left];
0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
0 10px 20px /* 좌, 우 같음 */
0 10px /* 상, 하 같음 & 좌, 우 같음 */
0 /* 상, 우, 하, 좌 모두 같음 */7. margin
👉 default : 0
length
-고정값으로 지정합니다. (ex. px, em ....)
percent
-요소의 width에 상대적인 크기를 지정합니다.
auto
-브라우저에 의해 계산된 값이 적용 됩니다.
margin-top border
-영역의 위쪽 여백을 지정합니다.
margin-right border
-영역의 오른쪽 여백을 지정합니다.
margin-bottom border
-영역의 아래쪽 여백을 지정합니다.
margin-left border
-영역의 왼쪽 여백을 지정합니다.-エッジサムネイル
margin: [-top] [-right] [-bottom] [-left];
0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
0 10px 20px /* 좌, 우 같음 */
0 10px /* 상, 하 같음 & 좌, 우 같음 */
0 /* 상, 우, 하, 좌 모두 같음 */-自己幅以外の余白を平均分割し、
8.余白と塗りつぶしの比較
+ - auto 단위
margin o o o px, % ...
padding o x x px, % ...
👉%는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정Reference
この問題について(単位、背景、ボックスモデル), 我々は、より多くの情報をここで見つけました https://velog.io/@mseo39/단위-배경-박스모델テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol