210706 개발일지

1) 학습한 내용
레이아웃 실습
github

li의 성격을 display: inline-block;으로 바꿔주면 x축 정렬이면서 공간 유지.
기본적으로 inline은 사이사이 공백을 가지고 있음. 이 공백을 없애려면 float: left; 사용. 왼쪽에서부터 정렬 됨.

자식이 3차원이면 부모 높이값에 영향 줄수 없음 overflow: hidden; 넣으면 영향 미침.

  .menu ul(부모) {
      overflow: hidden;
      background-color: pink;
  }
  

y축 중앙 정렬 2가지 방법

1. height값이 있을 때 그 값과 같은 값을 line-height에 주는것

   .menu li {
       /*display: inline-block;*/
       float: left;
   
       width: 100px;
       height: 50px;
       background-color: yellow;
       border: solid 1px red;
   
       text-align: center;
       line-height: 50px;

   }

2.높이 값이 없을 때 글자 기준으로 padding값을 줘서 공백 생성 해주면 됨.

.menu li {
    float: left;

    width: 100px;

    padding-top: 15px;
    padding-bottom: 15px;
}

---

클릭 범위 넓힌다 = a태그의 범위 넓힌다.(글씨 위 뿐만아니라 배경에 가져다 대도 손가락 모양 나오게)

.menu li a {
    display: block;
}

마우스 올리면 색깔변하는 방법(아래예시)

.menu li a:hover {
    color: blue;
}

여러 박스가 있을 때 border만 쓰면 네부분(상하좌우) 전부 선 생기고 맞닿은 부분 선2개라 굵어지지만, border-top쓰면 위쪽만 적용됨

  .menu li:last-child {
      border-right: solid 1px red;
  }
  젤 왼쪽 애한테만 값주는것

레이아웃 참조 사이트 : https://ko.learnlayout.com/display.html

2) 학습내용 중 어려웠던 점
배웠던 것이지만 아직 익숙치 않다.

3) 해결방법
복습을 하여 익힌다.

4) 학습소감
레이아웃의 형태가 다양해 지는것이 흥미롭다.