2021.07.16 덴마크쇼핑몰

정혜리·2021년 7월 16일
CSShtml개발일지코린이프론트엔드
0

Practice-copy_websites

목록 보기
4/15

Day15,
오늘은 덴마크 쇼핑몰을 따라만들어봤다.

오늘 무엇을 배웠지?

덴마크 쇼핑몰 따라만들어보기

Helbak :https://www.helbak.com/

상단영역

html

  1. new file-save(index0716.html), save(style0716.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력
<link>
<!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="keywords" content="html, css, tutorial">
	<meta name="author" content="정혜리">
	<title>HELBAK</title>
	<link rel="stylesheet" type="text/css" href="css/style0716.css">
</head>
<body>

</body>
</html>
  1. <header>태그로 페이지의 상단영역을 설정하고 id를 입력한다. 상단 좌측은<h1> 태그로 들어갈 하이퍼링크로 이동할 <a>, 이미지<img>태그를 감쌀 영역을 설정하고 class를 설정한다. 상단 우측은 <nav>태그로 영역을 구분짓고 class를 설정한다. 그 안에 <ul>, <li>, <a>태그로 영역을 구분짓고 class를 설정한다.
	<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>

CSS-Style

  1. Default CSS
* { margin: 0; padding: 0; box-sizing: border-box; } 
html, body { width: 100%; height: 100%; }
li { list-style: none; }
body { overflow-x: hidden; font-family: sans-serif; 
	color: #585858; } 
h1, h2, h3, h4, h5, h6, p { font-weight: 400; }
a { text-decoration: none; }
img { vertical-align: middle; }
span { display: block; }
  • *표시는 모든 html 태그에 적용하겠다는 뜻
  • box-sizing: border-box는 패딩값으로 인해 박스 사이즈가 달라지는 것을 방지
  • html, body { width:100%, height: 100% } : 웹브라우저의 사이즈에 맞게 html, body영역이 꽉차도록 설정
  • list-style: none; : 리스트 스타일의 기본 설정값을 없앰
  • img { vertical-align: middle; } : 이미지가 수직정렬->중앙정렬
  1. 상단영역 중 로고가 있는 영역 <h1>을 쉽게 확인하기 위해 배경색을 입히고 .logo는 부모자식관계의 태그들과 영향을 받도록 하기위해 position을 relative로 설정하고 block속성으로 설정한다. 또 너비와 높이를 설정한다. <img>는 position을 absolute로 설정하고 left와 margin으로 중앙에 위치하도록 설정한다. 
#header h1 { background-color: green;}
#header h1 .logo { position: relative; display: block;
width: 100%; height: 65px; }
#header .logo img { position: absolute; top: 0; left: 50%;
 margin: 23px 0 0 -93px }
  1. 상단영역의 우측에 있는 영역을 .buttons로 설정하고, <ul>태그가 자식관계의 높이에 영향을 받기 위해 overflow: hidden으로 설정한다. <li> 태그는 부모태그에 영향을 주기 위해 position을 relative로 설정하고 float: left로 설정해 왼쪽에서부터 차례로 좌->우정렬 되도록 설정한다. 3개 버튼의 너비를 3등분 하기위해 width를 33.33333...%로 설정ㅇ한다. 각 <li>태그의 <a> 태그 기능이 여백에도 적용되도록 display: block;으로 설정한다. 
#header .buttons ul { overflow: hidden; }
#header .buttons li { position: relative; float: left;
 width: 33.3333%; height: 65px; border: solid 3px gold; }
#header .buttons li .menu-button { display: block; width: 100%;
height: 100%; text-align: center; }
  1. 각 버튼영역을 구분해서 확인하기 위해 각 버튼의 배경색을 적용한다.
#header .buttons li:nth-child(1) .menu-button { background-color: lightyellow; }
#header .buttons li:nth-child(2) .menu-button { background-color: pink; }
#header .buttons li:nth-child(3) .menu-button { background-color: blue; }
  1. .menu-button에 속한 <img>태그들의 position을 relative로 설정하고 높이를 설정하고 Y축 중앙정렬한다.
#header .buttons li .menu-button img { position: relative; 
height: 20px; top: 50%; transform: translateY(-50%); }

