반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 웹요소의 위치 지정 position 속성
값 absolute 절대값 , relative 상대적인 값,
static 문서흐름배치 기본값, fixed 브라우저 창 기준 배치
left right top bottom 속성 : 숫자값*/
/* 전체 밖 안 여백 0 */
*{
margin: 0px; padding: 0px;
}
/* p태그 너비 300px 테두리선 두께 1px 실선 회색 안여백 10px */
p{
width: 300px; border: 1px solid silver; padding: 10px;
}
#p1{
position: absolute;
/* 왼쪽에서 50px 떨어진 위치, 위에서 50px 떨어진 위치 */
left:50px;
top: 50px;
}
/* p2 절대값 오른쪽에서 100px 떨어진 위치, 위에서 100px 떨어진 위치 */
#p2{
position: absolute;
right: 100px; top: 100px;
}
/* p3 절대값 왼쪽에서 100px 떨어진 위치, 아래쪽에서 100px 떨어진 위치 */
#p3{
position: absolute;
left: 100px; bottom: 100px;
}
</style>
</head>
<body>
<h1>css/test15.html</h1>
<p id="p1">첫번째 내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1</p>
<p id="p2">두번째 내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2</p>
<p id="p3">세번째 내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* p태그 전체 너비 500 높이 200 배경색 테두리 1 실선 배경색 줄간격 2 */
p{
width: 500px; height: 200px; background-color: yellow;
border: 1px solid silver; line-height: 2
}
/* id="static" 포지션 static */
#static{
position: static;
}
/* id="relative1" 포지션 relative */
#relative1{
position: relative;
}
/* id="relative2" 포지션 relative
왼쪽에서 부터 100px, 위에서 -50px */
#relative2{
position: relative;
left: 100px; top: -50px;
}
/* id="fixed" 너비 100 높이 100 배경색
포지션 fixed 오른쪽 기준 30px 위 기준 30px*/
#fixed{
width: 100px; height: 100px; background-color: green;
position: fixed; right:30px; top: 30px;
}
</style>
</head>
<body>
<h1>css/test16.html</h1>
<p id="static">첫번째 내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1내용1</p>
<p id="relative1">두번째 내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2내용2</p>
<p id="relative2">세번째 내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3내용3</p>
<p id="fixed"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* section 너비 800 가운데 정렬 */
section{
width: 800px; margin: 0 auto;
}
/* h2태그 글자크기 1.5em */
h2{
font-size: 1.5em;
}
/* h3 글자크기 1.0em */
h3{
font-size: 1.0em;
}
/* p태그 줄간 20px 글자크기 12px */
p {
line-height: 20px; font-size: 12px;
}
/* article 태그 왼쪽 플로터 , 너비 350 높이 200 밖여백 10 안여백 10
테두리 1 실선 회색*/
article{
float: left; width: 350px; height: 200px;
margin: 10px; padding: 10px;
border: 1px solid silver;
}
/* footer 왼쪽 플러터 해제, 너비 100% 높이 50 배경색 */
footer{
clear: left; width: 100%; height: 50;
background-color: green;
}
/* footer 안에 P 태그 글자색 흰색, 글자크기 0.9em, 글자정렬 center
줄간격 50px */
/* 위아래 가운데 height: 50; 줄간격 50px */
footer p{
color: white; font-size: 0.9em; text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h1>css/ex15.html</h1>
<section>
<h2>강아지 용품 준비하기</h2>
<article>
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article>
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article>
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article>
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-image: url("bg1.jpg");
/* background-repeat 속성
값 repeat;repeat-x; repeat-y;no-repeat; */
background-repeat: no-repeat;
/* 배경 이미지 위치지정 background-position 속성
수평 left center right 백분율 길이값
수직 top center bottom 백분율 길이값*/
background-position: center top;
/* 배경이미지 고정 background-attachment 속성
값 scroll 스크롤에 따라서 움직임 기본값, fixed 고정 */
background-attachment: fixed;
/* 배경이미지 크기조절 background-size */
background-size: 200px;
}
/* class="desc" 배경색 테두리 5px 점선 실버색
너비 350 안여백 20 오른쪽밖여백 20px 왼쪽 플로터 */
.desc{
background-color: green;
background-image:url("icon.png");
background-repeat:no-repeat;
border: 5px dotted silver;
width: 350px; padding: 20px; margin-right: 20px;
float: left;
}
/* 배경색 적용 범위 조절 background-clip 속성 */
/* border-box 태두리까지 적용 기본값 */
/* padding-box 패딩범위 content-box 내용부분만 적용 */
#clip1{
background-clip: border-box;
/* 배경이미지 적용 범위 조절 */
background-origin: border-box;
}
#clip2{
background-clip: padding-box;
background-origin: padding-box;
}
#clip3{
background-clip: content-box;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>css/test17.html</h1>
<div id="container">
<div class="desc" id="clip1">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip2">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="desc" id="clip3">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
<p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-color: #02233b;
}
#container{
margin: 0 auto;
width: 600px; height: 700px;
border: 1px dotted gray;
padding: 20px;
/* background-color: white; */
/* background-image: url("mic.png"); */
/* background-repeat: no-repeat; */
/* background-position: right bottom; */
background: white url("mic.png") no-repeat right bottom;
}
h1 {
background-color: #004344;
color: white;
text-align: center;
padding: 20px;
}
h2{
text-align: center;
font-style: italic;
margin-bottom: 50px;
}
h3{
color: #cf3b00;
}
ul {
list-style: none;
}
li{
line-height: 30px;
}
</style>
</head>
<body>
<h1>css/ex16.html</h1>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 편집</li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0px; padding: 0px;
}
body {
background-color: #ccc;
padding: 20px;
}
form {
background-color: white;
border: 1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
}
form fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
/* fieldset:last-of-type 필드셋중에 마지막 필드셋 */
form fieldset:last-of-type {
border: none;
}
form legend{
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
form ul li{
/* 줄간격 30px, 스타일 없음, 안여백 5px 10px, 밖아래 2px */
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form label{
float:left;
font-size: 13px;
width: 110px;
}
form input[type=text],
form input[type=password],
form input[type=email],
form input[type=tel]{
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
padding: 5px;
width: 200px;
}
form input[type=submit]{
/* 테두리 1px 실선 #222, 모서리 둥글게 20px, */
/* 폰트크기 16px, 글자간격 1px, 안여백 7px 25px */
/* 밖여백 자동auto */
border: 1px solid #222;
border-radius: 20px;
font-size: 16px;
letter-spacing: 1px;
padding: 7px 25px;
margin: auto;
display: block;
}
form input[type=submit]:hover{
background-color: #222;
color: white;
}
/* 태그상에 required 표시된곳을 빨간색테두리 변경 */
form input[required]{
border: 1px solid red;
}
/* 태그상에 readonly 표시된곳을 테두리 없앰 */
form input[readonly]{
border: none;
}
</style>
</head>
<body>
<h1>css/ex17.html</h1>
<form action="a.jsp" method="get">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li><label>아이디</label>
<input type="text" name="id" autofocus required></li>
<li><label>비밀번호</label>
<input type="password" name="pass" required></li>
<li><label>비밀번호 확인</label>
<input type="password" name="pass2" required></li>
<li><label>회원등급</label>
<input type="text" name="level" value="준회원" readonly></li>
</ul>
</fieldset>
<fieldset>
<legend>개인정보</legend>
<ul>
<li><label>이름</label>
<input type="text" name="name" placeholder="5자미만 공백없이" required></li>
<li><label>메일 주소</label>
<input type="email" name="email" placeholder="abcd@domain.com" required></li>
<li><label>연락처</label>
<input type="tel" name="tel"></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="제출">
</fieldset>
</form>
</body>
</html>
반응형
'CSS' 카테고리의 다른 글
| [CSS] div, ul, box-sizing, display,float, a:hover, #container, #header, #sidebar, #contents, #footer (0) | 2021.11.02 |
|---|---|
| [CSS] line-height, text-decoration, text-shadow, list-style-type, border-style (0) | 2021.11.02 |
| [CSS] 하이퍼링크, 목록리스트,table, border ,caption-side, padding, margin, text-align (0) | 2021.11.02 |
| [CSS] Position (0) | 2021.11.01 |
| [CSS] Display (0) | 2021.11.01 |