crongro/tabui.css

## tabui.css
header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
li{list-style: none;}
dt {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 5px;
}

dl {
	float: left;
	width : 75%;
}

dd {
	font-size: 0.9em;
}

.mainHeader{
	height:200px;
	text-align: center;
	padding-top: 20px;
	line-height: 1.4em
}

.userId {
	font-size: 1.2em;
    font-weight: bold;
}

.userMessage, .userSNSInfo {
	font-size: 0.8em;
	color : gray;
}

.userSNSInfo {
	overflow: auto;
    width: 255px;
    margin: 0px auto;
}

.userSNSInfo > li {
	float: left;
	margin-right: 5px;
	width : 80px;
}

.userSNSInfo span.count {
	color : #1FB820;
}

.mainView > nav {
	height:40px;
	margin-top: 10px;
	overflow: auto;
	border-bottom: 1px solid rgb(228, 228, 228);
	border-top: 1px solid rgb(228, 228, 228);
}

.tab {
	border-right: 1px solid rgb(228, 228, 228);
	float:left;
	height:100%;
	line-height: 40px;
	text-align: center;
	width:24.5%;
	cursor: pointer;
}

.tab:last-child {
    border-right: 0px;
}


.mainView > section {
	display:none;
	padding:1em;
	line-height: 1.5em;
}

.mainView > section.eleDisplayShow {
	display:block;
	padding:5em;
	line-height: 1.5em;
}

.myName {
    font-size: 1.2em;
    font-weight: bold;
}

.myDesc {
	font-size: 0.8em;
}

.eleDisplayShow li {
	margin-bottom: 1em;
}

.selectedTab {
	background-color: #DF9274;
	color: #fff;
}

## tabui.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>tabUI</title>
    <link rel="stylesheet" href="tabui.css">
</head>

<body>
    <div id="wrapper">
        <div class="mainView" >
            <header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" alt="logo" width="80" >
                <div class="userId" ><span > </span><span >nigayo</span><span > </span>
                </div>
                <div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
                </div>
                <ul class="userSNSInfo" >
                    <li ><span >review : </span><span class="count" >10</span><span > | </span>
                    </li>
                    <li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span>
                    </li>
                    <li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
                    </li>
                </ul>
            </header>
            <nav >
                <div class="tab selectedTab" data-id="position" ><span > </span><span >내 장소</span><span > </span>
                </div>
                <div class="tab" data-id="friend" ><span > </span><span >친구</span><span > </span>
                </div>
                <div class="tab" data-id="theme" ><span > </span><span >나의 테마</span><span > </span>
                </div>
                <div class="tab" data-id="news" ><span > </span><span >나의 소식</span><span > </span>
                </div>
            </nav>
            <section id="my_position" class="eleDisplayShow" >
                <h2>내가 즐겨가는 장소~</h2>
                <ul>
                    <li> 판교 유스페이스</li>
                    <li>IT인들이 주로 먹는 밥집</li>
                </ul>
            </section>
        </div>
    </div>

    </body>
</html>
	header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
	li{list-style: none;}
	dt {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 5px;
	}

	dl {
	float: left;
	width : 75%;
	}

	dd {
	font-size: 0.9em;
	}

	.mainHeader{
	height:200px;
	text-align: center;
	padding-top: 20px;
	line-height: 1.4em
	}

	.userId {
	font-size: 1.2em;
	font-weight: bold;
	}

	.userMessage, .userSNSInfo {
	font-size: 0.8em;
	color : gray;
	}

	.userSNSInfo {
	overflow: auto;
	width: 255px;
	margin: 0px auto;
	}

	.userSNSInfo > li {
	float: left;
	margin-right: 5px;
	width : 80px;
	}

	.userSNSInfo span.count {
	color : #1FB820;
	}

	.mainView > nav {
	height:40px;
	margin-top: 10px;
	overflow: auto;
	border-bottom: 1px solid rgb(228, 228, 228);
	border-top: 1px solid rgb(228, 228, 228);
	}

	.tab {
	border-right: 1px solid rgb(228, 228, 228);
	float:left;
	height:100%;
	line-height: 40px;
	text-align: center;
	width:24.5%;
	cursor: pointer;
	}

	.tab:last-child {
	border-right: 0px;
	}


	.mainView > section {
	display:none;
	padding:1em;
	line-height: 1.5em;
	}

	.mainView > section.eleDisplayShow {
	display:block;
	padding:5em;
	line-height: 1.5em;
	}

	.myName {
	font-size: 1.2em;
	font-weight: bold;
	}

	.myDesc {
	font-size: 0.8em;
	}

	.eleDisplayShow li {
	margin-bottom: 1em;
	}

	.selectedTab {
	background-color: #DF9274;
	color: #fff;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>tabUI</title>
	<link rel="stylesheet" href="tabui.css">
	</head>

	<body>
	<div id="wrapper">
	<div class="mainView" >
	<header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" alt="logo" width="80" >
	<div class="userId" ><span > </span><span >nigayo</span><span > </span>
	</div>
	<div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
	</div>
	<ul class="userSNSInfo" >
	<li ><span >review : </span><span class="count" >10</span><span > \| </span>
	</li>
	<li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > \| </span>
	</li>
	<li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
	</li>
	</ul>
	</header>
	<nav >
	<div class="tab selectedTab" data-id="position" ><span > </span><span >내 장소</span><span > </span>
	</div>
	<div class="tab" data-id="friend" ><span > </span><span >친구</span><span > </span>
	</div>
	<div class="tab" data-id="theme" ><span > </span><span >나의 테마</span><span > </span>
	</div>
	<div class="tab" data-id="news" ><span > </span><span >나의 소식</span><span > </span>
	</div>
	</nav>
	<section id="my_position" class="eleDisplayShow" >
	<h2>내가 즐겨가는 장소~</h2>
	<ul>
	<li> 판교 유스페이스</li>
	<li>IT인들이 주로 먹는 밥집</li>
	</ul>
	</section>
	</div>
	</div>

	</body>
	</html>