web publishing_HTML&CSS_Example 01

장봄·2020년 1월 9일
0

HTML&CSS_Example

목록 보기
1/3

01. box1 - 제목,내용,더보기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>box</title>
	<style>
		/*<!-- reset -->*/
		html, body {
			width: 100%;
			height: 100%;
		}
		body, h1, h2, h3, p {
			margin: 0;
			padding: 0;
		}
		body, h1, h2, h3, input, select, textarea, button, th, td {
			font-family: 'Malgun gothic',sans-serif;
			font-size: 12px;
		}
        
		/*<!-- style -->*/
		.section {
			position: relative;
			margin: 20px;
			border: 1px solid #ccc;			
		}
		.section .hx {
			border: 1px solid #fff;
			padding: 8px;
			background-color: #eee;
			color: #333;
			font-size: 1.1em;
		}
		.section .tx {
			border-top: 1px solid #ccc;
			padding: 8px;
			color: #555;
			line-height: 1.5em;
			/*줄간격*/

		}
		.section .section_more {
			position: absolute;
			right: 10px;
			top: 10px;
		}
		.section .section_more a {
			position: relative;
			color: #666;
			text-decoration: none;
			letter-spacing: -1px;
		}
		.section .section_more a .ico {
			position: absolute;
			left: -7px;
			top: 3px;
			display: block;
			width: 0px;
			height: 0px;
			border : 10px solid red;
			border-width: 5px 0 5px 5px;
			border-color: transparent transparent transparent #aaa;
			/*background-color: #aaa;*/
		}

</style>
</head>

<body>

<!-- UI Object -->
<div class="section">
	<h2 class="hx">제목</h2>
	<div class="tx">내용</div>
	<p class="section_more"><a href="#"><span class="ico"></span> 더보기</a></p>
</div>
<!--// UI Object -->
	
</body>
</html>

위 코딩이 적용된 웹화면

02. box2 - 모서리 라운드

  • border-radius : 라운드 표현.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>box2</title>
	<style>
		html, body {
			width: 100%;
			height : 100%;
		}
		html, body, p {
			margin: 0;
			padding: 0;			
		}
		body, h1, h2, h3, input, select, button, th, td {
			font-family: 'Malgun Gothic',sans-serif;
			font-size: 12px;
		}

		.box_type {
			/*border:10px solid #a8e469;*/
			margin: 20px;
			padding: 10px;
			border-radius: 10px;
			background-color: #a8e469;
		}
		.box_type .inner {
			padding: 10px;
			border:1px solid #418f30;
			background-color: #fff;
			border-radius: 5px;
		}
		.box_type .inner p {
			margin: 5px;
			line-height: 1.5em;
		}
	</style>	
</head>
<body>

<div class="box_type">
    <div class="inner">
        <p>내용은 이미지와 다를 수 있습니다.</p>
        <p>내용은 이미지와 다를 수 있습니다.</p>
        <p>내용은 이미지와 다를 수 있습니다.</p>        
    </div>
</div>
	
</body>
</html>

위 코딩이 적용된 웹화면

03. box3 - 수직 가운데 정렬

  • table형식으로 만들어서 가운데 정렬.

  • box_type = table

  • box_type .cell = tr

  • box_type .cell .inner = td

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>box3</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}

		/*style*/
		.box_type { 
			display: table;
			width: 600px;
			height: 200px;
			border:3px solid #aaa; 
			margin: 30px;
		}
		.box_type .cell {
			display: table-row;
		}
		.box_type .cell .inner {
			padding-left: 35px;
			display: table-cell;
			vertical-align: middle;
		}
		.box_type .cell .inner p {}
	</style>
</head>
<body>

<div class="box_type">
	<div class="cell">
		<div class="inner">
			<p>
			컨텐츠의 수직정렬이 가능한 div 박스 입니다.<br>
			텍스트와 이미지 모두 가능합니다.<br>
			동일한 크기의 박스안에 높이가 다른 사이즈의<br>
			컨텐츠를 담을때 쓰이면 안성맞춤입니다.<br>
			class=“wrap”의 높이값이 있어야 합니다.</p>
		</div>
	</div>