+++top: 50%; transform: translatetY(-50%);는 Y축 중앙정렬 공식

  1. 미디어쿼리로 모바일 버전이 아닌 pc버전에 대한 디자인을 한다. pc버전에서는 스크롤을 내려도 항상 상단영역이 고정되어 있으므로 z-index:999;로 position: fixed로 설정한다. 높이와 너비를 설정하고 위치를 top, left로 설정한다.
    <h1>태그의 너비를 웹브라우저의 반을 차지하도록 설정하고, 이에 속한 .logo, .buttons의 너비와 높이를 재설정한다. 
@media (min-width: 47em) {
	#header { position: fixed; width: 100%; height: 80px;
	top: 0; left: 0; z-index: 999; }
	#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; }
}

+++ 1em=16px

메인영역

html

(상단영역 html에 이어서)
1. <main> 태그로 메인 영역을 설정하고 id를 설정한다. main 태그는 익스플로러에서 인식안되기때문에 role="main"을 추가해야한다.
2. <ul> 태그로 product 리스트 그룹을 만든다.
3. <li>태그로 링크기능의<a>와 상품설명의 <h2>태그와 상품이미지의 <img>태그들을 감싼다. 이 <li>태그를 물품 항목만큼 반복한다.

	<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="http://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
                     	  .
                          .
                          .
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 6</h2>
						<img src="http://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
		</ul>
	</main>

CSS-Style

(상단영역의 css에 이어서)
1. <a>태그인 .product-group-link의 position을 relative로 설정해 부모태그들과 영향을 받을수 있도록 한다. 너비와 높이를 설정한다.

.main-content .product-group-link { position: relative;  display: block;
	width: 100%; height: 56.25%; border: solid 2px red; 
    	overflow: hidden; }
.main-content .product-group-link img { width: 100%; height: 100%; }
  1. .link-text의 position을 absolute로 설정하고 left, bottom으로 위치를 설정하고 글자색, 글자크기를 설정한다.
.main-content .product-group .link-text { position: absolute;
left: 25px; bottom: 25px; color: black; font-size: 25px; }
  1. 미디어쿼리로 pc버전일때 웹브라우저 디자인을 재설정한다. 
@media (min-width: 47em) {
	.main-content { padding-top: 80px; }
}
@media (min-width: 60em) {
	.main-content { overflow: hidden; }
	.main-content .product-group-link { width: 50%; 
		height: 28.125%; float: left; }
}

하단영역

html

(상단영역, 메인영역의 html에 이어서)
1. <footer> 태그로 하단 영역을 설정하고 id를 설정한다.
2. <nav>태그로 하단 좌측 영역, 하단 우측 영역을 설정하고 class를 설정한다. <ul>태그로 리스트영역을 설정하고 <li>와 <a>로 링크기능이 있는 목록을 만든다.
3. 하단 중앙에 있는 누르면 페이지의 최상단으로 스크롤되는 버튼을 만들기 위해 <a>태그를 이용해 class설정한다.

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

CSS-Style

(상단영역, 메인영역의 css에 이어서)

  1. <footer>태그인 #footer의 자식태그들의 영향을 받기 위해 position: relative로 설정하고, padding 값으로 위치를 설정하고 확인하기 쉽게 배경색을 설정한다.
#footer { position: relative; background-color: yellow; 
	padding-bottom: 66px; }
  1. 하단 좌측부분인 <nav> 태그 .left-nav의 위치를 설정하고 text-align:center로 중앙정렬 하도록 한다. .left-nav의 각 <li> 태그 상하 padding값을 5px로 설정해 간격을 만든다.
#footer .left-nav { padding-top: 10px; text-align: center; }
#footer .left-nav li { padding: 5px 0; }
  1. 우측 하단 영역인 .right-methods의 위치를 margin값으로 설정하고 중앙정렬 되도록 설정한다. .right-methods에 속해있는 <li>태그들의 속성을 display: inline-block으로 설정하고 상하좌우 padding 값을 설정해 상하좌우 간격을 준다.
#footer .right-methods { text-align: center; 
	margin: 30px 0 20px 0; }
#footer .right-methods li { display: inline-block;
 padding: 7px 4px; }
  1. 우측하단영역의 .payment-icon의 속성을 inline-block으로 설정하고 너비와 높이를 설정한다. .payment-icon.one~five 태그들의 이미지 대신 배경색을 설정해 구분한다.
#footer .right-methods .payment-icon { display: inline-block;
width: 30px; height: 20px; }

