3/8(月)FrontEnd/CSS(3)

8.枠線に関するスタイル

1）ボーダー形状

選択者{*枠線の外観
border(-位置(右または左...)-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset ; }

2）枠の厚さ

border(-位置)-width:枠線の厚さ;

3）外枠の色

border(-位置)-color:枠線の色;

4）枠の厚さ、形状、色の同時表示

border(-位置):厚さ形状色;

5）エッジを丸くする

border(-top|bottom-left|right)-radius:数値;

6)境界シャドウ効果

box-shadow:横距離縦距離のぼかし度合いの広がり

[HTML]

<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
<div id="test5">test5</div>
<div id="test6">test6</div>
<div id="test7">test7</div>
<div id="test8">test8</div>
<div id="test9">test9</div>
<div id="test10">test10</div>

<button id="btn">로그인</button>

[CSS]
#test1{
border-style:dotted;
border-top-width:10px;
}

#test2{
	box-shadow:5px 5px 10px 5px gray;
}

#test3{
border-style:dashed;
border-right-color: red;
}

#test4{
border-right-style: double;
border-left-style: dotted;
border-top-style: dashed;
border-bottom-style: solid;
}

#test5{
border-width:10px;
border-style:groove;
border-top-left-radius: 50px; 
/* groove: 파낸 느낌, 왼쪽 상단만 둥그스름하게 */
}

#test6{
border-width: 10px;
border-style: ridge;
border-bottom-right-radius: 50px;
/* ridge: 튀어나온 느낌 */
}

#test7{
border-style:inset;
border-width: 10px;
border-top-left-radius: 50px;
border-bottom-right-radius: 60px;
background-color: yellow;
}

#test8{
border-style:outset;
border-width: 10px;
}

#test9{
border-style: solid;
border-radius: 50px;
}

#test10{
border: 2px solid pink;
}

#btn{
	border:none;
    border-radius: 10px;
    padding:10px;
}

9.背景に関するスタイル(背景~)

1) background-color

:背景色の指定

[HTML]
<div id="div-bg">산업혁명의 발상지인 맨체스터가 면직물을 시작으로 기계, 식품, 화학, 전자 등 전세계 상공업에 중심도시로 성장,
바다를 둔 인접도시 리버풀이 그 외항으로 사용되면서 함께 성장하였다. 19세기에는 세계 물동량의 절반이 리버풀 항구를 거쳤을 만큼 세계적인 무역항[5]을 갖춘 도시였다.[6]
이 당시 리버풀은 런던보다 부유한 도시여서 “대영제국은 리버풀 덕에 가능했다”는 말까지 돌았을 정도로 찬란한 역사를 가진 도시였다.[7]
</div>

[CSS]
<style>
body{background-color: skyblue;}
#div-bg{
  	background-color: white;
  	width:50%;
  	border: 30px solid blue;
  	}
</style>

2) background-clip

:適用背景の範囲を指定します.
選択プログラム{background-clip:border-box(デフォルト)|padding-box|content-box;}

[HTML]
<div class="div-test" id="div1">산업혁명의 발상지인 맨체스터가 면직물을 시작으로 기계, 식품, 화학, 전자 등 전세계 상공업에 중심도시로 성장,
바다를 둔 인접도시 리버풀이 그 외항으로 사용되면서 함께 성장하였다. 19세기에는 세계 물동량의 절반이 리버풀 항구를 거쳤을 만큼 세계적인 무역항[5]을 갖춘 도시였다.[6]
이 당시 리버풀은 런던보다 부유한 도시여서 “대영제국은 리버풀 덕에 가능했다”는 말까지 돌았을 정도로 찬란한 역사를 가진 도시였다.[7]
</div>

<div class="div-test" id="div2">산업혁명의 발상지인 맨체스터가 면직물을 시작으로 기계, 식품, 화학, 전자 등 전세계 상공업에 중심도시로 성장,
바다를 둔 인접도시 리버풀이 그 외항으로 사용되면서 함께 성장하였다. 19세기에는 세계 물동량의 절반이 리버풀 항구를 거쳤을 만큼 세계적인 무역항[5]을 갖춘 도시였다.[6]
이 당시 리버풀은 런던보다 부유한 도시여서 “대영제국은 리버풀 덕에 가능했다”는 말까지 돌았을 정도로 찬란한 역사를 가진 도시였다.[7]
</div>

