Eunice

<!--

※박스 속성

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

---------예제 풀어본거---------

<!DOCTYPE html>

<head>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

.clear { clear:both; }

a { display:block; color:#fff; text-decoration:none; }

.left {float: left; margin-right: 20px;}

.right {float: right; }

header { position:fixed; left:0; right:0; top:0; height:70px; background:rgb(77, 170, 199); z-index: 100;}

header p { text-align:center; line-height:70px;}

section { width:100%; margin-top:100px; padding-left: 20px; padding-right: 20px;}

section img { width:300px;}

section p {font-size: 14px;}

aside {position:absolute; right:50px; top:300px; z-index:10; width: 300px; height:150px; background: rgba(255, 0, 0, 0.8);}

aside a {float: right; margin: 10px 10px 0 0; }

aside p {padding-top:40px; text-align:center; color:white; font-size: 16px;}

footer { position: fixed; left:0; right:0; bottom:0; height:70px; margin-top: 100px; z-index: 100; background: pink; }

footer p { text-align: center; line-height: 70px;}

</style>

</head>

<body>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum, justo vehicula scelerisque malesuada, est dui vehicula sem, id vehicula orci ligula vel ex. Nam sit amet nisi ipsum. Mauris maximus finibus fringilla. Mauris quis commodo elit. Integer mattis sit amet magna in sollicitudin. Donec fringilla ligula sapien, et fermentum sem maximus vitae. Sed porta tempor efficitur. Cras dignissim ligula id leo euismod vulputate.</p>

<br>

<p> Suspendisse quis interdum orci, in gravida odio. Cras ante ex, consequat et finibus pharetra, dignissim nec dui. Aenean ullamcorper lectus ac ipsum convallis, a blandit sapien pulvinar. Vivamus volutpat eget urna eu condimentum. Praesent at sem diam. Suspendisse non pulvinar lorem. Praesent faucibus eros sed elit lobortis lobortis. Praesent eget metus purus. Integer enim enim, dictum ac venenatis at, tempor ut sapien.</p>

<br>

<p>Curabitur vel commodo augue. Donec sed viverra mi, id porta magna. Sed ultricies lectus vel tellus sodales pretium. Aenean fermentum libero at lorem vestibulum, non auctor ex imperdiet. Vestibulum bibendum neque congue mauris euismod molestie. Aenean a lacinia tortor, vel euismod ante. Fusce non consectetur turpis, sit amet tristique enim. Nulla metus justo, finibus vel consectetur sit amet, dapibus quis dolor. Suspendisse fermentum bibendum sapien, vitae sodales ante hendrerit at. Fusce porta fringilla molestie. Integer commodo eros ac arcu ornare, ac viverra nibh finibus.</p>

<br>

<p>Etiam eros turpis, rhoncus eget orci at, ultricies posuere augue. Phasellus sit amet malesuada nisi, sit amet condimentum risus. Praesent elit turpis, rhoncus at porta a, mollis ac turpis. Donec egestas felis felis, et ultrices neque gravida eget. Sed justo tellus, pretium nec congue blandit, tempus quis arcu. Morbi sed tempus leo. Proin est velit, sodales ut convallis ac, blandit at nisl. Phasellus a accumsan odio. Nunc auctor, ex id tristique gravida, tortor est sodales leo, quis tincidunt magna lorem et turpis. Suspendisse sodales condimentum vestibulum. Curabitur a lorem nec erat varius sodales. Suspendisse commodo scelerisque neque eu dictum. Vestibulum consequat velit ex, et condimentum quam tincidunt a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at felis augue.</p>

<br>

<p>Vestibulum at augue vel ante condimentum sodales. Integer id euismod ligula. Sed a enim eros. Ut bibendum nulla vel viverra fermentum. Nulla nec laoreet tellus. Nulla vitae rutrum tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis pharetra lectus ex, quis feugiat nisi ullamcorper nec. Proin rhoncus ultricies semper. Vivamus volutpat faucibus imperdiet.</p>

<br>

<p> Suspendisse quis interdum orci, in gravida odio. Cras ante ex, consequat et finibus pharetra, dignissim nec dui. Aenean ullamcorper lectus ac ipsum convallis, a blandit sapien pulvinar. Vivamus volutpat eget urna eu condimentum. Praesent at sem diam. Suspendisse non pulvinar lorem. Praesent faucibus eros sed elit lobortis lobortis. Praesent eget metus purus. Integer enim enim, dictum ac venenatis at, tempor ut sapien.</p>

<br>

<p>Curabitur vel commodo augue. Donec sed viverra mi, id porta magna. Sed ultricies lectus vel tellus sodales pretium. Aenean fermentum libero at lorem vestibulum, non auctor ex imperdiet. Vestibulum bibendum neque congue mauris euismod molestie. Aenean a lacinia tortor, vel euismod ante. Fusce non consectetur turpis, sit amet tristique enim. Nulla metus justo, finibus vel consectetur sit amet, dapibus quis dolor. Suspendisse fermentum bibendum sapien, vitae sodales ante hendrerit at. Fusce porta fringilla molestie. Integer commodo eros ac arcu ornare, ac viverra nibh finibus.</p>

<br>

<p>Etiam eros turpis, rhoncus eget orci at, ultricies posuere augue. Phasellus sit amet malesuada nisi, sit amet condimentum risus. Praesent elit turpis, rhoncus at porta a, mollis ac turpis. Donec egestas felis felis, et ultrices neque gravida eget. Sed justo tellus, pretium nec congue blandit, tempus quis arcu. Morbi sed tempus leo. Proin est velit, sodales ut convallis ac, blandit at nisl. Phasellus a accumsan odio. Nunc auctor, ex id tristique gravida, tortor est sodales leo, quis tincidunt magna lorem et turpis. Suspendisse sodales condimentum vestibulum. Curabitur a lorem nec erat varius sodales. Suspendisse commodo scelerisque neque eu dictum. Vestibulum consequat velit ex, et condimentum quam tincidunt a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at felis augue.</p>

</section>

<aside>

</aside>

</footer>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(7) (0)	2021.07.16
CSS 선수학습(6) (0)	2021.07.15
CSS 선수학습(4) (0)	2021.07.14
CSS 선수학습(3) (0)	2021.07.13
CSS 선수학습(2) (0)	2021.07.12

<!--

스타일시트의 속성은 크게 4개로 분류한다.

1.위치속성: 박스의 위치를 좌표값으로 지정한다.

2.박스속성: 박스의 크기와 여백을 지정한다.

3.글자속성: 텍스트의 스타일을 지정한다.

4.배경속성: 배경의 스타일을 지정한다.

-->

<!DOCTYPE html>

<head>

<title>위치(position) 속성</title>

<style>

.rbox {

position:relative; width:500px; height:400px;

margin:150px auto; background:#333; overflow:hidden;

}

.abox {

position:absolute; left:25px; top:25px;

width:300px; height:200px; background:#fc0;

}

.bbox {

position:absolute; right:-50px; bottom:-50px;

width:300px; height:200px; background:#f00; z-index: 9;

}

.cbox {

position:absolute; left:75px; top:75px;

width:300px; height:200px; background:#00f;

}

.pbox { width: 500px; height: 100px; margin: 200px auto; padding:20px; overflow: auto;}

.childBox { width: 95%; margin: 10px auto;}

/*블록형 박스에 위치속성을 지정하면 박스의 너비값이 0이 된다.*/

.fbox {

position:fixed; left:0; right:0; top:0; height:60px;

background:rgba(50, 102, 255,0.5);

}

</style>

</head>

<body>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.

</p>

</div>

</body>

</html>

-----------------------------

<!doctype html>

<head>

<style>

section {

position:relative; left:50%; top:50vh; width:800px; height: 500px; margin:-250px 0 0 -400px; background: #000;

}

section .abox {

position:absolute; left:50px; right:50px; top:50px; bottom:50px; background:#555;

}

section .bbox {

position:absolute; left:100px; right:100px; top:100px; bottom:100px; background:#999;

}

</style>

</head>

<body>

</section>

</body>

</html>

---------------------------------

<!--

position 속성의 값

1. relative(상대위치): 상대적인 위치(주변의 박스 위치에 영향을 받는다)를 지정한다. > 박스의 좌표 기준점을 변경할 때 사용한다. > 부모 요소에만 사용한다.

2. absolute(절대위치): 절대적인 위치를 지정한다. > 자식요소에만 사용한다. 부속 속성(left, top, right, bottom)을 반드시 사용한다.

3. fixed(고정위치): 박스를 고정한다. >부모 요소에 사용한다. 부속 속성을 사용한다. > 박스가 부유(공중으로 뜬다)한다.

*반응 선택자 (a 요소)

1. :hover >사용자가 마우스 포인터를 올린 요소를 선택한다.

2. :active >사용자가 클릭한 요소를 선택(클릭한 순간)한다.

*상태 선택자(input 요소)

1. :focus >입력폼에 커서를 위치시킬 때 선택한다.

2. :checked >입력폼을 체크할 때 선택한다. (check box, combo box, radio)

*구조 선택자(ul li 태그)

시멘틱 태그 또는 목록/항목 태그에 사용한다.

1. :first-child > 첫번째 위치에 있는 요소를 선택한다.

2. :last-child > 마지막 위치에 있는 요소를 선택한다.

3. :nth-child > 숫자 또는 수식에 해당하는 요소를 선택한다.

-->

<!DOCTYPE html>

<head>

<style>

.clear {clear:both;}

.container { width: 1200px; margin: 0 auto;}

header { height: 100px; border: 1px solid #000; }

aside { float: left; width: 400px; height: 400px; margin-top: 10px; border: 1px solid #000; }

article { float: right; width:790px; height: 400px; margin-top: 10px; border: 1px solid #000; }

ul li:first-child { color:royalblue;}

ul li:nth-child(3) { color:brown}

ul li:nth-child(2n) { background: thistle; }

ul li:nth-child(2n+1) { background: tomato; }

.name { background: tan;}

.name:focus { background: teal;}

footer { height: 100px; margin-top:10px; border: 1px solid #000; }

</style>

</head>

<body>

<ul>

</ul>

</article>

</div>

</body>

</html>

------------

<style>

ul {width: 500px; margin: 100px auto;}

ul li {float:left; list-style:none;}

ul li:nth-child(2n-1) {width: 150px; text-align: right;}

ul li:nth-child(2n) {width:340px; padding-left:10px;}

.lg {width:300px;}

</style>

<body>

<ul>

<li>이메일주소 : </li>

</ul>

</body>

'Coding' 카테고리의 다른 글

CSS 선수학습(6) (0)	2021.07.15
CSS 선수학습(5) (0)	2021.07.14
CSS 선수학습(3) (0)	2021.07.13
CSS 선수학습(2) (0)	2021.07.12
html 선수학습(7) (0)	2021.07.09

Eunice

CSS 선수학습(6)

'Coding' 카테고리의 다른 글

CSS 선수학습(5)

'Coding' 카테고리의 다른 글

CSS 선수학습(4)

'Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바