#footer .right-methods .payment-icon.one { background-color: blue; }
#footer .right-methods .payment-icon.two { background-color: red; }
#footer .right-methods .payment-icon.three { background-color: black; }
#footer .right-methods .payment-icon.four { background-color: green; }
#footer .right-methods .payment-icon.five { background-color: brown; }

+++class를 "payment-icon one"으로 설정했지만, css 디자인시 띄어쓰기는 다르게 인식 할수 있기 때문에 "payment-icon.one"으로 입력해야한다!

#footer .to-top-button { position: absolute; display: block;
width: 66px; height: 66px; background-color: pink; left: 50%;
margin-left: -33px; bottom: 0; }
  1. 미디어쿼리로 모바일 버전이 아닌 pc버전에 대한 디자인을 한다. 하단좌측영역은 float: left,text-align: left로 설정해 좌측에,좌측정렬로 위치하도록 설정하고 브라우저의 반사이즈가 되도록 width:50%로 설정한다.
    하단 우측영역은 float: right, text-align: right로 설정해 우측에, 우측정렬로 위치하도록 설정하고 동일하게 width: 50%로 설정한다. 각 태그들의 위치를 padding값을 이용해 설정하고 글자크기를 설정한다. 
@media (min-width: 60em) {
	#footer .left-nav { float: left; width: 50%; 
		text-align: left; padding: 32px 0 0 40px; }
	#footer .left-nav a { font-size: 14px; padding: 0 5px; }

	#footer .right-methods { float: right; width: 50%;
		margin: 0; padding: 32px 40px 0 0; text-align: right; }
	#footer .right-methods li { padding: 0 4px; }
	
	#footer h3 { font-size: 14px; padding-right: 10px; }

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

실무팁

  • id는 이름이기때문에 같은 이름을 쓸 수 없다!
    그 이유는 href로 id를 설정할 수 있는데 같은 이름이 있으면 원하는 좌표의 역할을 수행할 수 없음!
  • css에서 white-space: nowrap; 은 설정한 영역과는 상관없이 x축으로 <p>태그 안에있는 글을 배열하도록 함->가로스크롤이 생김, 이렇게 영역을 넘어가는 양의 글을 말줄임표로 줄일때는 overflow: hidden; text-overflow: ellipsis; 을 적용하면 됨 ex) .ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    └> 너비에 맞게 한 줄만 텍스트가 나오고 그 이후의 글은 말줄임표로 나타내겠다는 뜻
  • 자주 사용하는 css 디자인은 class에 설정한후 html의 태그에 class로 (css->html) 입력해주면 설정한 class를 가진 태그는 모두 그 class값을 나타낸다!
    ex)
  • 통용되는 줄임말 : .m-b-10 { margin-bottom: 10px;} .p-l-50 { margin-left: 50px;}

무엇이 어려웠지?


왜 범위를 설정할때 어떤것은 47em 으로 설정하고, 어떤것은 60em으로 설정해야하는가? 그냥 47em으로 통일하면 안되는건가..?하는 의문이 들었다.

어떻게 해결했지?

그래서 일단 47em으로 통일해서 모두 설정해 봤다. 그랬더니 2개로 나열된 상태일때 60em으로 설정했을 때 보다 이미지의 크기가 줄어들어서 조금 안예쁘다는 생각이 들었다. 이미지 크기에 따라 조금씩 다르게 범위를 설정해도 괜찮다는 것을 알았다. FM 스타일이기 때문에 범위를 A로 정하면 B로 해도 괜찮은 걸 알려주기 전까지 A로만 고집하는 경향이 있는데, 내가 디자인 할 수 있는 영역이 넓어지는 느낌이었다.

그래서?

마지막에 실무적 팁이 정말 획기적인걸 발견한 것 마냥 신기했다. 수업이고, 연습을 위해 반복적으로 동일한 디자인을 해야하는게 너무 비효율적이고 귀찮다고 느끼던 차였는데 마지막에 이렇게 지금보다는 효율적인 방법이 있다는 것을 알게 되고는 저 팁들을 자주 이용할 것 같다!
html, css 웹프로그램을 배우게 된지도 벌써 3주가 지나갔다. 들인 시간 만큼 실력도 많이 성장했으면 좋겠다.

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0716

profile
정혜리
.
이전 포스트

2021.07.15 kidsgao-3

다음 포스트

2021.07.19 NAVER-1

0개의 댓글

관련 채용 정보