devlogs-210715

Wonseok Choi·2021년 7월 15일

CSS html 개발일지 대구AI스쿨

대구AI스쿨

목록 보기

13/49

간단한 요약

오늘은 Kidsgao 웹사이트를 마무리하는 수업이다.

배운 내용

position 팁

각 서랍장을 대표하는 parents의 경우, 웬만하면 position: relative;로 기준점을 마련하는 것이 접근하기 가장 편하고 안전한 방법

float 팁

특정 조건에서(ex: 다른 display 사이즈) float적용을 원래대로 돌리고 싶으면, float: initial;로 조정 가능

어려웠던 내용

한 section(kitchen)에 A, B, C영역을 배치했어야 하는데, 강의에서는 float를 이용하여 A (float: left) C (float: right) 그리고 디자인 상 중간에 위치해야 하는 B는 float없이 위치시켰다. 또한 html상에서 layout 작업을 A, C, B 순(siblings 관계)으로 제작하였다.

왠지 내가 스스로 작업한다면 html에서 A, B, C 순서대로 진행 후 css작업을 할 것 같아 float을 그대로 사용한 나만의 방법을 찾아 보려고 했지만, 결과적으로 강의에서 한 방식이 화면 크기 변화에 더욱 깔끔하게 적응하는 모습을 보여주었다. 아래는 해당 부분의 코드 ⬇️

HTML
<div class="kitchen-left"></div>
<div class="kitchen-right"></div>
<div class="kitchen-center">
	<div class="kitchen-steam"></div>
	<div class="kitchen-smoke"></div>
</div>

CSS
#kitchen .kitchen-left {
  float: left;
  width: 253px;
  height: 384px;
  background-image: url(../img/kitchen/pan.png);
}
#kitchen .kitchen-right {
  float: right;
  width: 243px;
  height: 132px;
  background-image: url(../img/kitchen/pot.png);
}
#kitchen .kitchen-center {
  position: relative;
  clear: both;
  left: 50%;
  margin-left: -275px;
  top: -100;
  width: 483px;
  height: 457px;
}