2021.06.04. 開発ログ

今日の勉強内容

9.デンマークショッピングセンター実習

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

- href에 들어갈 수 있는 것 세가지
	: url주소, 파일명, id속성값
- 중복된 id가 있을 경우 맨 처음 나오는 곳으로 링크 작동하는데,
혼란을 야기할 수 있으므로 아이디는 중복되지 않게 만들어야한다

- 디폴트값 #넣는것은 id임을 뜻한다.
- 클래스로는 a태그에 결합할 수 없음
- 역할 담당하는 코드 class로 넣을 수 있다. ex) 말줄임 담당 클래스 ellipsis

難しいところ&解決していないもの

이번 실습에서는 pc버전을 만들고 @media를 통해 모바일을 만들던 기존 방식과 다르게,
모바일 버전으로 먼저 틀을 잡고 pc버전을 구상했는데, 겨우 몇 번 실습했다고 그새
익숙한(ㅎ) 방식이랑 달라서 조금 헷갈렸다. 더 많은 실습을 해보고싶당ㅎㅎ

解決方法

font-family: sanserif를 통해 드디어 세리프에서 벗어날 수 있었다. 야호!

感想

실제 이미지를 넣지 않고 background-color로만 진행한 점이 살짝 아쉬웠다. 실제 사진이 들어가고 뭔가 실제 사이트처럼 만들어질때 스스로 더 재밌게 느끼나보다. 비교적 단순한 레이아웃이라 생각했는데 직접 만들어보려니 어려웠다. 보이는게 다가 아니었다...