Study Web Development

12월 15일

이전으로

CSS3

6. 목록 스타일

  1. 새 HTML 파일 s02_list.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
<style type="text/css">
	ul {
		list-style-image:url(../images/bullet.gif);
		list-style-position:inside; /* 목록의 기호/문자가 문단의 바깥쪽, 안쪽 중 어디에 위치할지를 지정; 기본값은 outside */
	}
</style>
</head>
<body>
	<ul>
		<li>불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. 불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. </li>
		<li>불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. 불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. </li>
		<li>불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. 불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. </li>
		<li>불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. 불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. </li>
		<li>불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. 불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. </li>
	</ul>
</body>
</html>
  1. 새 HTML 파일 s03_list.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
<style type="text/css">
	ul {
		list-style:none; /* 목록의 기호/문자를 제거 */
	}
	ul li {
		display:inline; /* 목록을 한 줄로 배치 */
	}
</style>
</head>
<body>
	<ul>
		<li>봄</li>
		<li>여름</li>
		<li>가을</li>
		<li>겨울</li>
	</ul>
</body>
</html>
  1. 새 HTML 파일 s04_list.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트를 활용한 메뉴</title>
<style type="text/css">
	ul {
		list-style:none; /* 목록의 기호/문자를 제거 */
	}
	ul li {
		display:inline; /* 목록을 한 줄로 배치 */
	}
	ul li a {
		background:crimson;
		color:mintcream;
		text-decoration:none; /* 링크의 밑줄 제거 */
		display:inline-block; /* display 속성의 값이 block 또는 inline-block인 경우에만 width, height 속성의 값을 지정할 수 있음 */
		width:100px;
		height:30px;
		padding-top:2px;
		padding-left:10px;
	}
	ul li a:hover {
		background:midnightblue;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="#">Company</a></li>
		<li><a href="#">Product</a></li>
		<li><a href="#">Service</a></li>
		<li><a href="#">Community</a></li>
	</ul>
</body>
</html>

7. 색상과 배경을 위한 스타일

7-1 color 속성

  1. 새 폴더 ch10-cssColor 생성 후 새 HTML 파일 s01_rgb.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGB</title>
<style type="text/css">
	div {width:300px;height:30px;}
	div.c1 {background:rgb(150 20 20);}
	div.c2 {background:rgb(250 200 25);}
	div.c3 {background:rgb(25 50 200);}
</style>
</head>
<body>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
</body>
</html>
  1. 새 HTML 파일 s02_rgba.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGBA</title>
<style type="text/css">
	div {width:300px;height:30px;}
	/* Alpha값(투명도) : 0.0(투명) ~ 1.0(불투명) */
	/*
	div.a1 {background:rgba(255,70,10,1.0);}
	div.a2 {background:rgba(255,70,10,0.8);}
	div.a3 {background:rgba(255,70,10,0.6);}
	div.a4 {background:rgba(255,70,10,0.4);}
	div.a5 {background:rgba(255,70,10,0.2);}
	*/
	
	/* rgba를 사용하는 대신 opacity 속성으로 투명도 지정 가능 */
	div.a1 {background:rgb(255 79 10);opacity:1.0;}
	div.a2 {background:rgb(255 79 10);opacity:0.8;}
	div.a3 {background:rgb(255 79 10);opacity:0.6;}
	div.a4 {background:rgb(255 79 10);opacity:0.4;}
	div.a5 {background:rgb(255 79 10);opacity:0.2;}
</style>
</head>
<body>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
	<div class="a4"></div>
	<div class="a5"></div>
</body>
</html>
  1. 새 HTML 파일 s03_hsl.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HSL</title>
<style type="text/css">
	/* HSL은 색조(hue), 채도(saturation), 명도(lightness)로 색상을 표현 */
	div {width:300px;height:30px;}
	div.c1 {background:hsl(320,100%,25%);}
	div.c2 {background:hsl(320,100%,50%);}
	div.c3 {background:hsl(320,100%,75%);}
	
	/* HSLA를 이용한 투명도 처리 */
	div.h1 {background:hsla(165,35%,50%,0.2);}
	div.h2 {background:hsla(165,35%,50%,0.4);}
	div.h3 {background:hsla(165,35%,50%,0.6);}
	div.h4 {background:hsla(165,35%,50%,0.8);}
	div.h5 {background:hsla(165,35%,50%,1.0);}
</style>
</head>
<body>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
	<br><br>
	<div class="h1"></div>
	<div class="h2"></div>
	<div class="h3"></div>
	<div class="h4"></div>
	<div class="h5"></div>
</body>
</html>

7-2 배경 관련 속성

  1. 새 HTML 파일 s04_background.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경</title>
<style type="text/css">
/* 
배경 이미지 관련 속성
background-image : 배경 이미지를 지정
background-repeat : 배경 이미지의 반복 방식을 지정
background-attachment : 배경 이미지 고정/스크롤 여부를 지정
background-position : 배경 이미지의 위치를 지정
background-size : 배경 이미지의 크기를 지정(너비, 높이)

일괄 지정
background:color image repeat attachment position
*/
	body {
		/* 일반적으로 사용하는 배경 이미지; 배경 이미지는 반복됨 */
		background-image:url(../images/landscape.jpg);
		
		/* 크기 지정; 너비만 지정시 높이는 이미지의 원래 비율에 맞게 자동으로 지정됨 */
		/* background-size:200px 100px; */
		
		/* repeat-x : 가로로만 반복; repeat-y : 세로로만 반복 */
		/* background-repeat:repeat-x; */
		
		/* 반복 해제 */
		background-repeat:no-repeat;
		
		/* 배경 이미지 위치 설정하기; 왼쪽 끝에서 200px, 위쪽 끝에서 100px만큼 떨어진 위치 */
		/* background-position:200px 100px; */
		
		/* 배경 이미지가 스크롤되지 않게 고정시키기 */
		background-position:center center; /* 이미지를 고정하지 않으면 문서 전체(긴 문서의 경우 스크롤 끝까지를 포함하는 영역)의 중앙에 위치시키고, 고정하면 화면(현재 보여지는 영역)의 중앙에 위치시킴 */
		background-attachment:fixed;
	}
</style>
</head>
<body>
	너굴
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	콩돌
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	밤돌
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
	<br><br><br><br><br><br>
</body>
</html>

9. 박스 모델

9-1 박스 속성

  1. 새 폴더 ch11-cssBox 생성 후 새 HTML 파일 s01_box.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style type="text/css">
/* 
테두리 밖 여백
margin
속성값 4개 명시 : 상 우 하 좌; 시계방향
속성값 3개 명시 : 상 좌우 하
속성값 2개 명시 : 상하 좌우
속성값 1개 명시 : 상우하좌

방향 지정
margin-left : 왼쪽 여백
margin-right : 오른쪽 여백
margin-top : 상단 여백
margin-bottom : 하단 여백

테두리 안 여백
padding
속성값 4개 명시 : 상 우 하 좌; 시계방향
속성값 3개 명시 : 상 좌우 하
속성값 2개 명시 : 상하 좌우
속성값 1개 명시 : 상우하좌

방향 지정
padding-left : 왼쪽 여백
padding-right : 오른쪽 여백
padding-top : 상단 여백
padding-bottom : 하단 여백

박스 테두리의 스타일 지정
border-style
none : 테두리를 표시하지 않음
hidden : 테두리를 숨김
dotted : 테두리를 점선으로 표시
dashed : 테두리를 파선으로 표시
solid : 테두리를 실선으로 표시
double : 테두리를 두 줄 실선으로 표시
groove : 테두리를 오른쪽 아래에서 빛을 받은 스타일로 지정
ridge : 테두리를 왼쪽 위에서 빛을 받은 스타일로 지정
outset : 테두리를 밖으로 나온 스타일로 지정
inset : 테두리를 안으로 파인 스타일로 지정

박스 테두리의 굵기를 지정
border-width

박스 테두리의 색상을 지정
border-color

방향별로 테두리 지정
border-top-
border-right-
border-bottom-
border-left-

일괄 지정
border:style width color
*/
	ul {
		list-style:none; /* 목록의 기호/문자 제거 */
		background:cadetblue;
		margin:10px 5px 10px 5px; /* 테두리 바깥 여백을 상 10px, 우 5px, 하 10px, 좌 5px로 지정 */
		padding:10px; /* 테두리 안의 여백을 상우하좌 모두 10px로 지정 */
	}
	li {
		color:palevioletred;
		background:lightgoldenrodyellow;
		margin:10px;
		padding:10px;
	}
	li.withborder {
		border-style:dashed; /* 파선 */
		border-width:medium; /* 테두리의 두께를 중간으로 설정 */
		border-color:slategray; /* 테두리 색깔 */
	}
</style>
</head>
<body>
	<ul>
		<li>테두리가 없는 곳</li>
		<li class="withborder">테두리가 있는 곳</li>
	</ul>
</body>
</html>

9-2 border-radius 속성

  1. 새 HTML 파일 s02_radius.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style type="text/css">
	div.rounded {
		font-family:"돋움";
		font-size:12px;
		line-height:20px; /* 줄 간격 */
		
		background-color:#666;
		color:#fff;
		width:250px;
		padding:10px;
		border-radius:10px; /* 모서리를 둥글게 처리; 값을 크게 주면 원을 만들 수도 있음 */
	}
</style>
</head>
<body>
	<div class="rounded">
		내 그늘 아래 그림자 길어질수록<br>
		나의 어지럼증 깊어져<br>
		세상이 몇 바퀴씩 곤두박질치네요
	</div>
</body>
</html>
  1. 새 HTML 파일 s03_radius.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style type="text/css">
	.circle1 {
		background-color:#C60;
		width:200px;
		height:200px;
		border-radius:100px;
	}
	.circle2 {
		background-color:#FFF;
		border:3px #a72525 solid;
		width:200px;
		height:200px;
		border-radius:100px;
	}
</style>
</head>
<body>
<div class="circle1"></div>
<div class="circle2"></div>
</body>
</html>

9-4 box-shadow 속성

  1. 임의의 이미지 파일 cross.jpg를 C:\javaWork\workspace_jsp\HTML\src\main\webapp\images로 이동
  2. 새 HTML 파일 s04_box_shadow.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style type="text/css">
	#shadowed {
		box-shadow:5px 10px 10px #000; /* 가로 오프셋 거리, 세로 오프셋 거리, blur radius, 그림자 색상 */
	}
