□ 덴마크 쇼핑몰 실습 - html과 css 기준
※ 사이트 – https://helbak.com/
■ 적응형 웹사이트로 작성 (참고 : https://www.w3schools.com/css/css_rwd_viewport.asp)
● 적응형 웹사이트 작성 시, 필요 코드
<meta name="viewport" content="width=device-width, initial-scale=1.0">
★ 작성코드
1. 상단 영역 작업
● CSS에서 *{ margin: 0; padding: 0; }을 설정하면, 모든 html 태그(*)에 margin 과 padding값을 적용(0)
● padding: 0으로 생기는 공간에 대한 크기가 달라지는 것을 방지하기 위해 * { box-sizing: border-box; }를 넣어줌
● 적응형 웹사이트 작성 시, CSS에서 html, body { width: 100% height: 100% }을 디폴트로 넣어주면 좋음
→ body 태그의 전체 영역을 개발자가 확인할 수 있기 때문
● 작업 전 기본적으로 해두면 좋은 설정
body {
overflow-x: hidden;
font-family: sans-serif;
color: #585858;
}overflow-x: hidden은 x축의 영역를 넘어가는 오브젝트가 있을 경우, 가로 스크롤이 생기지 않도록 설정
li { list-style: none; }
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}-
font-weight는 폰트의 굵기 설정, 100단위로 설정(100→200→300... →최대 900) 숫자값이 높을수록 폰트 굵기도 굵어짐 -
img { vertical-align: middle; }은 이미지 하단의 미세한 공백 삭제
● helbak 사이트는 모바일 버전을 먼저 작업하고, 미디어쿼리로 PC버전을 나타내었음
→ 실습도 모바일버전을 만들고 난 뒤, 미디어쿼리로 PC버전을 표현함
● 현재 <nav>, <ul> 태그가 높이값이 0, <li> 태그의 높이값(65px)을 인식하지 못하고 있는 상태(<header> 태그가 <nav>의 높이값을 포함하지 못하고 있음, <header> 높이값: 65px)
→ ul { overflow: hidden }을 설정함으로써 <nav>, <ul>태그가 <li>태그의 높이값을 인식하게 됨(<header> 태그가 <nav>의 높이값를 포함한 높이값이 됨, <header> 높이값: 130px)
★ y축 가운데정렬 실무Tip – 자주 사용하는 방법
{
position: relative;
top: 50%;
transform: translateY(-50%);
}- 오브젝트를 3차원으로 설정(여기서는
relative) top값으로 50%,transform: translateY( )값으로 –50%를 설정
● 모바일버전 결과
■ PC버전 작업
● 길이 단위: 1em = 16px
● 모바일버전에서는 손가락으로 좁은 화면을 터치하기에 logo 태그의 터치 범위를 넓게 잡음
PC버전에서는 마우스를 사용하기에 불필요한 클릭을 방지하기 위해 logo 태그의 범위를 한정함
● position: absolute는 width값을 정확하게 인식하지 못하기에, width값이 명확하게 규정해야 함
● 메뉴 버튼을 <h1> 태그 옆으로 옮기기 위해 helbak 사이트는 다양한 방법 중 하나를 사용함
→ 메뉴 버튼을 left: 50%, top: 0으로 설정하여 옮김
#header .buttons {
position: absolute;
width: 50%;
left: 50%;
top: 0;
}● PC버전 결과
2. 메인 영역 작업
● <article> 태그 - 영역을 대표하는 타이틀이 필요함(여기서는 제품명)
● 모바일버전 결과
■ PC버전 작업
● 현재 main-content의 높이값이 잡히지 않음 → main-content { overflow: hidden; } 설정
● <header> 태그가 3차원이고, <main> 태그가 2차원이라서 레이아웃 겹침 현상이 발생함
→ 겹쳐진 영역만큼 <main> 태그와 ul 태그 사이에 pc버전 <header> 영역 높이값만큼의 공백을 만듬
@media (min-width: 60em) {
.main-content {
overflow: hidden;
}
}● PC버전 결과
3. 하단 영역 작업
● class="payment-icon one"와 같이 클래스를 2가지(payment-icon, one)로 설정하여 payment-icon은 크기에 대한 설정, one은 결제수단에 대한 설정을 하도록 함
※ 클래스에 여러 개를 사용해서 각각의 역할을 구분하면, 더 명확하게 html 설계도면 작업 진행이 가능함
예) #footer .right-methods .payment-icon.one { }
→ payment-icon들 중에서 one이라는 클래스를 가지고 있는 영역을 선택
● #footer { padding-bottom: 66px; }의 역할
→ #footer .to-top.button { }의 크기를 지정, 만약 없다면 위의 레이어와 겹치게 됨
● 모바일버전 결과
● PC버전 결과
4. 기타 HTML, CSS 실무tip
★ 작성코드
● id
① id는 하나의 속성값만 들어갈 수 있고, 여러 개의 별명을 넣을 수 없음
② 하나의 문서 안에서 동일한 id의 속성값이 있으면 안됨
이유 : 둘 이상의 동일한 id 속성값이 있으면 가장 먼저 나오는 id 속성값만 좌표로 인식되고, 뒤의 id 속성값은 좌표의 역할을 수행하지 못함
③ 아직 속성값을 정하지 못했을 때는 #을 사용함
● a href=“ ” 속성값에는 주소, 외부 html 문서, 그리고 id 속성값을 넣을 수 있음(id 속성값의 최상단으로 이동)
<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>※ class로는 결합이 불가능함 → 에러가 발생함
●
① { white-space: nowrap; } - 줄바꿈을 하지 않고 한 줄로 출력되게 함
② { overflow: hidden; } - 지정된 영역을 벗어나는 글자를 표시하지 않음
③ { text-overflow: ellipsis; } - 영역을 벗어나는 글자를 말줄임 표시를 적용
※ 여러 태그에 위의 3가지 속성을 적용시키는 간단한 방법 – 코드 분량 간소화
① 새로운 클래스를 만들어 3가지 속성을 적용함
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}② 원하는 태그에 class를 앞서 만든 클래스 명칭으로 설정함
<p class="text-box ellipsis">
<h2 class="ellipsis">● 자주 사용하는 속성값을 CSS에서 미리 class로 만들어서 html문서에 적용하면 중복되는 코드를 줄일 수 있음
예시)
▷ CSS
.m-b-100 {
margin-bottom: 100px;
}▷ html
<h1 class="ellipsis m-b-100">Hello world! Hello world! Hello world! Hello world!</h1>□ 어려웠던 점
이전의 KidsGao 사이트 카피캣 실습을 통해 많이 배웠다고 생각했지만, 아직까지도 태그나 새로운 속성과 속성값이 계속 나와서 이를 외우기가 어려웠습니다.
□ 해결방법
이해가 되지 않는 부분이나 새로운 부분은 강의를 반복 재생하고 인터넷의 다른 개발자분들이 올려주신 자료들을 보고 이해하고자 하였습니다.
□ 학습 소감
이번에는 Helbak 사이트를 카피캣 해보고 실무와 관련된 정보를 알려주셨는데, 오늘 배운 내용들을 앞서 해본 코드들에도 적용해봐야겠다고 생각하게 되었습니다.
