맛집지도 만들기 - client(3)

Padding과 Margin의 차이 : padding은 border의 안쪽, margin은 border의 바깥쪽을 말한다.

 

<nav> 는 navigation var을 의미

<section>: <div> 와 동일한 기능을 하지만 의미적인 부분에서 추가된 기능(논리적인 구분은 section으로 처리하는게 좋음)

 

box-sizing: border-box : 설정한 width와 height 값이 padding과 border까지 포함

box-sizing: content-box: 설정한 width와 height 값이 content 크기

 

padding: 1rem 0 : 상하 1rem, 좌우 0

 

flexbox는 요소를 수평/수직 으로 쉽제 정렬하고 배치할 수 있게 해주는 방식

justify-content: 주축방향 정렬 방식

align-items: 교차축방향 정렬 방식 (vs algin-content: 여러 줄 전체)

  .nav-contact {

    font-family: inherit;

  }   

<button>은 브라우저 기본 스타일에 따라 자체 스타일이 적용됨. 따라서 부모 요소에서 상속받는 것이 아니라 브라우저 스타일 시트에 정의된 기본값을 사용함. 만약 CSS 속성을 상속받게 하고 싶다면, inherit 키워드를 사용할 수 있음.

 

  .category-item:hover {

    color: #e69a06;

    cursor: pointer;

  }

hover은 마우스를 해당 button에 올렸을 때를 의미

 

  @media all and (min-width: 1024px) {

    .inner {

      max-width: 1024px;

      margin: 0 auto;

    }

  }

 

뷰포트 너비가 1024px 이상일 때 내부 css 적용. 좌우 여백을 자동으로 설정하여 요소를 중앙에 배치

 

  /* 카카오맵 CSS */

  body {

    height: 100vh;      

  }

 

  nav {

    height: 59px;

  }

 

  main {

    padding-top: 1.5rem;

    height: calc(100% - 59px);

    display: flex;

    flex-direction: column;

  }

 

  #map {

    flex-grow: 1;

    width: 100%;

    height: 100%;

  }

1vh는 현재 브라우저 창 높이의 1%를 나타냄. 따라서 100vh는 브라우저 창의 전체 높이

flex-grow: 부모 요소에서 남는 공간을 자식요소들에 나누어주는 방식 (main에서 section 부분 제외한 나머지 공간을 map에 할당)