2021.07.16 덴마크쇼핑몰

dogyeomyeo4444·2021년 7월 16일
대구AI스쿨
0

오늘의 강의 내용

* 덴마크 쇼핑몰 웹사이트


pc버전에서의 덴마크쇼핑몰



mobile버전에서의 덴마크쇼핑몰

<!-- 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="#">Terma 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>

<!-- style.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;
}

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: 23px;

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

#header .buttons ul {
	overflow: hidden;
}

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

	width: 33.3333%;
	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%);
}

/* 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;
	}
}
<!-- style.css언어 -->
* {
	margin: 0;
	padding: 0;
    
    box-sizing: border-box;
}

위 소스코드 는 모든 html태그에 margin 관 padding 값에 0을 적용 하겠다는 뜻.
box-sizing: border-box; 는 padding 값으로 인한 공간에 대한 크기가 달라짐을 방지 하기 위해 사용(초기화 한다고 생각하면 편하다.)

<!-- style.css언어 -->
html, body {
	width: 100%;
	height: 100%;
}

위 소스코드는 브라우저의 사이즈값을 100% 잡아준것.
웹사이트 작업시에 위 소스코드를 디폴트로 넣어주면 좋다.
body태그의 전체 영역을 개발자가 확인할수 있기때문.

  • font-weight : 폰트굵기. 폰트굵기는 100단위로 올라간다. 올라갈수록 굵어진다.

  • 덴마크쇼핑몰 사이트 작성에 한하여 mobile버전 진행을먼저 작성

  • y축중앙 정렬 tip (실무에서도 유용)

<!-- style.css언어 -->
	top: 50%;
	transform: translateY(-50%);
}

  • 1em = 16px

  • article 태그를 사용할때에는 이영역을 대표하는 title이 필요하다.

  • class를 여러개 기입하였을때, 각 class별로 역할을 구분해주면 좀더 명확하게 html설계 도면작업을 진행할수있다. 다른사람이 보았을때 도면에 대한 의미가 잘 전달이 된다.

  • payment-icon.one 이 소스코드 처럼 붙여서 .one을쓰면 payment-icon.one을 선택하라는 뜻.
    반대로 payment-icon .one 뛰어쓰기가 들어가면 자식으로 있는 one class를 선택하라는 뜻.

  • 공간의 크기를 다 명시한다음에 연습을 하는것이 나중에 배치작업을 할때 헷갈리지않는다.

* 실무 tip

** id속성값

<!-- html언어 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

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

</body>
</html>

  • href의 속성값으로는 다음 세가지가 들어갈수있다.
    첫번째 url주소, 두번째전혀다른 html파일문서, 마지막
    _세번째_id 속성값이 들어갈수있다.

  • id 속성값이 중복하여 사용하면, 위와 같이 href의 원래 역할을 하는데 지장을 줄수 있으며 혼란만 가중시키기 때문에 작업중 id속성값이 중복된것은 없는지 잘살펴보며 작업을 징행하여야 한다.

  • id속성값들은 하나의 html문서안에서 유일해야 한다.

  • class는 a태그와 결합할수 없다.

** 말줄임 속성값


말줄임 속성값들이 적용된 모습

<!-- style.css언어 -->
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

말줄임 표시를 해야만 하는 상황이 올떄 위 세가지 소스코드만 사용하면 된다.
위 방식은 작업에 필요한 class안에 다른 속성값들 과 같이 작성한것이다.

  • white-space: nowrap 줄바꿈 없앨때 사용

  • overflow: hidden 영역을 벗어나는 것 삭제

  • text-overflow: ellipsis 애매하게 잘린 text뒷부분을
    ...으로 표시

위에 방법 처럼 필요할때에 class안에 작성할수도 있고, 

<-- html언어 -->
<h1 class="ellipsis">
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
		동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세
</h1>

<!-- style.css언어 -->
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

위 소스코드 처럼 어떠한 역할을 담당하는 class를 만들어두고,
그 class를 html태그에 추가 하는 방식으로 적용할수이다.
이작업으로 인해 코드분량을 많이 줄일수가 있다.
ex)

<!-- style.css언어 -->
.m-b-10 {
	margin-bottom: 10px;
}

.p-b-100 {
	padding-bottom: 100px;
}

.p-t-50 {
	padding-top: 50px;
}

.p-l-10 {
	padding-left: 10px;
}

.p-r-10 {
	padding-right: 10px;
}

이런식으로도 역할을담당하는 class를 만들수도 있다.

강의를 끝난후 소감

이번 강의는 처음으로 웹페이지 전체를 작업해 보았는데, 생각보다 배치하는것이 복잡하다라는 생각이 들었고, 공간감이 좋으면 여러가지 다양한 배치를 할수있겠다 라는 생각이 들었다.
그리고 유용한 실무tip들은 정말 꿀과 소금이였다.
다시한번 말하지만 익숙해질려면 연습이고 반복 뿐이다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.07.15키즈가오(3)

다음 포스트

2021.07.19 네이버메인(1편 카피캣)

0개의 댓글

관련 채용 정보