1. 학습내용

helbak사이트 실습

상단 설계도면

일반적으로는 media쿼리에서는 모바일작업 밖에서는 pc작업 그러나 덴마크 쇼핑몰은 반대로 작업함 (media쿼리안쪽에는 pc작업 밖에는 모바일 작업)

kidsgao 같은 경우는 어느시점이 되면 갑자기 모바일 버전으로 바뀌는 적응형 웹사이트라면 덴마크 helbak은 자연스럽게 resize되다가 레이아웃이 변경되는 반응형 웹사이트

미디어쿼리사용할때 viewport 기본값

로고는 가장중요한정보라 h1

svg? svg라는 확장명을 가지고 이미지를 만들수있음. 그럴때는 svg라는 태그를 사용해서 코드를 구성함

메뉴쪽은 서랍장 한개를 만드는데 nav태그사용

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

html, body, h1, h2, h3 ,p 마진과 패딩값을 기본적으로 가진 태그가많음 일일이 다해주기엔 너무 번거러워서 별표 사용 (별표는 모든 html tag)

padding으로 인해서 공간의 대한 크기가 달라지는걸 방지하기위해 boxsizing

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

웹사이트를 작업할떄 html, body width100% height100%는 default값으로 넣어주는게 좋음

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

x축영역을 벗어나는 오브젝트가 있을 수 있음. 가로스크롤이 안 생기게 하기위해 overflow-x: hidden 적용

body태그안에다가 fontfamily와 color를 적용하게되면 이후에 작성되는 모든 글자와 관련된 태그들은 어차피 body태그 안에서 작성하기때문 fontfamily와 color 유전자정보를 글자를 작성할때 사용되는 태그들이 상속을 받게됨

body {
	overflow-x: hidden;

	font-family: sans-serif;
	color: #585858;
}

폰트의굵기는 100단위로 올라가는데 100~900 숫자가 높을수록 폰트굵기가 굵어진다

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

이미지하단에 미세한공백 --> vertical align middle로 제거

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	vertical-align: middle;
}

span은 원래 인라인요소 근데 덴마크쇼핑몰에 한정해서 블록요소로 변경해줌

span {
	display: block;
}

상단 디자인 작업

a태그는 인라인요소라 블록으로 바꿈

자식의 크기만큼 부모도 동일한 크기를 가지게됨, h1은 값이없지만 a태그에 영향받고 header는 h1 + nav에 영향받음

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

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

float을 사용했기 때문에 부모의 높이값에 영향을 줄수없다 = 부모 ul태그의 높이값이 안 잡혀있음 = ul도안잡혀있으니 nav도 안잡혀있다

1446px을 가지고 있는 이유는 nav와 ul태그가 기본적으로 block요소 성격을 가지고있어서 width 100% 값을 기본적으로 가지고있음 (브라우저크기에따라달라지게됨)

문제는 header의 크기가 nav쪽이 인식이안되니까 h1태그만큼만 인식되는게 문제 -> header태그의 높이값이 h1+ nav까지 포함된 수치로 전환됐으면 함

자식이 float 사용시 부모가 overlfow hidden을 가지고 있으면 부모가 자식을 인식할 수 있다.

#header .buttons ul {
	overflow: hidden;
}

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

	width: 33.3333%;
	height: 65px;
}

여백 전체 인식

여백에 마우스 올렸을 때 손가락으로 바껴야함 = 클릭범위를 li크기를 꽉채워야함

a태그는 인라인요소라 블록으로 변경

text align center는 글자 x축 중앙정렬이다. 그리고 인라인요소, 인라인-블록요소에만 적용된다

img태그는 인라인-블록요소를 가지고 있으니 중앙정렬효과를가짐

볼더빼고 배경색으로 변경

top을 사용하기위해 relative를 줌.

y축 중앙정렬 공식 top, transform은 실무에서 매우 자주 사용되니 기억해두기

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

미디어쿼리 적용 상단 h1

1em = 16px , 항상 최상단에 위치 해야되서 fixed + z값 99999

모바일은 클릭이 쉽지않아서 전체여백에 클릭할 수 있게 했지만 pc는 마우스를 사용하고 화면도 커서 오히려 그게 독

일단 높이를 80px로 줄임

h1을 50%로 바꾼 상태에서 클릭 할 수 있는 범위를 줄임

@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 .lolg img {
        margin-top: 30px;
    }

logo 배경화면 yellow를 없애고 h1에 넣음

상단 button 작업

absolute를 사용하게 되면 width값을 인식할 수 없음

공간에 대한 크기를 명확하게 %나 px로 정해줘야함

left top으로 좌우배치.

우리가 좌우배치할 때 float이나 flex 같은 속성을 사용했는데 정렬작업시 이런 창의적인 방법 사용해서 좌우배치 작업도 가능

@media (min-width: 47em) {

	#header .buttons {
        position: absolute;
        width: 50%;

        left: 50%;
        top: 0;
    }
	#header .buttons li {
        height: 80px;
    }
    
}

제품영역 설계도면

<main role="main" class="main-content">
		
        <ul class="product-group">
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product1</h2>
					<img src="https://via.placeholder.com/1000x563">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product2</h2>
					<img src="https://via.placeholder.com/1000x563">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product3</h2>
					<img src="https://via.placeholder.com/1000x563">
				</article>
			</a>
		</li>
		<li>
			<a href="#" class="product-group-link">
				<article>
					<h2 class="link-text">Product4</h2>
					<img src="https://via.placeholder.com/1000x563">
				</article>
			</a>
		</li>
	</ul>

