<!--
스타일시트의 속성은 크게 4개로 분류한다.
1.위치속성: 박스의 위치를 좌표값으로 지정한다.
2.박스속성: 박스의 크기와 여백을 지정한다.
3.글자속성: 텍스트의 스타일을 지정한다.
4.배경속성: 배경의 스타일을 지정한다.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<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 class="rbox">
<div class="abox"></div>
<div class="bbox"></div>
<div class="cbox"></div>
</div>
<div class="pbox">
<p class="childBox">
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>
<div class="fbox"></div>
</body>
</html>
-----------------------------
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테스트</title>
<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>
<div class="abox"></div>
<div class="bbox"></div>
</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>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<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>
<div class="container">
<header>헤더부분</header>
<aside>사이드 바</aside>
<article>
<h2>본문제목</h2>
<p>본문</p>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
</ul>
<input type="text" placeholder="이름 입력" class="name">
</article>
<div class="clear"></div>
<footer>푸터부분</footer>
</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>
<li><input type="text" name="name" required></li>
<li>이메일주소 : </li>
<li><input type="email" name="email" required class="lg"></li>
<li>연락처 : </li>
<li><input type="tel" name="tel" required></li>
<li>홈페이지 주소 : </li>
<li><input type="url" name="home" required></li>
<li>주소 : </li>
<li><input type="text" name="address" required class="lg"></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 |