학습내용

네이버 모바일 버전 페이지(1)
github소스코드

시작하기

• 미디어쿼리 viewport html 코드: 디바이스 화면 크기에 맞게 콘텐츠 확대 및 축소해주는 역할

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 모바일 화면을 위해 wrapper 클래스로 화면 넓이를 제한하였다.
• overflow-x: hidden: 가로 방향으로 넘어가는 내용 감추기
• overflow-y: auto: 세로 스크롤 필요할 때 나타남
• vh(viewport height): 기기 화면 높이값을 기준으로 한 비율. 100vh이면 기기 높이의 100%를 의미한다.

.wrapper {
    overflow-x: hidden;
    overflow-y: auto;

    width: 375px;
    height: 100vh;
    margin: 0 auto;
    background-color: #eaeef3;
}

main-nav

• flex를 이용해 x축으로 정렬하되 줄바꿈 없이 옆으로 계속 넘어가야 하므로 flex-wrap: nowrap, white-space:nowrap으로 줄바꿈을 방지한다.
• overflow-x: auto를 이용해 가로스크롤을 생성한다.

#main-nav ul {
    overflow-x: auto;
    white-space: nowrap;

    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

• active 클래스를 이용해 선택된 항목의 글자색과 border-bottom을 변경해주었다. 이때 border의 영역이 글자에만 적용되게 하기 위해 padding의 위치를 강의와 다르게 li가 아닌 a태그 안으로 옮겨주었다.

<li><a class="active" href="#">홈</a></li>
<li><a href="#">뉴스</a></li>

#main-nav ul li a {
    display: block;
    height: 100%;
    
    border-bottom: solid 3px transparent;

    line-height: 54px;
    color: rgba(255, 255, 255, .5);
    font-weight: 700;
}
#main-nav ul li a.active {
    border-bottom: solid 3px rgba(255,255,255,.75);;
    color: rgba(255, 255, 255, 1);
}

스크롤 바 안 보이게 처리하기

• -ms-overflow-style: none: 선택하려 하니 줄 그어져 있음.
• ms~: explorer, edge에 영향 미치는 prefix
• scrollbar-width: 파이어폭스에 영향 미침
• 가상선택자 ::-webkit-scrollbar에서 display:none: 크롬, 사파리, 오페라 브라우저에서 적용됨

#main-nav ul {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#main-nav ul::-webkit-scrollbar {
    display: none;
}

header

검색창 영역

• 검색창 부분에 box-shadow가 있길래 복사해서 추가해주었다.

#header .search-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    overflow:hidden;

    position: relative;
    width: 333px;
    height: 52px;
    margin: 0 auto 24px;
    border-radius: 26px;
    border: solid 1px #03cf5d;
    background-color: #ffffff;
    box-shadow: 0 5px 10px 0 rgb(117 145 181 / 12%);
}

header-nav

• icon에 inline-block 속성을 주었더니 아래 공백을 원래 가지고 있어서 따로 공백값을 줄 필요가 없었다.
• icon에도 shadow가 있는 것 같아서 실제 페이지를 찾아보니 before로 만든 그림자 객체를 absolute를 사용해서 뒤로 옮겨놓은 것이었다. 나는 그냥 shadow로 비슷하게 만들었다.

#header .header-nav li a .icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    /* border: solid 1px gray; */
    background-color: #ffffff;
    box-shadow: 0 5px 10px 0 rgb(117 145 181 / 12%);
}

banner 시리즈

• 이미지 크기값 높이, 넓이 하나만 주면 비율대로 들어감
• 화면 크기보다 큰 이미지를 사용할 경우
  1. overflow: hidden으로 넘어간 부분 안 보이게 처리하기
  2. 요소 중앙정렬 공식 이용해 이미지 중앙으로 정렬해주면 원본 이미지 수정 없이 보여주고 싶은 부분을 보여줄 수 있을 듯

    #banner-4 .banner-wrap img {
    position: relative;
    height: 100%;

    left: 50%;
    transform: translateX(-50%);
}

weather 영역

• 온도 표시 기호 ° 를 html 특수문자로 넣어주었다.

<h3>24&deg; 대구</h3>

• 공기 상태에 따른 글자색을 나타내는 클래스는 실제 페이지랑 동일하게 만들었다.

#weather .weather-top .weather-left .txt-wrap p .state {
    color: #00d01d;
}
#weather .weather-top .weather-left .txt-wrap p .state.good {
    color: #00a8ff;
}

가로스크롤 영역

네이버 now 영역

• 처음에 네이버 now 영역을 id를 사용해서 만들었는데, 강의에서 다루지 않은 경제지표 영역을 만들어보려고 하니 디자인이 비슷해서 클래스화했다.
• 강의에선 ul태그에 overflow-y:auto를 사용했는데, 아무리 생각해도 가로 스크롤이면 overflow-x가 맞는 것 같은데 의외로 화면 상 달라진 것은 없었다. 왜 되는거지...?

.scroll-section ul {
    overflow-x: auto;
    /* white-space: nowrap; */

    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 20px 20px;
}

• 두 줄 말줄임 효과 적용

