2021.07.16 CSS실습(6)

hae.log·2021년 7월 16일

html✍

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta name="description" content="덴마크 쇼핑몰 카피캣 연습">
	<meta name="author" content="손혜성">
	<meta name="keywords" content="html. css, tutorial">

	<title>Helbak</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<header id="header">
		<h1>
			<a href="#" class="logo">
				<img src="https://via.placeholder.com/186x18">
			</a>
		</h1>

		<nav class="buttons">
			<ul>
				<li>
					<a href="#" class="menu-button">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-button">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-button">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
			</ul>

		</nav>

	</header>



	<main role=main class="main-content">
		<ul class="product-group">
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 1</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 2</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 3</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 4</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 5</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 6</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
		</ul>
	</main>



	<footer id="footer">

		<nav class="left-nav">
			<ul>
				<li><a href="#">Terms and conditions</a></li>
				<li><a href="#">Cookies</a></li>
			</ul>
		</nav>

		<nav class="right-methods">
			<h3>Payment Methods</h3>
			<ul>
				<li><span class="payment-icon one"></span></li>
				<li><span class="payment-icon two"></span></li>
				<li><span class="payment-icon three"></span></li>
				<li><span class="payment-icon four"></span></li>
				<li><span class="payment-icon five"></span></li>
			</ul>
		</nav>

		<a href="#" class="to-top-button"></a>
		
	</footer>




</body>
</html>

css✍

/* 모바일버전 */

* {
	margin: 0;
	padding: 0;
		
        
	box-sizing: border-box;
    
   👉  padding으로 인해 공간의 크기가 달라지는 것을 방지하기 위해 넣어줌
    
   👉 * { } = margin과 padding값을 
      기본적으로 갖고있는 태그(html, body, h1, h2, h3, p태그 등) 들을 
      한번에 적용가능
    
}

html ,body {
	width: 100%;
	height: 100%;
}

   👉웹사이트 제작시 디폴트값으로 넣어주기
     body태그의 전체 영역을 확인가능하기 때문에 넣어줘야함

body {
	overflow-x: hidden;

	font-family: sans-serif;
	color: #585858;
}

h1, h2, h3, h4, h5, h6, p {
	font-weight: 400;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	vertical-align: middle;
}

span {
	display: block;
}

#header h1 {
	background-color: yellow;
}

#header h1 .logo {
	position: relative;
	display: block;

	width: 100%;
	height: 65px;
	/*background-color: yellow;*/
}

#header .logo img {
	position: absolute;

	top: 0;
	margin-top: 12px;

	left: 50%;
	margin-left: -93px;
}

#header .buttons li{
	overflow: hidden;
}

#header .buttons li {
	position: relative;
	float: left;

	width: 33.333%;
	height: 65px;
}

#header .buttons .menu-button {
	display: block;

	width: 100%;
	height: 100%;
	text-align: center;
}

buttons 안에 있는 li 태그 안에서 1번째로 나오는 
자식영역 안에 있는 메뉴버튼을 선택하겠다!

👉 #header .buttons li:nth-child(1) .menu-button {
	background-color: blue;
   }

#header .buttons li:nth-child(2) .menu-button {
	background-color: pink;
}

#header .buttons li:nth-child(3) .menu-button {
	background-color: green;
}

💡 y축 중앙정렬 공식
  top 값사용할때는 position relative 적용하기 position     relative로 
  top 으로 50% 밑으로 내려주고 transform 에 translateY(-50)해주면
  y축 중앙정렬이된다.

#header .buttons li .menu-button img {
	position: relative;
	height: 20px;

	top: 50%;
	transform: translateY(-50%);
}

/* pc버전 */

/* 1em = 16px */

@media (min-width: 47em) {
	#header {
		position: fixed;
		width: 100%;
		height: 80px;

		top: 0;
		left: 0;

		z-index: 99999;
	}

	#header h1 {
		width: 50%;
	}

	#header h1 .logo {
		width: 280px;
		height: 80px;
	}

	#header .logo img{
		margin-top: 30px;
	}

	#header .buttons {
		position: absolute;
		width: 50%;

		left: 50%;
		top: 0;
	}

	#header .buttons li {
		height: 80px;

	}
}


/* 모바일버전 */

.main-content .product-group-link {
	position: relative;
	display: block;
	/*float: left;*/

	width: 100%;
	height: 56.25%;
	border: solid 10px red;

	overflow: hidden;
}

