본문 바로가기
공부일지

230925 HTML

CD가참둥그렇다 2023. 9. 25. 12:11

테스트 20. box-shadow 프로퍼티로 박스 그림자 만들기

  • box-shadow를 이용해 다양한 스타일의 그림자를 만들 수 있다
  • text-shadow와 같은 양식으로 작성할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div에 박스 그림자 만들기</title>
<style>
.redBox {
	box-shadow: 10px 10px red;
}
.blurBox {
	box-shadow: 10px 10px 5px skyblue;
}
.multiEffect {
	box-shadow: 2px 2px 2px black,
				0 0 25px blue,
				0 0 5px darkblue;
}
div {
	width: 150px;
	height: 70px;
	padding: 10px;
	border: 10px solid lightgray;
	background-image: url("media/spongebob.png");
	background-size: 150px 100px;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
	<h3>박스 그림자 만들기</h3>
	<hr>
	<div class="redBox">뚱이와 함께</div><br>
	<div class="blurBox">뚱이와 함께</div><br>
	<div class="multiEffect">뚱이와 함께</div>
</body>
</html>

테스트 21. 마우스 커서

  • 스타일에 =커서를 부여하면 마우스를 올렸을 때 사용 할 커서 모양을 결정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 커서</title>
</head>
<body>
	<h3>마우스 커서</h3>
	아래에 마우스를 올려 보세요. 커서가 변합니다.
	<hr>
	<p style="cursor: crosshair">십자 모양 커서</p>
	<p style="cursor: help">도움말 모양 커서</p>
	<p style="cursor: pointer">포인터 모양 커서</p>
	<p style="cursor: progress">프로그램 실행 중 모양 커서</p>
	<p style="cursor: n-resize;">상하 크기 조절 모양 커서</p>	
</body>
</html>

5장

테스트 1. display 프로퍼티로 박스 유형 설정

  • display 속성으로 보여주고 숨기고를 정할 수 있는 블럭을 설정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 프로퍼티</title>
<style>
div {
	border: 2px solid yellowgreen;
	color: blue;
	background: aliceblue;
}

span {
	border: 3px dotted red;
	background: yellow;
}
</style>
</head>
<body>
	<h3>인라인, 인라인 블록, 블록</h3>
	<hr>
	나는 <div style="display: none;">div(none)</div>	입니다.<br><br> 
	나는	<div style="display: inline;">div(inline)</div>입니다.<br><br> 
	나는	<div style="display: inline-block; height: 50px">
	div(inline-block)</div>	입니다.<br><br> 
	나는	<div>div<span style="display: block">span(block)</span>입니다.</div>
</body>
</html>

테스트 2. position : relative 상대 배치

  • 포지션은 해당 태그의 위치를 조정하는 속성이다. relative는 해당 태그의 위치를 기준으로 상대적인 위치를 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div {
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 1px solid lightgray;
	text-align: center;
	color: white;
	background: red;
}
#down:hover {
	position: relative;
	left: 20px;
	top: 20px;
	background: green;
}
#up:hover {
	position: relative;
	right: 20px;
	bottom: 20px;
	background: green;
}
</style>
</head>
<body>
	<h3>상대 배치, relative</h3>
	<hr>
	<div>T</div>
	<div id="down">h</div>
	<div>a</div>
	<div>n</div>
	<div id="up">k</div>
	<div>s</div>
</body>
</html>

테스트 3. position : absolute 절대 배치

  • position에 absolute를 이용하면 절대적인 위치에 표시할 수 있다.
  • 절대적 위치를 조정하기 위해 다양한 위치 정보를 입력해 주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>절대 배치</title>
<style>
div {
	display: inline-block;
	position: absolute;
	border: 1px solid lightgray;
}
div > p {
	display: inline-block;
	position: absolute;
	height: 20px;
	width: 15px;
	background: lightgray;
}
</style>
</head>
<body>
	<h3>Merry Christmas</h3>
	<hr>
	<p>예수님이 탄생하셨습니다.</p>
	<div>
	<img alt="크리스마스 트리" src="media/christmastree.png"
	width="200" height="200">
	<p style="left:50px; top:30px">M</p>
	<p style="left:100px; top:0px">E</p>
	<p style="left:100px; top:80px">R</p>
	<p style="left:150px; top:110px">R</p>
	<p style="left:30px; top:130px">Y</p>
	</div>
</body>
</html>

테스트 4. position : fixed로 브라우저 하단 오른쪽에 고정 배치

  • fixed를 이용하여 특정 위치로 배치할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 배치</title>