</style>
</head>
<body>
<img id="shadowed" src="../images/cross.jpg" width="200" height="230">
</body>
</html>

10. 위치 유형 설정

10-1 position 속성

  1. 새 폴더 ch12-cssPosition 생성 후 새 HTML 파일 s01_position.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
/*
속성
position
값
absolute : 상위 요소에 대한 절대 배치
relative : 상위 요소에 대한 상대 배치
fixed : 고정 위치 지정
*/
	div {width:100px;height:100px;}
	#box1 {position:absolute;left:30px;top:30px;background:gold;} /* left, top은 position 속성값을 지정해야 동작; absolute로 지정하면 box1은 왼쪽, 위쪽에서 각각 30px만큼 이동하고, 원래 있던 공간은 비어 있는 것으로 인식되어 box2가 차지하게 됨 */
	#box2 {background:lightcoral;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
스크롤
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
</html>
  1. 새 HTML 파일 s02_position.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
/*
속성
position
값
absolute : 상위 요소에 대한 절대 배치
relative : 상위 요소에 대한 상대 배치
fixed : 고정 위치 지정
*/
	div {width:100px;height:100px;}
	#box1 {position:relative;left:30px;top:30px;background:gold;} /* left, top은 position 속성값을 지정해야 동작; relative로 지정하면 box1은 왼쪽, 위쪽에서 각각 30px만큼 이동하고, 원래 있던 공간도 채워져 있는 것으로 인식되어 box2의 위치는 변하지 않음 */
	#box2 {background:lightcoral;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
  1. 새 HTML 파일 s03_position.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
