CSS 선수학습(6)

2021. 7. 15. 11:27

<!--

※박스 속성

1.너비와 높이(width and)

속성값의 단위: 고정값(px), 가변값(%)

> 너비값: 부모요소는 고정 px사용, 자식요소는 %사용.

> 높이값: 모든 요소에 고정px 사용을 권장한다.

max-width:800px; 이면 박스 크기가 800px 이상 커지지 않는다.

min-width:400px; 이면 박스 크기가 400px 이하로 작아지지 않는다.

box-sizing:border-box; 는 박스에 width와 height가 적용된 경우에만 적용된다.

2.마진과 패딩(margin and padding)

박스에 여백(빈공간)을 지정한다.

마진(margin)은 박스 레이아웃(배치)을 구현하기 위해 사용한다. (음수 값 사용.)

패딩(padding)은 박스의 영역을 확장할 때 사용한다. 글자를 저장한 경우 글자의 위치를 이동한다.

3.보더(border)

박스의 테두리를 지정한다.

border: 두께 스타일 색상 ;

두께는 px단위로 지정한다. 스타일은 solid(선), dashed(점선), dotted(점) 세 가지가 있고 색상은 헥사코드(#000)를 주로 사용한다.

border-top, border-left, border-bottom, border-right 속성으로 부분만 적용할 수 있다.

※ border-radius 속성

박스의 모서리를 둥글게 처리한다.

기본 문법: border-radius:값; > 값(주로 px단위)이 클수록 둥글어진다(4px미만은 잘 적용되지 않는다). 모든 모서리에 적용된다.

border-top-left-radius /border-top-right-radius /border-bottom-left-radius /border-bottom-right-radius 혹은 border-radius: 값1 값2 값3 값4;를 이용하여 각각 적용 가능.

border-radius: 값1(top-left&bottom-right) 값2(top-right&bottom-left);

4.박스 그림자

box-shadow:값1 2 3 4;

값1>오른쪽 그림자의 거리

2>아래쪽 그림자의 거리

3>번짐의 정도

4>그림자의 색상

-->

<!DOCTYPE html>

<head>

<style>

img {width:500px; margin: -150px 200px 50px 100px; /*top right bottom left*/

padding: 30px 50px; /* top, bottom/ left, right*/

border: 5px solid red; }

.container { width:100%; max-width: 1400px; margin:0 auto; background: #e2e2e2;}

.box1, .box2, .box3 { width: 350px; height: 150px; border: 1px solid #000}

.box1 { background: skyblue;}

.box2 { margin:-50px 0 0 50px; background: lemonchiffon;}

.box3 { margin: 20px auto; background: pink;}

h2 { margin-top:200px; font-size: 42px; text-align: center; text-transform: uppercase;}

.radius div{ width: 250px; height: 250px; margin: 20px auto; background:wheat;}

.rbox1 { border-radius: 20px;}

.rbox2 { border-radius: 10px 150px;}

.rbox3 { border-radius: 30px 80px 130px 180px;}

.rbox4 { border-radius: 50%;}

.rbox5 { width:300px; height: 100px; margin: 20px auto; border-radius: 50px; background: wheat;}

.shadow { background: thistle;}

.shadow .sbox1, .shadow .sbox2, .shadow .sbox3, .shadow .sbox4, .shadow .sbox5 , .shadow .sbox6 , .shadow .sbox7 , .shadow .sbox8 { width: 300px; height: 150px; margin: 25px auto; background: indianred;}

.shadow .sbox1 { box-shadow: 10px 10px 10px cornflowerblue; }

.shadow .sbox2 { box-shadow: inset 0 5px 15px cornflowerblue; }

.shadow .sbox3 { box-shadow: inset 0 0 30px cornflowerblue; }

.shadow .sbox4 { box-shadow: -5px -5px 0 cornflowerblue; }

.shadow .sbox5 { box-shadow: 0 10px 15px cornflowerblue; }

.shadow .sbox6 { box-shadow: 0 0 0 20px cornflowerblue; }

.shadow .sbox7 { box-shadow: inset -10px -10px 25px cornflowerblue; }

.shadow .sbox8 { box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.3); transition: all 0.4s ease-in; }

.shadow:hover .sbox8 {box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 06);}

.circle {

position: relative;

width: 300px; height: 300px; margin: 150px auto;

background: turquoise; border-radius: 50%;

box-shadow: inset 0 0 0 30px rgba(255, 255, 255, 0.4), 0 0 0 2px rgba(0,0,0,0.8);

transition:all 0.4s ease-in;

}

.child {

position: absolute; left: 30px; top:30px;

width: 240px; height: 240px;

background: rgba(0, 0, 0, 0.3); border-radius: 50%; z-index: 9;

transition:all 0.4s ease-out 0.2s;

}

.circle p {

position:absolute; left: 50%; top:50%;

width: 150px; height: 50px;

margin: -25px 0 0 -75px; padding: 0; z-index: 10;

font-size: 42px; color: #fff; text-align:center; line-height:42px; text-transform:uppercase;

}

.circle:hover {

box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5);

}

.circle:hover .child {left:10px; top:10px; width: 280px; height: 280px;}

.circle:hover p { color:#000; }

</style>

</head>

<body>

</div>

<h2>BORDER-RADIUS</h2>

</div>

<h2>box-shadow</h2>

</div>

</div>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(8) (0)	2021.07.19
CSS 선수학습(7) (0)	2021.07.16
CSS 선수학습(5) (0)	2021.07.14
CSS 선수학습(4) (0)	2021.07.14
CSS 선수학습(3) (0)	2021.07.13

Eunice

CSS 선수학습(6)

'Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바