▶ G마켓
1) 라이브러리 등록
2) 폰트 가져오기
3) 이미지 가져오기
4) 레이아웃 구성 시작
- 여백 없애기 위해 nomarlize
- font-family 태그에는 후에 다양한 값을 커스텀 할 일이 많다
- 따라서 헷갈리지 않도록 nomarlize는 최상단에 따로 빼서 작성한다.
- 항상 화면에 구현이 잘 되는지 확인하기 위해 텍스트를 써준다.
- 그룹 선택자
- 가로정렬은 jutify-content를 사용할 수 없는 상황
- user-menu를 오른쪽 끝에 붙여주기 위해 flex-grow: 1; 코드를 사용
- logo-box의 너비값은 고정되어 있다.
- menu-box의 경우 너비값을 고정하지 않는다.
ㄴ 텍스트 요소 사이에 여백(padding)이 존재
ㄴ 텍스트가 추가될 때 마다 박스의 너비가 유연하게 늘어나도록 하기 위해
- 구글 심볼에서 아이콘을 불러온 후 커스텀할 때 개발자 모드로 확인이 가능하다.
- 그러나 아이콘을 커스텀 할 때 마다 개발자 모드로 확인하면 효율성이 떨어지므로
- 복사해서 css 최상단에 주석처리하고 비교하며 커스텀한다.
- 메뉴 아이콘은 한 번만 사용할 예정이기 때문에 id를 사용한다.
- 텍스트의 line-height 때문에 중앙 정렬이 맞지 않음
- noto sans kr 폰트를 앞으로 계속 사용할 건데 텍스트 마다 css 추가하면 복잡
- 라이브러리에 마진값을 등록하여 효율적으로 사용
- 마진값은 중앙정렬 맞을때까지 조정해보고 값을 조정했다면 클래스 이름도 수정
- Padding 값 적용하면 너비가 늘어남
- 이 때 box-sizing: border-box; 를 사용하면 태그 전체 너비에 padding값을 포함
- 따라서 내가 처음 설정한 너비로 구현할 수 있다.