본문 바로가기
웹 개발/CSS

[Web_CSS] 05

유리rr 2022. 4. 23. 11:26

실습(display)

- 아래 이미지처럼 출력하기

 

 

1. float 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
</head>
<style>
	body {
		margin: 0;
	}

	div.center-wrap {
		text-align: center;
		width: 100%;
	}

	div#float-wrap {
		display: inline-block;
	}

	div#float-wrap div{
		float: left;
	}
	
	div#float-wrap div {
		width:30%;
	}
	
	img {
		width: 100%;
	}
	
</style>
<body>
	<div class="center-wrap">
		<div id="float-wrap">
			<div style="margin-right:5%;">
				<img src="img1.jpg">
			</div>
			<div style="margin-right:5%;">
				<img src="img2.jpg">
			</div>
			<div>
				<img src="img3.jpg">
			</div>
		</div>
	</div>
</body>
</html>

 

 

 

2. display - flex 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
</head>
<style>
	body {
		margin: 0;
	}

	div#flex-wrap {
		display: flex;
		justify-content: center;
	}
	
	div#flex-wrap div {
		width: 33%;
	}
	
	img {
		width: 100%;
	}
	
</style>
<body>
	<div id="flex-wrap">
		<div><img src="img1.jpg"></div>
		<div><img src="img2.jpg"></div>
		<div><img src="img3.jpg"></div>				
	</div>
</body>
</html>

 

 

 

3. display - table 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
</head>
<style>
	body {
		margin: 0;
	}

	div#table-wrap {
		display: table;
		margin: 0 auto; /* 가운데 정렬 */
	}
	
	div#table-wrap div {
		display: table-cell;
	}
	
	img {
		width: 100%;
	}
	
</style>
<body>
	<div id="table-wrap">
		<div><img src="img1.jpg"></div>
		<div><img src="img2.jpg"></div>
		<div><img src="img3.jpg"></div>
		<div><img src="img1.jpg"></div>
		<div><img src="img2.jpg"></div>
		<div><img src="img3.jpg"></div>
	</div>
</body>
</html>

 

결과

 

 

 

 

실습(publishing)

- 스00닷컴 publishing

 

- 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스00닷컴</title>
<link href="//db.onlinewebfonts.com/c/05078759185c986d15c17e7ee8deff43?family=DINPro-Bold" rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/e0be9bd5e372b2c379893b776e7b2b96?family=DINPro-Light" rel="stylesheet" type="text/css"/>
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css" rel="stylesheet">
<style>
    body {
	    background-color: #f3f7fa;
	    color: #303030;
    }
    
    div#wrap {
    	display: table;
    	border-spacing: 7px 0;
    	margin: 0 auto;
    }
    
    div.row {
    	display: table-row;
    }
    
    div.col {
    	display: table-cell;
    	background: white;
    	width: 230px;
    	height: 294.58;
    	font-family: "DINPro-Light";
    	font-size: 20px;
    	/*margin: 0 3px 6px;*/ /* 위 좌우 아래 */
    }
    
    div.col > p {
    	display: table-caption;
    	font-size: 12px;
    	width: 30px;
    	color: #ff6b00;
    	padding-left: 12px;
    }
    
    div.img-wrap {
    	text-align: center;
    	margin: 0 auto 22px;
    }
    
    div.brand-img-wrap {
    	margin: 0;
    }
    
    img {
    	width: 90px;
    	height: 90px;
    	border-radius: 100%;
    }
    
    div.title {
    	text-align: center;
    	letter-spacing: -1px;
    }
    
    div.title strong {
    	font-family: DINPro-Bold;
    }
    
    div.flex-container {
    	display: flex;
    	justify-content: space-evenly;
    	font-size: 12px;
    	color: gray;
    	margin-top: 12px;
    	font-family: "DINPro-Light";
    }
    
    div.flex-container div {
    	width: 50%;
    }
    
    div.flex-container div p {
    	text-align: center;
    }
    
    div.brand-flex-container {
    	border-top: 1px solid #edeff0;
    	margin-top: 40px;
    }
    
    div.flex-container button {
    	flex: 1;
    	background-color: #fff;
    	font-size: 11px;
	    color: #909090;
	    line-height: 40px;
	    text-align: center;
	    border: 0;
	    display: flex;
    }
    
    div.flex-container button img {
    	width: 11px;
    	height: 11px;
    	display: inline-block;
    	margin-left: 7px;
    }
    
    div.flex-container button p {
    	margin: 0;
    	margin-left: 10px;
    	width: 50%;
    	text-align: right;
    }
    
    div.flex-container button div {
    	padding-top: 1px;
    	width: 50%;
    	text-align: left;
    }
    
    div.flex-container a {
    	font-size: 11px;
    	flex: 1;
    	color: #909090;
    	border-right: 1px solid #edeff0;
    	line-height: 40px;
    	text-align: center;
    }
    
    p.number {
    	font-size: 26px;
    	text-align: center;
    	font-family: 'NanumGothicBold';
    }
    
    div#shop-title {
    	color: gray;
    }
    
    p#item-number {
    	color: #ff6b00;
    }
    
    div#brand-title {
    	font-family: "Malgun Gothic";
    }
    
    div#brand-title h2 {
	    color: #303030;
	    font-size: 15px;
	    padding: 19px 0 15px;
	    margin: 0;
    }
    
    div#brand-title p {
    	text-align: center;
    	font-size: 13px;
    	color: #909090;
    	margin: 0;
    	padding: 1px 0;
    }
    
