Home
Top

012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습

Daily Study/Web Dev

2021. 1. 28.

반응형
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>box</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 {
		position: relative;
		display: table;
		/* table처럼 만들기  */
		width: 600px;
		height: 200px;
		margin: 30px;
		border: 3px solid #aaa;
	}
	.box_type .cell {
		display: table-row;
		/* tr처럼 만들기 */
	}
	.box_type .cell .inner {
		*position: absolute;
		*top: 60px;
		/* 구 익스플로러 버전에서는 display table table-row 이런 애들이 적용되지 않아서
		*로 시작하는 핵을 사용해야 함, IE6, IE7에서 적용시키는 방법 */
		padding-left: 35px;
		display: table-cell;
		/* td처럼 만들기 */
		vertical-align: middle;
	}
	.box_type p {}

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

</body>
</html>

박스모델 안에서 수직가운데 정렬을 맞춰보는 예제

CSS 코드 제일 앞쪽에 rest style 코드들은

여러 변수들을 초기화시켜주는 단계

 

div로 나뉘어있지만 table인것처럼 속성을 바꿔서 가운데 정렬을 할 수 있음

 

display : table;

display : table-row;

display : table-cell;

순서대로 table, tr, td인 것처럼 만들어 줌

그리고 마지막으로 셀 부분인  inner 클래스에만

vertical-align : middle;을 걸어주면 수직 가운데 정렬이 됨.

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>button</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 */
	.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: #666;
		text-decoration: none;
		line-height: 24px;
		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;
		font-size: 14px;
		line-height: 30px;
	}
	</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>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>button</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 */
	.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: #666;
		text-decoration: none;
		line-height: 23px;
		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;
		font-size: 14px;
		line-height: 30px;
	}

	.btn_pack.ico {
		position: relative;
	}
	.btn_pack.ico .plus {
		position: absolute;
		left: 10px;
		top: 50%;
		margin-top: -5px;
		display: block;
		width: 10px;
		height: 10px;
		background: url(img/btn_pack.gif) no-repeat -20px -157px;
	}
	.btn_pack.ico a,.btn_pack.ico button,.btn_pack.ico input {
		padding-left: 18px;
	}

	</style>
</head>
<body>

<div class="area">
	<span class="btn_pack ico">
		<span class="plus"></span>
		<a href="#">anchor</a>
	</span>
	<span class="btn_pack ico">
		<span class="plus"></span>
		<button>button</button>
	</span>
	<span class="btn_pack ico">
		<span class="plus"></span>
		<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>

아이콘 이미지 부분 크기랑 시작좌표를 옮겨서

플러스 아이콘만 나타나게 하고

나머지는 margin, padding 조절로 가운데 맞추기

 

생각보다 버튼 만들기가 번거로운 것 같다.

이미지 한 장에 요소를 다 때려박고

거기서 좌표 조정해가면서 내가 원하는 요소 부분만 짤라서 쓰려고 하다보니 그런 것 같다.

 

이것도 실제 사이트 만들어보면서 많이 해보고 익혀야겠다.

반응형
저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

014 CSS공부(10) FAQ 목록 만들기 예제 실습  (0) 2021.02.03
013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습  (0) 2021.02.01
011 CSS공부(7) 박스모델 예제 실습  (0) 2021.01.27
010 CSS공부(6) 이메일, 이벤트 페이지 예제 실습  (0) 2021.01.26
009 CSS공부(5) 레이아웃 관련 스타일  (0) 2021.01.25

티스토리툴바