/*
속성
position
값
absolute : 상위 요소에 대한 절대 배치
relative : 상위 요소에 대한 상대 배치
fixed : 고정 위치 지정
*/
	div {width:100px;height:100px;}
	#box1 {position:fixed;left:30px;top:30px;background:gold;} /* left, top은 position 속성값을 지정해야 동작; fixed로 지정하면 box2의 위치는 absolute와 동일한데, box1의 위치는 스크롤해도 왼쪽, 위쪽에서 각각 30px만큼 떨어져 있도록 고정됨 */
	#box2 {background:lightcoral;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
스크롤
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
</html>

overflow 속성

  1. 새 HTML 파일 s04_overflow.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
/* 
속성
overflow
값
hidden : 오버플로우된 부분을 감춰버림
scroll : 오버플로우 속성이 부여된 요소에 강제로(=내용이 넘치지 않더라도) 스크롤 바를 생성
auto : 오버플로우되면(=필요한 경우에만) 자동적으로 스크롤 바를 생성
*/
	.div01 {
		background-color:gold;
		width:250px;
		height:100px;
		overflow:hidden; /* 내용이 정해진 크기를 벗어날 때 어떻게 처리할지를 지정 */
	}
	.div02 {
		background-color:deeppink;
		width:250px;
		height:100px;
		/* overflow:scroll; */
		overflow:auto;
	}