<div class="div-test" id="div3">산업혁명의 발상지인 맨체스터가 면직물을 시작으로 기계, 식품, 화학, 전자 등 전세계 상공업에 중심도시로 성장,
바다를 둔 인접도시 리버풀이 그 외항으로 사용되면서 함께 성장하였다. 19세기에는 세계 물동량의 절반이 리버풀 항구를 거쳤을 만큼 세계적인 무역항[5]을 갖춘 도시였다.[6]
이 당시 리버풀은 런던보다 부유한 도시여서 “대영제국은 리버풀 덕에 가능했다”는 말까지 돌았을 정도로 찬란한 역사를 가진 도시였다.[7]
</div>

[CSS]
<style>
.div-test {
            margin:30px;
            border:10px dashed black;
            padding:20px;
            background-color: yellow;
	   }
#div1{background-clip: border-box;}
#div2{background-clip: padding-box;}
#div3{background-clip: content-box;}
</style>

3)背景-画像:url(画像パス);

[CSS]
background-image: url("resources/image/bgsample.PNG");
            /* 이미지 경로 지정 */
            /* 자동이미지 반복: 가로,세로 크기만큼 */

4) background-repeat: repeat | repeat-x | repeat-y | no-repeat;

[CSS]
background-repeat: no-repeat; 
   /* 이미지 반복하지 않겠다. */ 

5) background-size: auto | contain | cover | px px |% %;

[CSS]
background-size:80% 80%;
/* %로 하면 가변길이, px로 고정하면 고정길이 */

6)背景-位置:左/右/中上/中/中/px/%;

[CSS]
background-position: right bottom;
      /* 그림 오른쪽 아래로 붙이기 */

7) background-attachment: scroll | fixed;

[CSS]
background-attachment: fixed;
/* fixed : 고정되어서 내가 스크롤 올려도 비율 위치 유지 */

10.レイアウトに関するスタイル

1) weight, height

:コンテンツ領域(コンテンツ)のサイズを変更するプロパティ

1)-(1)固定サイズ(px)

1）-(2)可変サイズ(%)(親要素ベース)

[HTML]
<h4> 고정크기(px)</h4>
<div id="test1" class="size-test"></div>

<h4> 가변크기(%) (부모요소를 기준으로)</h4>
<div id="test2" class="size-test"></div>

[CSS]

2）表示（画面配置の変更）

:ブロック要素と行内要素の属性を変更して配置方法を変更できます.
選択プログラム{display:inline|block|inline-block;}

2)-(1) display:inline

:既存のblock要素divを行内要素に置き換える
※参考:display:inlineはwidth,heightスタイル属性は適用されません

[HTML]
<div class="block area1 block-test1">첫번째영역</div>
<div class="block area2 block-test1">두번째영역</div>
<div class="block area3 block-test1">세번째영역</div>
<div class="block area4 block-test1">네번째영역</div>
<div class="block area5 block-test1">다섯번째영역</div>
     
[CSS]
.block{
            border:1px solid black;
            width:150px;
            height: 150px;
        }

        .area1{background:red;}
        .area2{background: yellow;}
        .area3{background:pink;}
        .area4{background:yellowgreen;}
        .area5{background:purple;}

        .block-test1{display:inline;}

2)-(2) display:inline-block

※注意:inline blockを使用すると、横にエリアを置き、width、height属性を維持します

[CSS]
.block-test2{display:inline-block}
/* width,height 유지하면서 inline요소로 바꿔주기 */

2)-(3) display:block

:inline要素spanタグをblock要素に置き換える

[CSS]
.block-test3{display:block}

3)レイアウトに関するスタイル(相対位置と絶対位置)

position:相対(相対)|絶対(絶対);

relative

＜特性＞
(1)位置は、それまで自分がいた位置を基準とする.
(2)位置を移動しても、以前と同じ位置と認識されるため、他の何物の影響も受けない.

absolute

＜特性＞
(1)誰の影響も受けない.△もともと、スクリーン全体が標準だった.
(2)親要素を基準にして使いたい位置に置かなければならない.

4）固定位置（position：fixed）

:複数の位置をスクロールし、固定位置で一定のままにします.

5) visibility

:一部の要素を表示または非表示にするプロパティ(非表示でスペースを使用)
<->display:none(見えない、スペースも取らない)

6) z-index

:ページ内の要素の属性z-indexを順番に上へ積み重ねます.数値が高い場合は上書きし、低い場合は非表示(消去)
デフォルトではposition:absoluteプロパティが必要です.

7) float

:ページ内の要素の位置を左揃えまたは右揃え
=>タグを使用してfloat要素を削除