</main>

제품 css 작업

모바일에선 100%라 left로 정렬할필요는없지만 미리 pc버전에서 좌우배치를 고려해서 사용할 수 있음(근데 헷갈릴수 있으니 일단 주석처리)

a태그 성격을 block변경

overflow hidden 사용한 이유 : 하나의 영역을 벗어나는 object들은 모두 감추겠다.

공간에 대한 크기를 이미지와 근사치로 만들어줌

img를 a태그에 딱 맞게끔 작업을 해줄려고함 100%, 100% 적용해주면 원래 1000x563의 고정된 크기를 가진 이미지가 a라는 공간에서 100%로 설정됨

.main-content .product-group-link {
    position: relative;
    display: block;
    /*float: left;*/
    width: 100%;
    height: 56.25%;
    border: solid   10px red;

    overflow: hidden;
}

.main-content .product-group-link img {
    width: 100%;
    height: 100%;
} 

텍스트 조절

먼저 나오는 형제가 3차원이니까 레이어겹침현상 이미지가 뒤쪽에 위치

부모가 relative고 자식이 absolute니까 자식은 부모안에서 left , bottom 위치가 정해짐

예제이미지를 넣어서 이미지 구분이안감 - border넣어서 구분

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

제품 미디어쿼리

공간에 대한 크기도 의미가있음, 바로 우리가 만들어놓은 100%,56.25%의 절반값으로 넣어줄거임 - 원래비율을 유지하기위해서

좌우배치를 시킬건데 float left 적용시킴 (바깥쪽에 주석풀어도되지만 입문단계라 헷갈릴수있으니)

47em이 되었을때 윗부분 볼더가보이지않음. 그 이유는 상단 fixed 뒷부분으로 main이 들어가있는거

그런데 여기서 main의 높이값이 잡히지않음

float을 사용했기 때문. main의 높이값을 잡아주기 위해 overflow hidden사용

@media (min-width: 60em) {
    .main-content .product-group-link {
        float: left;
        width: 50%;
        height: 28.125%;
    }

    .main-content {
        overflow: hidden;
    }
}

또다른 미디어쿼리

header 3차원 main태그는 2차원 먼저 나오는 형제가 3차원이고 다음 형제가 2차원이니까 겹쳐짐

겹쳐진 영역만큼 공백을만들어줄거임, main에다가 padding 넣어줌

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

하단 설계도면

<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

padding-bottom 66px 주는 의미 -> 뒤에 나옴

#footer {
    position: relative;

    padding-bottom: 66px;
}

#footer .left-nav {
    padding-top: 20px;
    text-align: center;
}

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

하단 오른쪽 css

payment로 공간의 크기 지정, one two three class로 색깔 지정

.payment-icon .one 이렇게 뛰어쓰기를 하면 payment icon 안에있는 one이라는 자식을 선택하겠다

.payment-icon.one 연달아 기입시 여러개의 payment-icon중에서 one이라는 클래스를 가지고있는 payment icon을 선택해라는 의미

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

마지막 화살표 작업

아까 66px의 정체를 알수있음 하단에 들어가는 버튼의 위치를 padding bottom으로 미리 지정해준것

만약 패딩 66px을 해주지않으면 레이어겹침

#footer .to-top-button {
    position: absolute;
    display: block;
    width: 66px;
    height: 66px;
    background-color: green;

    bottom: 0;
    left: 50%;
    margin-left: -33px;
}

하단 미디어쿼리

footer의 크기는 66px footer padding down 66px 때문에 잡혀지는것 padding 빼게되면 footer는 0px로 나타나게 됨

이런식으로도 공간을 만들수있다고 보여드린것

실제연습을 할때는 kidsgao처럼 각각의 영역에 대해 공간의 크기를 모두 만들고 나서 배치작업하기

@media (min-width: 60em) {
    #footer .left-nav {
        float: left;

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

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

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

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

실무팁

id 하나의 속성값만 가져가야함 ,여러개 별명을 넣을 수 없음

하나의문서안에서 동일한 id는 있어서는안됨

a hreft에 사용가능한건 주소(naver.com), html문서 그리고 id도가능하다(#three)

누르게되면 id지점 최상단으로 이동하게됨(class는 안됨)

id넣을땐 중복되지않게

말줄임표시 코드

보통 글자는 감싸고 있는 영역 크기를 넘어가면 자동줄바꿈현상이일어남

줄바꿈현상 없앨때 white

말줄임표시 코드 text overflow ellipsis 쓰면 ...으로 나옴

코드 간소화방법

말줄임표를 담당하는 css를 만들어두면 나중에 html태그에서 그 클래스만 적용하게되면 말줄임이 자동으로 적용

예시

m-b-1 {
margin-bottom : 10px;
}

2. 어려운점

3. 해결방법

4. 소감

오늘 반응형 사이트를 골격구조부터 시작해서 만들어 보았는데 적응형이랑 비슷하면서도 다른 느낌이 있었다. 분명히 결과물은 뚜렷이 들어가는데 어떤 코드들을 가지고 반응형과 적응형이 나뉘어지는지 몇번 더 연습해보면 알 수 있을것 같다.