210713 개발일지

1) 학습한 내용
Kidsgao 실습(javascript를 제외한 html/css)
github

  body {
      overflow-x: hidden;
  }

브라우저 x축 영역에서 벗어나는 것들은 hidden 처리 되는 것, 가로 스크롤이 생성되지 않음

  button {
      border: none; (테두리 가지고있는 것 없애줌)
      background-color: transparent; (미세한 회색배경 투명으로 없애줌)
  }
  flot-left/right 사용시 css속성은 꼭 clear값 와야함 .
  clearfix {
      clear: both;
  } 디폴트값



이미지의 높이값으로 공간의 크기를 잡아주고, width는 항상 100%



#intro .introWrap .logo {
    position: absolute;

width: 760px;
height: 516px;
background-image: url(../img/intro/logo.png);

z-index: 100; (일종의 기준점. 100작으면 동물은 뒤에 배치, 크다면 위로 올라감)
}   안적혀있으면 0인상태


#intro .introWrap {
    position: relative;

width: 760px;
height: 516px;
background-color: yellow;

left: 50%; 2,3차원 가진 relative가 가지니까 사용 
margin-left: -380px;
}


#intro .introWrap .lion {
    position: absolute;

width: 161px;
height: 161px;
background-image: url(../img/intro/lion.png);

margin: 80px 0 0 30px; or (top: 80px left: 30px 사용하면 부모기준점으로 좌표형성)
}

float 사용시 주의점 : 현재 브라우저의 크기보다 float사용한 합이 더 클 경우 레이어가 틀어짐, 브라우저 크기는 유동적.

실무Tip!

• 부모 position: relative; - 자식 position: absolute; 이면 좀더 편하게 레이어 작업 가능
• img를 사용할 때엔 크기의 경우 짝수/5단위 로 끝나는 크기

#intro .cloudWrap .dragonfly {
    position: absolute;

width: 366px;
height: 228px;
background-image: url(../img/intro/dragonfly.png);

top: 800px;
} dragonfly는 핑크색 박스 기준으로 800px 내려오게 된 것

이미지 width 값보다 브라우저 값이 더크므로 반복 효과 나타남.(잠자리 여러개 나옴)

line-height: 27px; 글자 위아래 간격 지정 할 때 속성

2) 학습내용 중 어려웠던 점
position의 및 z-index의 활용

3) 해결방법
자료를 이용한 개념이해
https://aboooks.tistory.com/83 참조

4) 학습소감
전체적 틀을 한번 만들어보니 흐름을 알겠으나, 많은 양을 한번에 따라가며 만들다보니 아직 내 것이 된 것 같지 않다. 하지만 자주쓰는 속성을 익히고 만들어가는 과정을 따라하니 활용법을 조금 알게 된것 같다.