.main-content .product-group-link img {
	width: 100%;
	height: 100%;
}

.main-content .product-group-link .link-text {
	position: absolute;

	left: 25px;
	bottom: 25px;

	color: black;
	font-size: 25px;
}

/* pc버전 */

@media (min-width: 47em) {
	.main-content {
		padding-top: 80px;
	}
}


@media (min-width: 62em) {
	.main-content {
		overflow: hidden;
	}

	.main-content .product-group-link {
		float: left;
		width: 50%;
		height: 28.125%;
	}
}

#footer {
	position: relative;
	/*background-color: yellow;*/

	padding-bottom: 66px;
}

#footer .left-nav {
	padding-top: 20px;
	text-align: center;
}

#footer .left-nav li {
	padding: 5px 0;
}

#footer .right-methods {
	text-align: center;
	margin-bottom: 20px;
	margin-top: 30px;
}

#footer .right-methods li {
	display: inline-block;
	padding: 7px 4px;
}

#footer .right-methods .payment-icon {
	display: inline-block;

	width: 30px;
	height: 20px;
}

#footer .right-methods .payment-icon.one {
	background-color: black;
}

#footer .right-methods .payment-icon.two {
	background-color: red;
}

#footer .right-methods .payment-icon.three {
	background-color: pink;
}

#footer .right-methods .payment-icon.four {
	background-color: blue;
}

#footer .right-methods .payment-icon.five {
	background-color: gray;
}

#footer .to-top-button {
	position: absolute;
	display: block;

	width: 66px;
	height: 66px;
	background-color: green;

	bottom: 0;
	left: 50%;
	margin-left: -33px;
}

/* pc버전 */

@media(min-width:  60em) {
	#footer {
		height: 66px;
	}
	#footer .left-nav {
		float: left;

		width: 50%;
		background-color: yellow;
		text-align: left;

		padding-top: 32px;
		padding-left: 40px;
	}

	#footer .right-methods {
		float: right;

		width: 50%;
		background-color: yellowgreen;

		margin: 0;
		padding-top: 32px;
		padding-right: 40px;

		text-align: right;
	}

	#footer ul, #footer li, #footer h3 {
		display: inline-block;
		vertical-align: middle;
	}

	#footer .left-nav a {
		font-size: 14px;
		padding: 0 5px;

	}

	#footer .right-methods li {
		padding: 0 4px;
	}


	#footer h3 {
		padding-right: 10px;
	}


}

🚀 실무관련Tip

💡 id의 이름은 하나의 문서(html)에 1개만 있어야한다.

<ul>
		<li><a href="https://www.naver.com">one</a></li>
		<li><a href="contact.html">two</a></li>
		<li><a href="#three">three</a></li>
        
		 ```

href속성값으로 전혀다른html문서 url주소 id속성값 이 들어갈수 있다 .id이름이 같은경우 html의 결과에서 클릭했을때 어떤 섹션으로 이동할지 미정이기때문에 디폴트 값으로 #넣어줘야함.

class로는 a태그와 결합불가
a태그안에 들어갈수있는 속성값으로는 id 가 들어갈수 있고 id속성값으로는 하나의 문서에서 유일해야한다

	</ul>

	<div id="one">One</div>
	<div id="two">Two</div>
	<div id="three">Three</div>

💡 손쉬운 배치작업


.text-box {
	width: 200px;
	height: 200px;
	background-color: yellow;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

글자를감싸는 공간의 크기를 넘어갔을때 자동으로 줄바꿈 현상이 일어나는데,
white-space: nowrap; 줄바꿈 현상을 하지 않겠다.
overflow: hidden; 벗어나는 영역을 모두 감추고 싶다.
text-overflow: ellipsis : 영역을 벗어나는 영역에 말줄임표를 사용하겠다.

말줄임을 담당하는 태그를 미리 html에 넣어주면 편리하니깐 미리 넣어주기

✍css문서에서
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

세가지 코드를 복붙해서 html 문서에 class: ellipsis로 추가 해서 적용하기

hae.log

이전 포스트

2021.07.15 CSS(5)

다음 포스트

2021.07.16 CSS실습(6)

🚀 실무관련Tip

2021.07.15 CSS(5)

2021.07.19 CSS실습(7)

0개의 댓글