</div>

</body>
</html>

위 코딩이 적용된 웹화면

04. button - 텍스트 버튼

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>button</title>
	<style>
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		/*style*/
		.area {
			margin: 30px;
		}
		.btn_pack {
			display: inline-block;
			background: url(img/btn_pack.gif) no-repeat 0 0;
		}
		.btn_pack a,
		.btn_pack button,
		.btn_pack input {
			position: relative;
			right: -4px;
			display: inline-block;
			height: 24px;
			border : 0;
			padding: 0;
			padding-left: 6px;
			padding-right: 10px;
			background: url(img/btn_pack.gif) no-repeat 100% 0;
			color: #888;
			line-height: 24px;
			text-decoration: none;
			cursor: pointer;
		}
		.btn_pack a:hover,
		.btn_pack button:hover,
		.btn_pack input:hover {
			color: #000;
		}
		.btn_pack.large {			
			background-position: 0 -30px;
		}
		.btn_pack.large a,
		.btn_pack.large button,
		.btn_pack.large input {
			height: 30px;
			background-position: 100% -30px;
			line-height: 30px;
			font-size: 14px;
		}
	</style>
</head>
<body>

<div class="area">
	<span class="btn_pack">
		<a href="#">anchor</a>
	</span>
	<span class="btn_pack">
		<button>button</button>
	</span>
	<span class="btn_pack">
		<input type="button" value="input">
	</span>
	<hr>

		<span class="btn_pack large">
		<a href="#">anchor</a>
	</span>
	<span class="btn_pack large">
		<button>button</button>
	</span>
	<span class="btn_pack large">
		<input type="button" value="input">
	</span>
</div>
	
</body>
</html>

위 코딩이 적용된 웹화면

05. paginate - 게시판의 페이징 부분

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>paginate</title>
	<style>
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		/*style*/
		.wrap {
			width: 960px;
			margin: 0 auto;
		}
		.paginate {
			padding: 20px 0;
			text-align: center;
		}
		.paginate a, 
		.paginate strong {
			display: inline-block;
			border:1px solid transparent;
			padding: 6px 8px;
			color: #666;
			font-family: verdana'Malgun Gothic',sans-serif;
			font-size: 1.2em;
			font-weight: normal;
			line-height: 1.2em;
		}
		.paginate a:hover,
		.paginate a.direction {
			border-color: #ddd;			
		}
		.paginate a {}
		.paginate strong {
			border-color: #4dc136;
			color: #1eb501;
		}
		.paginate a.direction:hover {
			color: #000;
		}
		.paginate a.direction span {
			display: inline-block;
			width: 0;
			height: 0;
			border: 4px solid #666;
			vertical-align: 2px;
		}
		.paginate a.direction.prev span {
			border-width: 4px 4px 4px 0;
			border-color: transparent #666 transparent transparent;
		}		
		.paginate a.direction.next span {
			border-width: 4px 0 4px 4px;
			border-color: transparent transparent transparent #666;
		}
		.paginate a.direction.prev:hover span {
			border-color: transparent #000 transparent transparent;
		}
		.paginate a.direction.next:hover span {
			border-color: transparent transparent transparent #000;			
		}	

	</style>
</head>
<body>
<div class="wrap">
	<div class="paginate">
		<a href="#" class="direction prev"><span></span><span></span> 처음</a>
		<a href="#" class="direction prev"><span></span> 이전</a>
		<a href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<strong>5</strong>
		<a href="#">6</a>
		<a href="#">7</a>
		<a href="#">8</a>
		<a href="#">9</a>
		<a href="#" class="direction next">다음 <span></span></a>
		<a href="#" class="direction next">끝 <span></span><span></span></a>
	</div>
</div>
</body>
</html>

위 코딩이 적용된 웹화면

profile
장봄
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>
다음 포스트

web publishing_HTML&CSS_Example 02

0개의 댓글