</style>
</head>
<body>
	<div class="div01">
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
	</div>
	<br><br>
	<div class="div02">
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
		엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않다면
	</div>
</body>
</html>

10-3 z-index 속성

  1. 임의의 이미지 파일 S_1.jpg, S_2.jpg, S_3.jpg를 C:\javaWork\workspace_jsp\HTML\src\main\webapp\images로 이동
  2. 새 HTML 파일 s05_z_index.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
	div.gallery figure {
		position:absolute;
	}
	/* 
	z-index : 요소의 쌓는 순서 정하기; 기본값은 auto이며 정수값을 지정할 수 있고, 값이 클수록 앞에 표시됨
	*/
	#f1 {
		left:0;
		top:0;
		z-index:3;
	}
	#f2 {
		left:150px;
		top:50px;
		z-index:2;
	}
	#f3 {
		left:300px;
		top:100px;
		z-index:1;
	}
</style>
</head>
<body>
	<div class="gallery">
		<figure id="f1">
			<img src="../images/S_1.jpg" width="200" height="200">
		</figure>
		<figure id="f2">
			<img src="../images/S_2.jpg" width="200" height="200">
		</figure>
		<figure id="f3">
			<img src="../images/S_3.jpg" width="200" height="200">
		</figure>
	</div>
</body>
</html>

resize 속성

  1. 새 HTML 파일 s06_resize.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>resize</title>
<style type="text/css">
	.resize {
		position:absolute;
		left:50px;
		top:20px;
		width:200px;
		height:50px;
		padding:5px;
		border:1px solid #06F;
		overflow:hidden; /* 흘러넘친 데이터 감추기 */
		resize:both; /* 가로 방향, 세로 방향 모두 크기 변경 가능 */
	}
</style>
</head>
<body>
	<div class="resize">
		CSS3 속성 중 resize 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있습니다.
		CSS3 속성 중 resize 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있습니다.
		CSS3 속성 중 resize 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있습니다.
	</div>
</body>
</html>

10-4 float 속성

  1. 새 폴더 ch13-cssFloat 생성 후 새 HTML 파일 s01_float.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
	div {height:50px;}
	div#a {
		background-color:pink;
		width:75%;
		float:left;
	}
	div#b {
		background-color:darkseagreen;
		width:23%; /* 어디를 기준으로 정렬되는지 확인하기 위해 일부러 합을 100%가 되지 않게 설정 */
		float:left;
	}
	div#a2 {
		background-color:pink;
		width:75%;
		float:left;
	}
	div#b2 {
		background-color:darkseagreen;
		width:23%;
		float:right;
	}
	div#a3 {
		background-color:pink;
		width:75%;
		float:right;
	}
	div#b3 {
		background-color:darkseagreen;
		width:23%;
		float:left;
	}
	div#a4 {
		background-color:pink;
		width:75%;
		float:right;
	}
	div#b4 {
		background-color:darkseagreen;
		width:23%;
		float:right;
	}
</style>
</head>
<body>
	<div id="a">서울, float:left</div>
	<div id="b">인천, float:left</div>
	<br><br><br>
	<div id="a2">서울, float:left</div>
	<div id="b2">인천, float:right</div>
	<br><br><br>
	<div id="a3">서울, float:right</div>
	<div id="b3">인천, float:left</div>
	<br><br><br>
	<div id="a4">서울, float:right</div>
	<div id="b4">인천, float:right</div>
</body>
</html>

10-5 clear 속성

  1. 새 HTML 파일 s02_float.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
	div {height:100px;}
	div#a {
		width:75%;
		background-color:lightpink;
		float:left;
	}
	div#b {
		width:23%;
		background-color:powderblue;
		float:right;
	}
	div#c {
		/* float 속성 무효화; float 속성을 한 요소에 지정하면 다음 요소에도 자동으로 적용되기 때문에, 원치 않는 경우 clear 속성을 지정해야 함 */
		width:100%;
		background-color:plum;
		clear:both; /* 이전 요소들의 float이 한 방향으로만 지정된 경우, clear에서 다른 방향을 지정하면 무효화되지 않을 수 있음; clear를 both로 지정시 float 방향을 고려하지 않아도 됨 */
	}
</style>
</head>
<body>
	<div id="a">서울</div> <!-- 내용 -->
	<div id="b">인천</div> <!-- 메뉴 -->
	<div id="c">광주</div> <!-- 꼬리말 -->
</body>
</html>

다음으로