.scroll-section li a p {
    overflow: hidden;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    padding-top: 10px;

    font-size: 14px;
}

• 강의에선 btn-wrap 영역에 margin-top을 주어 공백을 만들었지만 ul태그에 스크롤이 생성될 때 내부 콘텐츠 일부를 가리는 것을 막기 위해 대신 padding-top을 주었다.
• btn-wrap 안 버튼들 사이 세로줄을 만들 때 before를 사용했는데, 선을 각 태그가 차지하고 있는 영역의 가장 왼쪽으로 보내기 위해 float:left를 사용하였다. float을 사용하면 3차원 속성을 가지게 되기 때문에 display등을 바꿔서 배치를 할 필요가 없어진다. 또한 추후 경제지표 영역에서 버튼이 3개 이상 나올 것을 고려해서 세로줄이 있는 것을 기본으로 만들었다.

.scroll-section .btn-wrap a::before {
    content: "";
    float:left;
    width: 1px;
    height: 14px;
    margin-top: 15px;
    background-color: rgba(125, 127, 133, .2);
    
    vertical-align: top;
}
.scroll-section .btn-wrap a:first-child::before {
    content: none;
}

경제지표 영역 (추가)

• li 사이 공백을 늘리기 위해 실제 페이지를 참고해 li에 고정 넓이값을 주려고 했지만 작동하지 않았다. 기존에 작성한 클래스를 보니margin-right값이 적용되는 것을 보고 그냥 그 값을 늘려주었다. 기존 클래스를 커스텀해서 사용할 경우 이전에 적용된 속성값을 잘 인지하지 못하는 경우가 종종 있다.

.scroll-section li {
    width: 100px;
    margin-right: 10px;
}
#economy li {
    margin-right: 15px;
    padding-right: 15px;
    border-right: solid 1px rgba(125, 127, 133, .2);
}

• 클래스 제작 시 버튼이 3개 이상인 경우를 고려해서 만들었기 때문에 버튼의 넓이 비율 및 글자 크기를 변경하는 것 외에 별도 커스텀이 필요하지 않았다.

#economy .btn-wrap a {
    width: 33.33%;
    font-size: 14px;
}

코로나19 안내 영역

• right-corona에 말고 before에 margin-right했더니 absolute라 이동 안됨
• before 가상선택자에 position:absolute 등을 사용해 3차원 속성을 가지게 된 경우, 가상선택자 바로 앞의 태그를 기준으로 움직이려면 해당 태그에 position:relative를 적용해주어야 한다. 아마도 before 가상선택자는 선택된 태그의 자식태그로 취급되는 듯하다.

#corona .corona-wrap a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    padding: 20px 0;
}
#corona .corona-wrap a.right-corona {
    padding-left: 11px;
}
#corona .corona-wrap a.right-corona::before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 42px;
    background-color: #efeff0;

    top: 20px;
    left: 0;
}

ai 검색기능 안내 영역

어려웠던 점

1. now 섹션을 만들 때, li 내부 요소들의 크기를 비율값일 때 내용물들을 한 줄에 표시하기 위해 white-space: nowrap을 사용해보았다. 그랬더니 내부 p태그 글자들도 한 줄로 나와서 옆라인을 침범하게 되었다. p태그 안에 white-space:normal 속성을 따로 줘봤지만 전체 nowrap이 풀려 생각대로 되지 않았다.
2. 경제지표 섹션을 만들 때, 전체적인 구조는 now 섹션과 비슷했지만 내용이나 요소의 개수 등이 달랐다.
3. 경제지표 섹션 리스트의 li에 고정 넓이값을 주려고 했는데 적용되지 않았다. now 할 때도 그랬지만 내부 요소의 넓이값에 맞추어서 자동으로 적용되는 것 같았다.

해결방법

1. flex-wrap: nowrap만으로 가로로 표시되게 하고, li태그 안 img-wrap 태그에 비율 넓이값이 아닌 고정 넓이값을 주었더니 그 넓이만큼 늘어났다.
2. now 섹션을 scroll-section이라는 클래스로 만들고, 경제지표 부분에서 커스텀할 부분은 #economy라는 id로 호출해서 수정해주었다. now 부분도 추후 economy에서도 사용할 것을 고려해서 수정하였다.
3. li에도 넣어보고 a에도 넣어봤지만 고정 넓이값이 적용되지 않아서 그냥 margin-right 값을 늘려주었다. 생각해보니 1번과 비슷한 문제인데, 내부 콘텐츠의 넓이를 고정값으로 주었으면 적용이 되었을 것 같기도 하다.

소감

오늘 배운 것 중 가장 새로웠던 것은 특정 영역에 가로 스크롤을 이용한 리스트를 만드는 것이었다. 영역의 크기보다 더 많은 컨텐츠 리스트를 보여주는 것은 자바스크립트가 있어야 할 것이라고 생각했는데 html와 css만으로도 가능해서 신기하다.
또한 강의에서 다루지 않은 경제지표 부분을 한번 만들어봤는데, 기존에 id로 만들어진 영역을 클래스화하고 재사용하는 부분을 스스로 해 본 것이 뿌듯했다.