<style>
#fixed {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 100px;
	padding: 5px;
	background: red;
	color: white;
}
</style>
</head>
<body>
	<h3>Merry Christmas!</h3>
	<hr>
	<img alt="크리스마스 트리" src="media/christmastree.png" width="300" height="300">
	<div id="fixed">예수님이 탄생하셨습니다.</div>
	
</body>
</html>

테스트 5. float : right로 브라우저의 오른편에 항상 배치

  • float는 특정 공간에 둥둥 떠서 위치하도록 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#float {
	float: right;
	border: 1px dotted black;
	width: 7em;
	padding: 0.5em;
	margin: 1em;
}
</style>
</head>
<body>
	<h3>학기말 공지</h3>
	<hr>
	<div>
		<p id="float">24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다.</p>
		<p>이제 곧 겨울방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다. 인턴을
			준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>
	</div>
</body>
</html>

테스트 6. z-index로 카드 쌓기

  • z-index는 z축 우선순위를 나타낸다. 숫자가 클수록 높은 위치에 있어 우선적으로 보인다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 프로퍼티</title>
<style>
div { position: absolute;}
img { position: absolute;}
#spadeA { z-index: -3; left:10px; top:20px}
#spade2 { z-index: 2; left:40px; top:30px}
#spade3 { z-index: 3; left:80px; top:40px}
#spade7 { z-index: 7; left:120px; top:50px}
</style>
</head>
<body>
	<h3>z-index 프로퍼티</h3>
	<hr>
	<div>
	<img id="spadeA"alt="스페이드A" src="media/spade-A.png"
	width="100" height="140">
	<img id="spade2"alt="스페이드2" src="media/spade-2.png"
	width="100" height="140">
	<img id="spade3"alt="스페이드3" src="media/spade-3.png"
	width="100" height="140">
	<img id="spade7"alt="스페이드7" src="media/spade-7.png"
	width="100" height="140">
	</div>
</body>
</html>

퀴즈 4. 스타일 추가하기

  • h2 제목 스타일은 글자 색 #ff0000, 글자 크기 1.5em, 가운데 정렬로 합니다.
  • p 본문 스타일은 글자 크기 1.2em, 줄 간격 2em, 굵은 글자, 가운데 정렬로 합니다.
  • 이름이 accent인 클래스 스타일을 글자 색 #0000ff로 정의합니다.
  • 이름일 smalltext인 클래스 스타일을 글자 크기 0.7em로 정의합니다.
  • span태그로 묶은 글에 accent 클래스 스타일을 적용합니다.
  • span태그로 묶은 글에 smalltext 클래스 스타일을 적용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>연습문제 4</title>
	<style>
		#container {  /* 전체 콘텐츠를 감싸는 div */
			width:650px;  /* 너비 */
			margin:0 auto;  /* 가로로 중앙에 배치 */
			padding:5px;	/* 테두리와 내용 사이의 패딩 여백 */		
		}
		#check {   /* 텍스트 부분을 감싸는 div */
			width:640px;  /* 너비 - 그림 너비 값에 맞춤 */
			border:1px solid #ccc;  /* 테두리 */
		}		
		h1 {
			color: white; /* 글자색 */
			font-size: 1em; /* 글자 크기 */
			background: #222; /* 배경색 */
			margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
			padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
		}		
		h2 {
			color: #ff0000;
			font-size: 1.5em;
			text-align: center;
		}
		p {
			font-size: 1.2em;
			line-height: 2em;
			font-weight: bold;
			text-align: center;
		}
		.accent {
			color: #0000ff
		}
		.smalltext {
			font-size: 0.7em;
		}
	</style>
</head>

<body>
	<div id="container">
		<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">		
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
			2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span>100% 환불</span>해 드립니다<br>
			고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
			<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>
	</div>
</body>
</html>

테스트 7. visibility로 텍스트 숨기기

  • hidden을 적용하면 자리는 차지하고 내용물은 보여주지 않는다.
  • display:none은 개체가 없던 것처럼 출력해준다.
  • hidden은 개체의 위치를 살리고 내용물만 출력하지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 프로퍼티</title>
<style>
span {
	visibility: hidden;
}
</style>
</head>
<body>
	<h3>다음 빈 곳에 숨은 단어?</h3>
	<hr>
	<ul>
		<li>I (<span>love</span>) you.
		<li>Css is Cascading (<span>Style</span>) Sheet.
		<li>응답하라(<span>1988</span>).
	</ul>
</body>
</html>

'공부일지' 카테고리의 다른 글

230926 (HTML)  (0) 2023.09.26
230925 (Java)  (0) 2023.09.25
230922 (Java)  (0) 2023.09.22
230922 (HTML)  (0) 2023.09.22
230921 (Java)  (0) 2023.09.21

'공부일지' Related Articles

티스토리툴바