21.07.15

유진·2021년 7월 16일

덴마크 쇼핑몰 카피캣 연습
이럴수가잇냐,., 한동안 키즈가오하다가 처음부분오니까 기억이 안나,.,.ㅜㅜ

<meta charset="utf-8"> : <!--<meta charset="문자셋"> HTML 문서의 문자 인코딩 방식을 명시함.
유니코드(Unicode)를 위한 문자셋인 UTF-8이 가장 많이 사용됨.-->

<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- meta viewport태그는 애플이 아이폰, 아이패드등 자사의 모바일 브라우저의 뷰포트 크기조절을 위해 만듦 
<meta name="viewport" content="width=device-width> : 브라우저 너비를 장치너비에 맞추어 표시한다는 뜻
inital-scale는 초기화면배륭임 1,0은 100%와같음 -->

<meta name="description" content="덴마크 쇼핑몰 카피캣 연습">
<!-- meta description은 검색 결과 페이지에서 해당되는 페이지에 대한 간단한 설명을 위한 메타태그로 
구글 검색결과에 노출이 되는 것으로 보통 <head></head> 사이에 
<meta name=”Description” content=”웹페이지 관련 설명”>형태로 웹페이지 설명을 추가하여 적용 -->

<meta name="author" content="장유진">
<!-- 문서의 저자(author)를 정의 -->

<meta name="keywords" content="html, css, tutorial">
<!--검색 엔진을 위한 키워드(keyword)를 정의하는 예제 -->

mwta코드 정리하면서 앞에서 배운거 기억나 서치하면서 기억력 향상시키기 ㅋㅋ
검색엔진 구글에 컨텐츠를 쳤을때 내 글이 상단에(?)위치하기 위함 이라고 배운거같음...<아님말고,,,

https://www.helbak.com/
카피켓하는 사이트임

들어가보면 헤더부분이 브라우저가 큰 창일시에는 한줄인데 창을 작게 줄이면 두줄로 변함

<header id="header"> //헤더 클래스명 저장 
	<h1>
		<a href="#" class="logo"> //로고지정 이미지 삽입
			<img src="https://via.placeholder.com/186x18">
		</a>
	</h1>
 
 nav태그 메뉴란
	<nav class="buttons"> //nav태그 클래스명 지정 ul안에 3개의li 태그 삽입
		<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 홈페이지 들어가보면
이캐 되있음 자리 배치 작업 해주면

기본css작업

* {
	margin: 0;
	padding: 0;
}

/* *표시는 모든 html 코드를 의미함 
  패딩값으로 인해 공간의 사이즈가 달라지는걸 방지하기 위해 box-sizing을 삽입 */

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

/* 바디태그 전체영역을 개발자가 확인할수있기때문에 디폴트로 넣어주면 좋음 */

body {
	overflow-x: hidden;
    
    font-family: sans-serif;
	color: #585858;
}

/*코드를 작성하다 이미지든 글자로든 브라우저를 넘어가 가로스크롤이 생기는걸 방지하기 위해서 
body에 overflow-x: hidden; 적용해주기 
모든태그는 body안에서 작성되기 때문에 모든 요소들에게 폰트 적용*/

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

/* 폰트 굵기 지정 굵기는 100~900으로 100단위로 지정가능 */

li {
	list-style: none;
}

/* li태그 사용했을떄 앞에 검은원이 붙는데 나는 이 스타일 적용을 뺴버리겠다 해서 쓰는게
list-style:none; */

img {
	vertical-align: middle;
}

/*  이미지의 하단에는 미세한 공백이 들어가는데 이를 주지않겠다라는 뜻 */

span {
	display: block;
}

헤더부분(로고, 로고사진)

/* span은 원레 인라인요소 */

#header h1 {
	background-color: #ffffff;
}

/* header안에있는 h1의 배경색 흰색으로 */

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

사진 중앙배열 왼쪽면을 기준으로 50%를 옮겨지기 때문에 그림의 절반크기를 빼줘야함(margin-left: -93px;)
피씨는 왼쪽정렬인데 왜 중앙정렬이냐면 모바일기준으로 모바일먼저 작성했기 때문
그럼 @media에서 피씨버전을 작성해주면 됨

헤더부분(버튼) - 설명 추가하기(35분경)

#header .buttons ul {
	overflow: hidden;
}

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

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

pc 헤더부분

/*1em=16px 스크롤을 위아래로 움직여보면 헤더는 항상 창맨위(z-index: 9999;)에 
같은 자리에 고정되어있음(position: fixed;)

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

		top: 0;
		left: 0;

		z-index: 9999;
	}

	#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부분

Product 1

<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 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 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 1</h2>
					<img src="https://via.placeholder.com/1000x563">
				</article>
			</a>
		</li>
	</ul>
</main>

main css

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

	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;

} 

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

@media (min-width: 60em) {
	.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;
}

/ .Payment-icon .five 저기 사이를 띄어버리면 .Payment-icon안에 있는 .five 클래스를 찾기 때문에 띄어쓰면 암됨 /

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

#footer .left-nav {
	float: left;

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

	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-top: 0 5px;
}

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



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

#footer a {

}

}

유진

이전 포스트

21.07.15

다음 포스트

21.07.15

기본css작업

헤더부분(로고, 로고사진)

헤더부분(버튼) - 설명 추가하기(35분경)

pc 헤더부분

index.html main부분

Product 1

main css

footer css

21.07.15

21.07.19

0개의 댓글