yamoo9 · August 30, 2016 07:19
diff --git a/angularJS-directives-expressions-login-header-bar.html b/angularJS-directives-expressions-login-header-bar.html
 <!DOCTYPE html>
 <html lang="ko-KR" data-ng-app>
 <head>
 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 	<meta charset="UTF-8">
 	<title>Directives &amp; Expressions - AngularJS</title>
 	<style>
 	body {
 		min-height: 100vh;
 		background-image: linear-gradient(0deg, #ADADAD, #F2F2F2);
 	}
 	body, .header-bar * {
 		margin: 0;
 	}
 	.header-bar {
 		padding: 1em;
 		background-color: #fff;
 		box-shadow: 0px 0px 3px hsla(0,0%,0%,.45);
 		font-size: 14px;
 	}
 	.notice {
 		display: inline-block;
 		color: #A9A9A9;
 		margin-bottom: 0.5em;
 		border-bottom: 1px solid #D0D0D0;
 	}
 	.success { color: #34C0FF; }
 	.failed { color: #FE4940;}
 	.signup { color: #7045CF;}
 	</style>
 	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
 </head>
 <body data-ng-init="member={name: 'yamoo9', log_in: false, is_visible: true, status: 'failed'}">

 	<!--
 		Directives & Expressions
 			⊙ ng-cloak [FOUC(Flash Of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
 			⊙ ng-switch
 			⊙ ng-class
 			⊙ ng-show
 	-->
 	<div class="header-bar" data-ng-cloak data-ng-switch="member.log_in">
 		<div class="notice" data-ng-show="member.is_visible">
 			공지사항을 알려드립니다.
 		</div>
 		<div class="log_in_success" data-ng-switch-when="true" data-ng-class="{
 			'success': member.log_in,
 			'failed': !member.log_in
 		}">
 			<p>안녕하세요. {{member.name}}님. 오늘 하루도 행복하세요. :-)</p>
 		</div>
 		<div class="log_in_failed" data-ng-switch-when="false" data-ng-class="member.status">
 			<p>로그인에 실패하셨습니다. :-( 다시 로그인해보시길 바랍니다.</p>
 		</div>
 		<div class="sign_up" data-ng-switch-default>
 			<p>회원 가입을 환영합니다. :-)</p>
 		</div>
 	</div>

 </body>
 </html>