2021.06.04 (덴마크 쇼핑몰 실습)

학습한 내용

[상단 영역 작업]

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 미디어 쿼리를 사용하기 위해선 필수로 넣어주는 코드 */

• index.html부분

	<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>

• style.css부분

/* css초기화 작업 */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

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

body {
	overflow-x: hidden;

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

h1, h2, h3, h4, h5, h6, p {
	font-weight: 400; /* 100~900까지 100단위로 바뀜*/
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	vertical-align: middle; /* 이미지 하단에 미세한 공백 제거 */
}

span {
	display: block;
}

/* mobile버전 상단 영역 작업 */
#header h1 {
	background-color: #ffffff;
}

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

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

#header .logo img {
	position: absolute;

	top: 0;
	margin-top: 23px;

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

#header .buttons ul {
	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;
}

#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;
}

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

	
	top: 50%;
	transform: translateY(-50%); /* y축 기준으로 중앙정렬하는 방법 */
}

/* 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;
	}

[메인 영역 작업]

• index.html부분

	<main role="main" class="main-content">
		<ul class="product-group">
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product1</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product2</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product3</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product4</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
		</ul>
	</main>

• style.css부분

/* mobile버전 메인 영역 작업 */
.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-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: 60em) {
	.main-content {
		overflow: hidden;
	}

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

[하단 영역 작업]

• index.html부분

	<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>

• style.css부분

/* mobile버전 하단 영역 작업 */
#footer {
	position: relative;
	background-color: purple;
	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;
}


/* .payment-icon.one 클래스명을 붙여 쓰면 여러개의 payment-icon중에 one클래스를 
가지고 있는 영역을 선택 */
#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 .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;
	position: 0 5px;
}

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

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

}

[기타 HTML, CSS 실무팁]

<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>

a태그의 href영역에는 3가지가 들어갈수 있음

• url주소
• html파일문서
• id속성값 (클래스값은 사용할수 없음)

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

	white-space: nowrap; /* 영역을 벗어나도 줄바꿈을 하지 않고 일렬로 나열 */
	overflow: hidden;
	text-overflow: ellipsis;
	/* 글자태그 사용시 말줄임표시를 이용해야 할 경우 위에 코드3줄을 작성 */
}

<h1 class="ellipsis"><h1>
<h2 class="ellipsis"><h2>

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

• 자주 사용하는 기능은 클래스형태로 css에 미리 작성해두고 클래스만 적용해서 사용

학습내용 중 어려웠던 점

kidsgao는 적응형 웹사이트로 제작해서 정해진 넓이, 높이를 이용해서 했는데 덴마크쇼핑몰 실습은 반응형으로 제작했기때문에 %로 넓이와 높이를 지정해서 웹사이트 크기에 따라 자연스럽게 사이즈가 조절되는 형식으로 만들다보니 크기와 레이아웃이 잡히는 형태를 이해하는데 좀더 어려움이 있었습니다.

해결방법

%를 이용한 배치방법은 다양하게 있기 때문에 반응형이 적용된 부트스트랩 예시사이트 코드등을 보면서 반응형에 대한 다양한 배치구성을 참고하면 이해하는데 도움이 될거라 생각합니다.

학습소감

두개의 사이트에 대한 설계와 배치구성 애니메이션 미디어쿼리 그리고 적응형과 반응형등 지금까지 배운 내용들이 전부 들어간 실습을해서 이해하는데 도움이 되었고 실무에서 사용되는 팁들도 영상에 포함되서 효율적이었습니다.
기존에는 틀이 만들어진 부트스트랩 예시코드를 가져와 제거할건 제거하고 글자나 이미지 그리고 크기정도만 수정해서 사용했는데 다양한 css속성과 배치작업이 있다는것을 알게되었습니다.