Day 15-덴마크 쇼핑몰 실습

SUN·2021년 7월 16일

1. 학습 내용

1. 기초 설정

HTML

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 뷰포트를 설정하여 모바일/Pc 버전 둘다 사용가능

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

<title>Helbak</title>

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

CSS

* {
margin: 0;
padding: 0;

box-sizing: border-box;}
 - *은 모든 HTMl 태그에 적용하겠다는 의미
- border-box: 패딩으로 인해 박스사이즈가 바뀌는 것을 방지

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

body {
	overflow-x: hidden; (가로 스크롤 방지)
	font-family: sans-serif;
	color: #585858;}

h1, h2 ,h3, h4, h5, h6 {
	font-weight: 400;} - 글자 굵기 지정
    
li {
list-style: none;}
- 리스트 앞 표시제거

a {
	text-decoration: none;}
    
img {
	vertical-align: middle;
} /*

- 이미지의 공백을 없앤다

span {
	display: block;}
- 가로로 배치

2. 상단 영역 작업

HTML

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

	<nav class="buttons">
		<ul>
			<li>
				<a href="#" class="menu">
					<img src="https://via.placeholder.com/22px*20px">
				</a>
			</li>
			<li>
				<a href="#" class="menu">
					<img src="https://via.placeholder.com/22px*20px">
				</a>
			</li>
			<li>
				<a href="#" class="menu">
					<img src="https://via.placeholder.com/22px*20px">
				</a>
			</li>
		</ul>	
	</nav>
</header>

CSS(모바일이 디폴트 - pc로 확장

#header h1 {
	background-color: yellow;}

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

	width: 100%;
	height: 65px;}

#header .logo img{
	position: absolute;

	top: 0;
	margin-top: 23px;

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

#header .buttons ul {
	overflow: hidden;}
    - 위에서 사용한 float를 초기화

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

	width: 33.33333%;
	height: 65px;}

#header .buttons .menu {
	display: block;

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

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

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

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

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

	top: 50%;
	transform: translateY(-50%); 
    - y축 중앙정렬방법}

@media (min-width: 47em) { - PC버전
	#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;
}

3. 메인 영역 작업

HTML

<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/1000px*563px">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product 2</h2>
					<img src="https://via.placeholder.com/1000px*563px">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product 3</h2>
					<img src="https://via.placeholder.com/1000px*563px">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product 4</h2>
					<img src="https://via.placeholder.com/1000px*563px">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product 5</h2>
					<img src="https://via.placeholder.com/1000px*563px">
				</article>
			</a>
		</li> 
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product 6</h2>
					<img src="https://via.placeholder.com/1000px*563px">
				</article>
			</a>
		</li> 
	</ul>
</main>

CSS

.main-content .product-group-link {
	position: relative;
	display: block;

	width: 100%;
	height: 56.25%;
    - 사진의 비율설정
    
	overflow: hidden;
	border: solid 10px red;}


.main-content .product-group-link img {
	width: 100%;
	height: 100%;}
    - 사진이 화면에 꽉차도록 설정

.main-content .product-group-link .link-text {
	position: absolute; 
    - img 파일은 2차원이라 3차원 뒤로 들어가게 된다.
    글자가 사진 앞으로 올 수 있음

	left: 25px;
	bottom: 25px;

	color: #000000;
	font-size: 25px;}

@media (min-width: 47em) {
	.main-content {
	padding-top: 80px;} 
	-메인의 위에 공간을 주어 3차원뒤로 들어가 있는 2차원을 내려 전체를 보이게 해준다}

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

	.main-content .product-group-link {
		float: left; 
       - Pc 버전에서 사진을 좌우로 배치

	width: 50%;
	height: 28.125%;
    - 위에서 준 비율과 비슷하게 준다.}}

4. 하단 영역 작업

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 Method</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>
			<!-- payment-icon은 공간을 구성하는데 사용, 
            뒷숫자들을 이용하여 배경이미지 삽입 -->
		</ul>
	</nav>

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

CSS

#footer {
	position: relative;
	background-color: mediumpurple;

	padding-bottom: 66px;
	-to-top-button이 들어갈 공간을 미리 설정}

#footer .left-nav {
	padding-top: 20px;
	text-align: center;
	-글자를 센터정렬하고 윗 공간을 준다}

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

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

#footer .right-methods li {
	display: inline-block; 
	-x축으로 정렬
	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: brown;}

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

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

#footer .right-methods .payment-icon.five {
	background-color: olive;}
    - 공간 속의 이미지를 넣는다.

- 띄어쓰면 앞선 항목안에 있는 요소를 선택하는 것이고 붙여쓰면 앞선 항목 중 뒤에 있는 요소와 같은 것을 선택

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

	width: 66px;
	height: 66px;
	background-color: darkred;
	bottom: 0;
	left: 50%;
	margin-left: -33px;}

@media (min-width: 60em) {

	#footer {
		height: 66px;}

	#footer .left-nav {
		float: left;

		width: 50%;
		text-align: left;

		padding: 32px 0 0 40px;}
        -오른쪽 영역의 크기와 위치설정

	#footer .right-methods {
		float: right;
		width: 50%;

		margin: 0;
		padding: 32px 40px 0 0;

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

5. 기타 HTML, CSS 실무팁

a 태그에서 href에는 외부링크, 다른 html, 같은 html내 id 속성 값을 설정할 수 있다.
말줄임표가 필요할 때
white-space: nowrap; -> 지정된 박스보다 초과되는 양일 때 줄바꿈이 되지 않고 x축으로 계속 가며 x축 스크롤이 생긴다.

overflow: hiddne; -> 스크롤이 없어지고 초과되는 부분은 숨긴다.

text-overflow: ellipsis; -> 초과되는 부분에서 말줄임표가 생긴다.
- 클래스를 만들어서 반복적으로 편하게 활용
  .ellipsis {
  white-space: nowrap
  overflow: hidden;
  text-overflow: ellipsis;
  를 만들어 필요한 곳에 클래스를 적용

2. 학습 중 어려웠던 점

키즈 가오보다 양은 적지만 뭔가 더 복잡했다.

3. 해결방안

다시 확인하면서 숙지해나간다.

4. 학습소감

하나를 배우면 다른 하나가 어렵다. 하나씩 배우다보면 새로운 것을 만나더라도 쉽게 해결 할 수 있을 것이다.

SUN

안녕하세요!

이전 포스트

Day 14. 키즈가오 실습 3

다음 포스트

Day 15-덴마크 쇼핑몰 실습

1. 학습 내용

1. 기초 설정

HTML

CSS

2. 상단 영역 작업

HTML

CSS(모바일이 디폴트 - pc로 확장

3. 메인 영역 작업

HTML

CSS

4. 하단 영역 작업

HTML

CSS

5. 기타 HTML, CSS 실무팁

2. 학습 중 어려웠던 점

3. 해결방안

4. 학습소감

Day 14. 키즈가오 실습 3

Day 16 - 네이버 메인 1편

0개의 댓글

관련 채용 정보