콘디쌤2017.05.10 10:23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>brands</title>
<style>
body {
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
}
div {
	position: relative;
}
.draw {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 372px;
	background-color: #fff;
}
.draw .left {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; width: 40%;
	background-color: #eee;
}
.draw .right {
	position: absolute;
	top: 0; bottom: 0;
	left: 40%; width: 60%;
}
.draw .left .cont {
	position: absolute;
	top: 0; bottom: 0;
	width: 338px;
	right: 0;
}
.draw .right .cont {
	position: absolute;
	top: 0; bottom: 0;
	width: 648px;
	left: 0;
}
.brand-wrap {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 90%;
	right: 0;
}

.brand {
	float: left;
	height: 120px;
	width: 33.33333%;
}

.brand .logo {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}
.brand:before {
	content: '';
	position: absolute;
	top: 0; left:  0; right: 0; bottom: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: border 0.2s ease-out;
}
.brand:hover:before {
	border: 10px solid rgba(0, 0, 0, 0.1);
}
</style>
</head>

<body>

	<div class="draw">
    	<div class="left">
        	<div class="cont">
            	<div>BRANDS</div>
            	<div>~~~~~~</div>
            </div>
        </div>
    	<div class="right">
        	<div class="cont">
            
            	<div class="brand-wrap">
                	<div class="brand">
                    	<div class="logo"><img src="img/gnb_sulwhasoo_minify.jpg" /></div>
                    </div>
                	<div class="brand"></div>
                	<div class="brand"></div>
                	<div class="brand"></div>
                	<div class="brand"></div>
                	<div class="brand"></div>
                </div>
            	
            </div>
        </div>
    </div>

</body>
</html>
문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)