Home
Top

011 CSS공부(7) 박스모델 예제 실습

Daily Study/Web Dev

2021. 1. 27.

반응형
<!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 style */
		/*@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');*/
		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-family: 'Nanum 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;
		 	font-weight: bold;
		 }
		 .section .tx {
		 	border-top: 1px solid #ccc;
		 	padding: 8px;
		 	color: #555;
		 	line-height: 1.5em;
		 }
		 .section .section_more {
		 	position: absolute;
		 	right: 8px;
		 	top: 10px;
		 }
		 .section .section_more a {
		 	position: relative;
		 	color: #666;
		 	text-decoration: none;
		 	/* a 태그에 밑줄 없애기 */
		 	letter-spacing: -1px;
		 }
		 .section .section_more a .ico {
		 	position: absolute;
		 	left: -10px;
		 	top: 1px;
		 	display: block;
		 	/* 인라인 요소라 크기 지정하려면 블록으로 설정해줘야함*/
		 	width: 0px;
		 	height: 0px;
		 	border: 10px solid red;
		 	border-width: 5px 0 5px 5px;
		 	/* 보더가 top, right, bottom, left 네 값을 다 가지면 사각형
		 	   3개만 가지면 삼각형으로 나타남*/
		 	border-color: transparent transparent transparent #aaa;
		 }

	</style>
</head>
<body>

<!-- UI Object -->
<div class="section">
	<h2 class="hx">제목</h2>
	<div class="tx">내용</div>
	<div class="tx">내용</div>
	<div class="tx">월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.</div>
	<div class="tx">내용</div>
	<p class="section_more"><a href="#"><span class="ico"></span>더보기</a></p>
</div>
<!-- //UI Object -->

</body>
</html>

제목, 내용, 더보기 박스모델 예제

border를 한줄만 적용하기 위해서

밖에 가장 큰 영역 section 클래스에 border를 적용시키고

맨 위 제목이 들어가는 부분은 보더를 안쪽으로만 흰색으로 1px짜리 border를 적용시키고

 

나머지 밑의 div tx들에는 border-top만 적용시켜준다.

 

겉으로 보이는 border는 그러니까 쪼개보면

바깥 테두리가 하나로 묶여있고

안의 테두리들은 두번째 셀의 윗줄, 세번째 셀의 윗줄, 네번째 셀의 윗줄, 다섯번째 셀의 윗줄로 이루어져 있는 것.

 

 

<!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,h1,h2,h3,p {
		margin: 0;
		padding: 0;
	}
	body,h1,h2,h3,input,select,button,th,td {
		font-family: 'Malgun Gothic',sans-serif;
		font-size: 12px;
	}

	/* style */
	.box_type {
		margin: 20px;
		border: 4px solid #a8e469;
	}
	.box_type .inner {
		position: relative;
		border: 1px solid #418f30;
		padding: 0 20px;
	}
	.box_type p {
		margin: 10px;
		line-height: 1.5em;
	}
	.box_type .lt,
	.box_type .rt,
	.box_type .lb,
	.box_type .rb {
		position: absolute;
		width: 7px;
		height: 7px;
		background: #fff url(img/bg_border_corner.gif) no-repeat;
	}

	.box_type .lt {
		left: -5px;
		top: -5px;
		background-position: 0 0;
	}
	.box_type .rt {
		right: -5px;
		top: -5px;
		background-position: 100% 0;
	}
	.box_type .lb {
		left: -5px;
		bottom: -5px;
		background-position: 0 100%;
	}
	.box_type .rb {
		right: -5px;
		bottom: -5px;
		background-position: 100% 100%;
	}

	</style>
</head>
<body>
	
<!-- UI Object --> 
<div class="box_type">
	<div class="inner">
		<p>내용은 이미지와 다를 수 있습니다.</p>
		<p>내용은 이미지와 다를 수 있습니다.</p>
		<p>내용은 이미지와 다를 수 있습니다. 내용은 이미지와 다를 수 있습니다. 내용은 이미지와 다를 수 있습니다.</p>
		<div class="lt"></div>
		<div class="rt"></div>
		<div class="lb"></div>
		<div class="rb"></div>
	</div>
</div>
<!-- //UI Object --> 

</body>
</html>

 

border로 테두리를 지정해주고

네 모서리 부분만 이미지의 부분과 크기를 지정해서

absolute position으로 각 위치를 잡아주는 방식

 

근데 이런 라운드 처리는 CSS3에서는 더 간단한 스타일로 적용할 수 있어서 크게 필요할 것 같진 않다.

다른 디자인으로 적용하는 경우면 이 방식이 필요할 듯 하다.

 

지난 학기에 했던 혐오의 시대를 구현하려면 이 방식으로 해야될 것 같다.

 

 

<!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,h1,h2,h3,p {
		margin: 0;
		padding: 0;
	}
	body,h1,h2,h3,input,select,button,th,td {
		font-family: 'Malgun Gothic',sans-serif;
		font-size: 12px;
	}

	/* style */
	.box_type {
		margin: 20px;
		border: 10px solid #a8e469;
		border-radius: 10px;
		background-color:#a8e469;
	}
	.box_type .inner {
		position: relative;
		border: 1px solid #418f30;
		border-radius: 6px;
		padding: 0 20px;
		background-color: #fff;
	}
	.box_type p {
		margin: 10px;
		line-height: 1.5em;
	}
	</style>
</head>
<body>
	
<!-- UI Object --> 
<div class="box_type">
	<div class="inner">
		<p>내용은 이미지와 다를 수 있습니다.</p>
		<p>내용은 이미지와 다를 수 있습니다.</p>
		<p>내용은 이미지와 다를 수 있습니다. 내용은 이미지와 다를 수 있습니다. 내용은 이미지와 다를 수 있습니다.</p>
	</div>
</div>
<!-- //UI Object --> 

</body>
</html>

아래는 CSS3의 라운드 처리 스타일 태그로 적용한 것.

위의 이미지를 쪼개서 배치시키는 것보다 부드럽게 라운드 처리가 가능하고 일단 간단하다.

 

박스모델들은 실제로 웹페이지를 디자인하는데에 많이 쓰이는 요소들이라서

잘 알아두면 좋을 것 같고

 

당연하게도 예제를 따라하다보면 많이 연습해볼 수 있을 것 같다.

반응형
저작자표시

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

013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습  (0) 2021.02.01
012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습  (0) 2021.01.28
010 CSS공부(6) 이메일, 이벤트 페이지 예제 실습  (0) 2021.01.26
009 CSS공부(5) 레이아웃 관련 스타일  (0) 2021.01.25
008 CSS 공부(4) 표 관련 스타일  (0) 2021.01.25

티스토리툴바