1.학습한 내용
오늘은 반응형 웹사이트 (Responsive Web)인 helbak이라고 하는 여태껏 많이 실습에 간접적으로 참고하였던 덴마크 쇼핑몰 site의 layout을 직접 짜는 실습을 하였다.
- HTML 작성
- style.css (스타일 및 미디어 쿼리)
키즈가오 사이트와 다른점은 animation을 넣는게 아니라 파일자체가 두개밖에 없고 style.css에 미디어쿼리 코드를 같이 썼다는 점이다.
두번째로는 실무에서 많이 쓰이는 부분에 대해 학습을 하였다.
- HTML 작성
- 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> - url
- 전혀다른 html 문서
- 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 같은 경우 직접 해보면서 여러가지 경우의 수를 다루어야 내 것으로 체화될 것 이라는 생각이 들었다.
