대구AI스쿨 개발일지( 13일차 )

박호연·2021년 7월 14일

대구 ai스쿨

목록 보기

13/47

키즈가오 실습을 계속 진행하고있다.

1) 학습한 내용

우선 진도나간 내용안에서 간략하게 정리할부분을 요약하고 넘어가려한다.

z-index는 코드의 우선순위를 정해주는 기능을 하는 속성이다.

그러나 오늘 실습에서 같은 z-index값을 줬을 때 가장 최근에 입력한 값이 우선순위가 높다는것을 알게되었다. (오류가 날거라 생각했다.)

우리가 적는 html , css는 보통 사이트의 구성요소대로 순서대로 보기좋게 정리해서
입력한다. 그러나 오늘 수업중에 강사님께서 순서를 섞어서 사용한 적이 있었고, 코드의 순서가 엉키게되어서 원하는 값을 만들어 내지못했다.

(forest bubble)을 수정하지 않고 (tree) 를 먼저 바꾸니 코드가 엉키게 되었다.

코드의 순서를 잘지켜서 작성하는것도 중요하다.

overflow: hidden;
를 사용하면 자식이 float값을 사용해도

자식의 높이값을 가지고 올수있다.(말그대로 상속할 수 없는 상황에도 상속시킬수있다.)

forest 만들기

이미지를 삽입하고 사이트의 뼈대를 구성하는 html 코드를 입력하는 것은 거의 응용과 반복의 연속이다.

새롭게 알게된 내용보다 첫번째 강의와 같은 토대로 계속만들어 나갔다.

machine 만들기

#forest2 .machineWrap2 {
    position: relative;

    width: 400px;
    height: 400px;

    /* background-color: yellow; */

    left: 50%;
    margin-left: -180px;
    top:180px;

거의 대부분 이런모양의 구성으로 만드는데 확실히 강사님께서 처음으로 맡았던 사이트이다 보니

내가 알던 복잡한 사이트보다 훨씬 보기 쉽고 따라하기 쉬웠다.

키즈가오를 하면서 가장 반복되면서 중요하다고 생각된 내용은 바로

top, bottom, left, right 는 position: relative 의 부모를 가진 absolute가 사용할 수 있다는 점이며, margin은 그 제약에서 비교적 자유로운 편이었다.

물론 한가지만 사용하면 다채롭고 짜임새있는 사이트를 만들 수 없을것이다.

science 만들기

이 부분에서 얻은점은 html 코드의 구성이었다. 처음에 이 파트를 봤을때 html 구성에 대해
조금 난감했다. 하지만 처음에 3등분 그리고 그 안에서도 분할해 div코드를 만들면서
처음에 강사님께서 초기공사가 왜 중요하다고 하셨는지 이해가 됬다.

<div id="science">
    <div class="scienceWrap">
  
     <div class="scienceLeftWrap">
      <div class="gly"></div>
      <img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">

      <p>
          자초 어성초 감초를 넣어서<br>
          피부진정 및 항염 효과가 있답니다.
      </p>
     </div>

     <div class="scienceCenterWrap">

        <div class="purpleSteam"></div>
        <div class="funnelBack"></div>
        <div class="funnelFront"></div>

     </div>

     <div class="scienceRightWrap">

        <div class="water"></div>
        <img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
        <p>
            빵의 표면을 촉촉하게 해주는<br>
            글리세린과 오메가-9 지방산이<br>
            풍부한 올리브유를 넣어서<br>
            보습 효과도 뛰어나답니다.
        </p>

     </div>

    </div>
    
</div>