학습 내용
[카피캣] : https://www.helbak.com/
1️⃣ header
html
<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="menubutton"> <img src="https://via.placeholder.com/22x20"> </a> </li> <li> <a href="#" class="menubutton"> <img src="https://via.placeholder.com/22x20"> </a> </li> <li> <a href="#" class="menubutton"> <img src="https://via.placeholder.com/22x20"> </a> </li> </ul> </nav> </header>
css
css에 디폴트 값들 설정 해두기
* { margin :0; padding :0; }➜html, body, h1, h2, h3, p 태그들에
margin, padding 0 값을 각자 지정하기 번거롭기 때문에
*를 사용하여 모든 html 태그에 마진과 패딩 값을 각각 0을 적용하는 것html, body{ width: 100%; height: 100%; }➜ body태그의 전체영역을 개발자가 확인할 수 있기 때문에 이 코드도 디폴트로 넣어주면 좋다.
font-weight: 400;
➜ 폰트 굵기를 설정하는 것, 100단위로 증가함
숫자가 커질수록 폰트가 굵어짐
단위 설정 : 1em = 16px
📱 모바일 모드
#header h1{ background-color: yellow; } #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; } #header .buttons li{ position: relative; float: left; width: 33.33%; height: 65px; } #header .buttons .menubutton{ display: block; width: 100%; height: 100%; text-align: center; } #header .buttons li:nth-child(1) .menubutton{ background-color: blue; } #header .buttons li:nth-child(2) .menubutton{ background-color: pink; } #header .buttons li:nth-child(3) .menubutton{ background-color: green; } #header .buttons li .menubutton img{ position: relative; height: 20px; top: 50%; transform: translateY(-50%); }
💛 <li> 태그 css에서 float을 사용 함으로써 3차원적인 특 징을 일부 갖게 됐다
그러면서 자식의 width와 height값은 부모에게 영향을 줄수 없게 됨
즉 부모 태그인 ul과 nav는 공간의 높이 값이 없게 됨
이렇게 되면 header 높이 값은 h1의 높이값만 인식하게 되는 문제가 발생함
우리는 header태그의 높이가 3개 버튼의 높이값도 포함된 수치로 전환되기를 바람.
그럴때는 buttons ul 태그에 overflow: hidden; 작성하게 되면 부모가 자식의 크기를 인식할 수 있게 됨
그러면 nav는 li 높이 값을 알게 되고 header도 li 높이 값을 같이 인지할 수 있게 됨
💛<img> 인라인-블락성격을 갖고 있음 | <a> inline 성격을 갖고 있음
text-align은 인라인, 인라인-블락 요소 성격에만 적용이가능
💛 y축 중앙 정렬 공식
top: 50%;을 작성해줌
탑값을 사용하려면 postition relative 적용되어있어야 함
그리고 transform: translateY(-50%) 작성해주면 됨
정리하면
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%);💻 pc 모드
css @media
@media (min-width: 47em) { #header{ position: fixed; width: 100%; height: 80px; top: 0; left: 0; z-index: 9999; } #header h1{ width: 50%; } #header h1 .logo{ width: 200px; height: 80px; } #header .logo im{ margin-top: 30px; } #header .buttons{ position: absolute; width: 50%; left: 50%; top: 0; } #header .buttons li{ height: 80px; } }
💛 absolute는 width값을 명확하게 작성하지 못하니까 %를 활용해서 공간 크기를 설정해 줘야 함.
2️⃣ main
**html
💛 <main> 태그를 익스플로러는 인식을 못하니까 role=“main” 속성값 무조건 같이 입력해주기
💛 <article - h2 태그 세트
💛클래스별로 역할을 제대로 구분해주는게 좋다
css
📱 모바일 모드
.main-content .product-group-list{
position: relative;
display: block ;
/*float: left;*/
width: 100%;
height: 56.25%;
border: solid 10px red;
overflow: hidden;
}
.main-content .product-group-list img{
width: 100%;
height: 100%;
}
.main-content .product-group .link-text{
position: absolute;
left: 25px;
bottom: 25px;
color: black;
font-size: 25px;
}css @media
💻 pc 모드
@media (min-width: 47em) {
.main-content{
padding-top: 80px;
}
}
@media (min-width: 60em) {
.main-content{
overflow: hidden;
}
.main-content .product-group-list{
float: left;
width: 50%;
height: 28.125%;
}
}📝 마무리
오늘은 그 전 수업에서도 선생님께서 많이 참고하시면서 설명해주셨던 벨기에 쇼핑몰을 카피캣 했다.
키즈가오와 달리 벨기에 쇼핑몰은 미디어쿼리를 사용하면서 pc버전을 작업하고
미디어쿼리 바깥에서 모바일버전을 만드는 색다른 방법이었다.
또 키즈가오는 적응형 웹사이트 였는데 벨기에 쇼핑몰은 반응형 웹사이트로 실습했다.
실습을 하면서 float 속성을 사용하여 위치를 결정하면 3차원 속성을 갖게 된다는 것을 알았다.
또 선생님께서 실무팁을 많이 알려주셨다.
첫 번째로는 id는 하나의 이름만 들어가야하고 하나의 html안에서 동일한 id가 존재해서는 안된다.
왜냐하면 혼란을 야기할 수 있기 때문에 중복된 아이디 속성값을 사용하면 안된다.
왜 혼란을 야기하냐면,
a href 값은 총 3가지를 입력할 수 있다.
첫번째 url 주소
두번째 다른 html 파일명
마지막으로 아이디 속성값이 입력이 가능하다.
그런데 동일 html에 동일한 id값이 존재한다면 a 태그는 혼란을 겪고 다른 개발자들도 혼란스러울수 있기 때문에 무조건 동일한 이름의 id값이 존재해서는 안된다.
그 다음으로 말줄임 표시에 대해서 배웠다.
말줄임표시 공식
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;좀 더 간단하게 사용하려면 말줄임표를 담당하는 class를 미리 지정한다.
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}그리고 해당 클래스 이름을 html태그에다가 작성해주면 된다.
같은 맥락으로 좌표 작업도 class 값으로 미리 지정하고 사용할 수 있다
.m-b-10{
margin-bottom : 10px
}
.p-t-50{
padding-top:50;
}각각의 방향을 중간값 숫자는 수치로 작성하는게 보편적
-> 배치작업을 좀 더 수월하게 할 수 있다.
이렇게 오늘도 많은 내용들을 배울 수 있었다. 점점 할 수록 기본적으로 설정해야 되는 코드들이 암기되고 있고 코드 작성도 손에 익어가고 있다.
