티스토리 뷰

Frontend/HTML5

인원 현황판 만들기

데니 Denny 2017. 12. 3. 08:10
반응형
SMALL

시간 아껴서 최대한 빠르게 인원 현황판을 만들려고 하여 시도해보았다.

Chrome에서 정상작동하는 코드이다.


작업 반의 반장이 왼쪽에 나오고 구성원이 영내자와 영외자로 구분되어 표시되는 레이아웃을 시도해보았다.

이코드를 계속 다듬으면서 간단하게 코드를 구성할 생각이다.


CSS3를 하면서 계속 느끼는 것이지만 잘못 클래스를 설계하면 스타일시트 파일이 정말 많이 더러워진다는 것이다.

이를 명심하면서 클래스 설계시 신경을 많이 써야 겠다.


시간만 충분하다면 여유롭게 설계할텐데 너무 많이 더러워졌다. 중복되는 코드도 많아진 것 같고...


암튼 이상이다. ㅇㅅㅇ

<html>
<head>
</head>
<title>Specific Td Border Line</title>
<style type="text/css">
	body {
		background-color: #262626;
	}

	.line{
		border-right: 0px solid red;
		text-align: center;
		width: 30%;
		top: 5%
		bottom: 5%;
	}

	.img_icon {
		margin-left: 10%;
		margin-right: 5%;
		border-radius: 50%;
		width: 6vw;
		height: 6vw;
		display: block;
		float: left;
	}

	.img_icon_big {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		display: block;

	}

	.center {
	    margin: auto;
	}

	.name {
		width: 100%;
		height: 6vw;
		margin: auto;
		display: block;
	}

	.model {
		font-weight: bold;
		font-size: 48px;
		opacity: 0.7;
		color: #fff;
		margin-bottom: 50px;
	}

	.name_big {
		margin-top: 10px;
		font-size: 24px;
		color: #fff;
	}

	.name_content_top#ganbu {
		text-align: left;
		margin-top: 6px;
		color:#F2EE5F;
		height: 50%;
		line-height: 70%;
		font-size: 16px;
	}

	.name_content_top#bsa {
		text-align: left;
		margin-top: 6px;
		color:#83DEB6;
		height: 50%;
		line-height: 70%;
		font-size: 16px;
	}

	.name_content_bottom {
		text-align: left;
		height: 50%;
		color: #cbcbcb;
		margin-top: 5px;
		line-height: 30%;
		font-size: 12px;
	}

	.td_item {
		margin: auto;
	}

	.person {
		float: left;
		margin-top: 10px;
		display: inline-block;
	}

	.right-border {
		float: right;
    	background-color: rgba(255, 255, 255, .25);
    	width: 4px;
    	height: 70%;
	}

	#title_ganbu {
		color: #cbcbcb;
	}

	#title_bsa {
		color: #cbcbcb;
	}

</style>

<script>
	// ggeup : 계급
	// name : 이름
	// date : 기수
	function Person(ggeup, name, date) {
		this.ggeup = ggeup;
		this.name = name;
		this.date = date;

		this.getName = function() {
			return this.name;
		}

		this.getGgeup = function() {
			return this.ggeup;
		}
	}

	
</script>

<body>
<table border="0" width="600" height="400" id="persons" style="text-align: center; font-size: 20px;">
<tr>
	<td rowspan="6" class="line">
		<div class="person">
			<div class="model">F-4E/F</div>
			<img class="img_icon_big center" src="test.png">
			<div class="name_big">준위 홍길동</div>
		</div>
		<div class="right-border"></div>
	</td>
	<td id="title_ganbu">영외자</td>
	<td id="title_bsa">영내자</td>
</tr>
<tr>
	<td id="ganbu">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top" id="ganbu"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
	<td id="bsa">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top"  id="bsa"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
</tr>
<tr>
	<td id="ganbu">
		<div class="td_item">
			<img class="img_icon" src="test.png">
			<div class="name">
				<div class="name_content_top"  id="ganbu"><strong>상사 홍길당</strong></div>
				<div class="name_content_bottom">부사관 123기</div>
			</div>
		</div>
	</td>
	<td id="bsa">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top"  id="bsa"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
</tr>
<tr>
	<td id="ganbu">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top"  id="ganbu"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
</tr>
<tr>
	<td id="ganbu">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top"  id="ganbu"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
</tr>
<tr>
	<td id="ganbu">
		<img class="img_icon" src="test.png">
		<div class="name">
			<div class="name_content_top"  id="ganbu"><strong>상사 홍길당</strong></div>
			<div class="name_content_bottom">부사관 123기</div>
		</div>
	</td>
</tr>
</table>
</body>

</html>


실행결과는 사지방에서는 안되나보다...(슈바)

반응형
LIST
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함