</style>
</head>
<body>
	<div id="wrap">
		<div class="row">
			<div class="col">
				<div class="img-wrap">
					<img src="https://www.sta1.com/_nuxt/img/icon-myshop@3x.00de977.png">
				</div>
				<div class="title" id="shop-title">
					<span>MY</span>
					<strong>SHOP</strong>
				</div>
				<div class="flex-container">
					<div>
						<p>SHOP</p>
						<p class="number">0</p>
					</div>
					<div>
						<p>NEW ITEM</p>
						<p class="number" id="item-number">0</p>
					</div>
				</div>
			</div>
			<div class="col">
				<p>1위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/brnd/img/2018/01/1516080494643_130*130.jpg">
				</div>
				<div class="title" id="brand-title">
					<h2>나이키</h2>
					<p>10대,20대,30대</p>
					<p>스포츠</p>
				</div>
				<div class="flex-container brand-flex-container">
					<a>전체상품</a>
					<button>
						<p>마이샵</p>
						<div>
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNrs1jEKACAMQ9FGvP8ZclNdxbEWUfiZOpUHGVrZjoOMZVZ2SYsHAgIECBAgQHyJ6Ns5rjrr1JGuQ0UV8FmBAAECBAgQ1zMFGABYogYlJB84mgAAAABJRU5ErkJggg==">
						</div>
					</button>
				</div>
			</div>
			<div class="col">
				<p>1위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/brnd/img/2018/01/1516080494643_130*130.jpg">
				</div>
				<div class="title" id="brand-title">
					<h2>나이키</h2>
					<p>10대,20대,30대</p>
					<p>스포츠</p>
				</div>
				<div class="flex-container brand-flex-container">
					<a>전체상품</a>
					<button>
						<p>마이샵</p>
						<div>
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNrs1jEKACAMQ9FGvP8ZclNdxbEWUfiZOpUHGVrZjoOMZVZ2SYsHAgIECBAgQHyJ6Ns5rjrr1JGuQ0UV8FmBAAECBAgQ1zMFGABYogYlJB84mgAAAABJRU5ErkJggg==">
						</div>
					</button>
				</div>
			</div>
			<div class="col">
				<p>2위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/brnd/img/2018/01/1516080494643_130*130.jpg">
				</div>
				<div class="title" id="brand-title">
					<h2>나이키</h2>
					<p>10대,20대,30대</p>
					<p>스포츠</p>
				</div>
				<div class="flex-container brand-flex-container">
					<a>전체상품</a>
					<button>
						<p>마이샵</p>
						<div>
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNrs1jEKACAMQ9FGvP8ZclNdxbEWUfiZOpUHGVrZjoOMZVZ2SYsHAgIECBAgQHyJ6Ns5rjrr1JGuQ0UV8FmBAAECBAgQ1zMFGABYogYlJB84mgAAAABJRU5ErkJggg==">
						</div>
					</button>
				</div>
			</div>
			<div class="col">
				<p>3위</p>
				<div class="img-wrap brand-img-wrap">
					<img src="https://image-proxy.sta1.com/_up/brnd/img/2018/01/1516080494643_130*130.jpg">
				</div>
				<div class="title" id="brand-title">
					<h2>나이키</h2>
					<p>10대,20대,30대</p>
					<p>스포츠</p>
				</div>
				<div class="flex-container brand-flex-container">
					<a>전체상품</a>
					<button>
						<p>마이샵</p>
						<div>
							<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNrs1jEKACAMQ9FGvP8ZclNdxbEWUfiZOpUHGVrZjoOMZVZ2SYsHAgIECBAgQHyJ6Ns5rjrr1JGuQ0UV8FmBAAECBAgQ1zMFGABYogYlJB84mgAAAABJRU5ErkJggg==">
						</div>
					</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

 

 

 

 

저작자표시 비영리 변경금지

'웹 개발 > CSS' 카테고리의 다른 글

[Web_CSS] 07  (0) 2022.04.25
[Web_CSS] 06  (0) 2022.04.24
[Web_CSS] 04  (0) 2022.04.22
[Web_CSS] 03  (0) 2022.04.21
[Web_CSS] 02  (0) 2022.04.20

'웹 개발/CSS' Related Articles

티스토리툴바