1.학습한 내용

오늘은 반응형 웹사이트 (Responsive Web)인 helbak이라고 하는 여태껏 많이 실습에 간접적으로 참고하였던 덴마크 쇼핑몰 site의 layout을 직접 짜는 실습을 하였다.

1. HTML 작성
2. style.css (스타일 및 미디어 쿼리)

키즈가오 사이트와 다른점은 animation을 넣는게 아니라 파일자체가 두개밖에 없고 style.css에 미디어쿼리 코드를 같이 썼다는 점이다.

두번째로는 실무에서 많이 쓰이는 부분에 대해 학습을 하였다.

1. HTML 작성
2. style.css

결과물 :

(1) halbak (원 size - up)

(원 size - down)

(축소 size - up)

(축소 size - down)

(2) 실무 tip

이 실무 tip 부분은 뒷 부분에 더 구체적으로 결과를 실을 예정이다.

<학습한 내용>

helbak 에서 레이아웃 카피캣을 한 부분은 상단 왼쪽에 HELBAK, 그리고 상단 오른쪽에 3가지 button,

홈페이지 body 부분; 물건이 소개된 부분을 tag로 감싸주고

하단에 termas and conditions cookies 그리고 오른쪽에 지불 방식 accepted payment methods의 layout이다.

css :

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

/* 아래 코드는 default로 넣어주는게 좋다. */
html, body {
	width: 100%;
	height: 100%;
}

별표 표시는 각각 margin과 padding을 0으로 적용하겠다는 의미이다.
padding으로 인해 공간의 크기가 달라지는 것을 막기 위해 box-sizing과 border-box를 넣어준다.

span {
	display: block;
}

span tag는 원래 inline의 요소를 가지고 있다.
그렇지만 helbak에서는 위의 code와 같이 block 요소를 준다.

덴마크 쇼핑몰은 미디어쿼리 안쪽에다가 pc버전을 넣었다.
(키즈가오와는 다르게 반대로 진행)

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

<overflow: hidden;>을 넣으면 자식의 높이값을 부모가 인식 할 수 있다.

<#header .buttons li:nth-child(1) .menu-button {
background-color: blue;>
}
→ buttons안에 있는 li tag들 중에서 1번째 나온느 자식 영역 안에 있는 button을 선택하겠다는 의미

• 이미지 y축 중앙정렬 작업

  		top: 50%;	 
  		transform: translateY(-50%);

  실무적인 code로 y축 정렬때 외워서 사용하면 좋다. 아래 그림과 같이 딱 한가운데로 정렬이 된다.
  

  position: absolute;
  이 postion값을 지정하면 width값을 정확하게 인식할수 없다.

  중앙에 제품이 나오는 6가지 칸 영역에서
  main tag는 explorer에서 인식이 안되어서

  이렇게 기입해주어야 한다.

• 왼쪽 하단 한줄로 정렬하기
  

  < #footer ul, #footer li, #footer h3 {
  		display: inline-block;
  		vertical-align: middle;
  	}
  
  	#footer .left-nav a {
  		font-size: 14px;
  		padding: 0 5px;
  		/*line-height: 20px;*/
  	}>

실무 tip

(1) href 속성값으로 3가지가 가능하다.

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

1. url
2. 전혀다른 html 문서
3. id 속성값

(2) class로는 a tag에 결합을 할 수 없다.

(3) 줄바꿈 현상을 없애는 code
<white-space: nowrap;>

  영역을 벗어나는 것 감추기
     <overflow: hidden;>
 

글자 잘린것을 줄인말 (...)으로 표시
<text-overflow: ellipsis;>

css에서 class 지정을 하면 code를 간소화 시킬 수 있다.
< .ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;} >

html에는 code를 추가 <h2 class="ellipsis">   
   

(4) 자동 적용
css <.m-b-10 {
margin-bottom: 10px;
}>
html

css <.p-t-50 {

		}>

	<.p-l-10 {

	}>
	<.p-r-10 {

			}>
      padding-top, left , right값도 적용할 수 있다.
  
  

2. 실습

깃허브 소스코드:
helbak (덴마크 쇼핑몰 홈페이지 레이아웃)HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/21

helbak css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/22

기타 실무적인 tip (HTML)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/23

기타 실무적인 tip (css)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/24

3. 어려웠던 내용 & 해결방법

code가 길어지면서 오타뿐만 아니라 {}영역 때문에 홈페이지의 layout이 틀어졌었는데 찾는데 시간이 많이 소요되었다. 다시 강의를 들으면서 찾을 수 있었다.

4. 소감

키즈가오 실습 보다 쉽다고 생각했는데, 3차원 position 상속때문에 그런지 어려웠고, 실무적으로 쓰이는 tip 같은 경우 직접 해보면서 여러가지 경우의 수를 다루어야 내 것으로 체화될 것 이라는 생각이 들었다.