UI/UX 실무
2017.05.10 10:15

설화수 brands 메뉴

조회 수 34 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<!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;
}
</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>
                	<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>
  • ?
    콘디쌤 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>
    
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 22
2162 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
2161 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
2160 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
2159 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
2158 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
2157 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
2156 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
2155 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
2154 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
2153 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
2152 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
2151 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
2150 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
2149 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
2148 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 102
» UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
2146 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
2145 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
2144 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109