◼︎ 오늘 학습한 내용
9. 덴마크 쇼핑몰 실습
1~3. 상단/메인/하단 영역 작업
// Y축 중앙정렬 공식!
#header .buttons li .menu-button img {
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%);
}
// 공백있을때: .payment-icon의 자식으로 있는 노드를 선택하라는 의미
#footer .right-methods .payment-icon .one {
background-color: black;
}
// 공백없을때: 여러개의 .payment-icon 중에서 one이라는 클래스를 가지고있는 것을 선택하라는 의미
#footer .right-methods .payment-icon.two {
background-color: red;
}
4. 기타 HTML, CSS 실무팁
- href에 들어갈 수 있는 것 세가지
: url주소, 파일명, id속성값
- 중복된 id가 있을 경우 맨 처음 나오는 곳으로 링크 작동하는데,
혼란을 야기할 수 있으므로 아이디는 중복되지 않게 만들어야한다
- 디폴트값 #넣는것은 id임을 뜻한다.
- 클래스로는 a태그에 결합할 수 없음
- 역할 담당하는 코드 class로 넣을 수 있다. ex) 말줄임 담당 클래스 ellipsis◼︎ 어려웠던 점 & 해결못한 것들
이번 실습에서는 pc버전을 만들고 @media를 통해 모바일을 만들던 기존 방식과 다르게,
모바일 버전으로 먼저 틀을 잡고 pc버전을 구상했는데, 겨우 몇 번 실습했다고 그새
익숙한(ㅎ) 방식이랑 달라서 조금 헷갈렸다. 더 많은 실습을 해보고싶당ㅎㅎ◼︎ 해결방법
font-family: sanserif를 통해 드디어 세리프에서 벗어날 수 있었다. 야호!◼︎ 소감
실제 이미지를 넣지 않고 background-color로만 진행한 점이 살짝 아쉬웠다. 실제 사진이 들어가고 뭔가 실제 사이트처럼 만들어질때 스스로 더 재밌게 느끼나보다. 비교적 단순한 레이아웃이라 생각했는데 직접 만들어보려니 어려웠다. 보이는게 다가 아니었다...