덴마크 쇼핑몰 실습

배성현·2021년 9월 15일

학습 내용
덴마크 쇼핑몰 실습을 햅보자
기초 설정
HTML

- 뷰포트를 설정하여 모바일/Pc 버전 둘다 사용가능 Helbak } 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;}

가로로 배치

상단 영역 작업
HTML

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

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

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%;
- 위에서 준 비율과 비슷하게 준다.}}

하단 영역 작업
HTML

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

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) 학습소감
집이그립네요

배성현

이전 포스트

키즈가오 실습3

다음 포스트

덴마크 쇼핑몰 실습

Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

키즈가오 실습3

네이버메인 - 1

0개의 댓글