seongsangcho/42frontend

Front (HTML, CSS, JS) Study Repo

Front 학습 레포

apple clone only html, css

모던 자바스크립트 튜토리얼 예제 및 과제 모던 JS 튜토리얼 JS Docs

42frontend's Issues

08.28 피드백 (Apple clone)

• padding-top을 주지 않고 a태그의 텍스트를 중심으로
  옮기고 싶어요

.top-navBar에 align-items 속성을 center로 주시면 돼요

.top-navBar가 flex container로 지정되어 있는데
flex container에서는 justify-content 속성으로 주축 방향 정렬,
align-items 속성으로 교차축 방향 정렬을 할 수 있어요
flex의 기본 주축은 수평, 교차축은 수직이기 때문에
수직으로(세로로) 가운데 정렬 등등을 하고 싶으시면
align-items 속성을 활용하시면 됩니다!

글로 설명하기 조금 어려움이 있는데
https://heropy.blog/2018/11/24/css-flexible-box/ 에서
주축과 교차축 부분, justify-content와 align-content부분을 참고하시면 이해가 되실거에요

• 크기를 줄일 때 nav-bar의 크기가 일정하도록 하고 싶은데 자꾸 커져요

nav-bar 높이를 일정하게 유지하고 싶으신거죠?

제일 간단한 방법은
.top-navbar에 height: 48px; 와 같이 고정된 값을 주면 해결이 됩니다

height 속성의 경우 따로 설정을 안해주면 기본값으로 auto가 되는데 auto일 때는 자식 요소의 높이만큼을 가지게 돼요

그래서 화면 크기가 줄었을 때는 visibility: hidden; 으로 자식 요소인 a태그들을 숨겨서 해결하려고 하셨던 것 같아요
그런데 hidden으로 설정하면 화면에서 안보이긴 하지만 a태그가 원래 차지하던 공간은 그대로 차지합니다
이런 경우 visibility: hidden; 대신
display: none;을 사용하시면 화면에서 사라지면서 공간 차지도 하지 않게 됩니다

==================================
주석으로 이슈를 달아주신 부분에 대해 답변드렸고 여기부터는
제가 생각하는 개선점?들입니다

navigation bar의 경우 nav 태그 하위에 바로 a태그를 넣기보다는
nav > ul > li > a
이런 구조로 작성하시는 게 좀 더 체계적으로 보일 수 있고
실제 사이트와 비슷하게 스타일을 적용하기에도 더 유리할 것 같아요

애플 공홈을 보면 내비게이션 바 좌우에 여백이 있어요
ul 태그로 navbar 요소들을 한 번 묶어주고,
ul의 최대너비(max-width)를
고정시킨 상태에서(애플에서는 980px로 했더라구요)
margin left, right를 auto로 주면 ul태그가 가운데 정렬이 되면서
좌우 여백을 만드실 수 있어요

그리고 nav태그가 아니라 ul 태그를 flex container로 설정(display:flex;)하고 나머지 flex 설정들을 그대로 해주시면 될 것 같아요

.top-navBar{
  background-color: #000000;
  height: 48px;
}

ul {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  max-width: 980px;
  list-style: none;
}

.covid-section에서
padding 값을 padding: 10px 15px 10px 15px 로 주셨는데
padding: 10px 15px;로 단축해서 표기하시면
코드 양을 약간 줄일 수 있어요
.top-navBar > a 의 padding도 마찬가지!

클론코딩하실 때 레이아웃은 직접 구현하면서 연습하는 게 좋지만
색상코드나 폰트 같은 디테일은 기존 사이트에서 그대로 가져오시면 좀 더 완성도를 높일 수 있어요
알고 계실것같지만 개발자도구를 연 상태에서 Ctrl+shift+c를 누르고(혹은 개발자도구 왼쪽 상단 화살표 모양을 누르고) 원하는 요소를 선택하면 색상코드나 폰트패밀리 등을 확인할 수 있습니다