학습내용
네이버 모바일 버전 페이지(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에 영향 미치는 prefixscrollbar-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으로 넘어간 부분 안 보이게 처리하기- 요소 중앙정렬 공식 이용해 이미지 중앙으로 정렬해주면 원본 이미지 수정 없이 보여주고 싶은 부분을 보여줄 수 있을 듯
#banner-4 .banner-wrap img {
position: relative;
height: 100%;
left: 50%;
transform: translateX(-50%);
}weather 영역
- 온도 표시 기호 ° 를 html 특수문자로 넣어주었다.
<h3>24° 대구</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 검색기능 안내 영역
어려웠던 점
- now 섹션을 만들 때, li 내부 요소들의 크기를 비율값일 때 내용물들을 한 줄에 표시하기 위해
white-space: nowrap을 사용해보았다. 그랬더니 내부 p태그 글자들도 한 줄로 나와서 옆라인을 침범하게 되었다. p태그 안에white-space:normal속성을 따로 줘봤지만 전체 nowrap이 풀려 생각대로 되지 않았다. - 경제지표 섹션을 만들 때, 전체적인 구조는 now 섹션과 비슷했지만 내용이나 요소의 개수 등이 달랐다.
- 경제지표 섹션 리스트의 li에 고정 넓이값을 주려고 했는데 적용되지 않았다. now 할 때도 그랬지만 내부 요소의 넓이값에 맞추어서 자동으로 적용되는 것 같았다.
해결방법
flex-wrap: nowrap만으로 가로로 표시되게 하고, li태그 안 img-wrap 태그에 비율 넓이값이 아닌 고정 넓이값을 주었더니 그 넓이만큼 늘어났다.- now 섹션을 scroll-section이라는 클래스로 만들고, 경제지표 부분에서 커스텀할 부분은 #economy라는 id로 호출해서 수정해주었다. now 부분도 추후 economy에서도 사용할 것을 고려해서 수정하였다.
- li에도 넣어보고 a에도 넣어봤지만 고정 넓이값이 적용되지 않아서 그냥 margin-right 값을 늘려주었다. 생각해보니 1번과 비슷한 문제인데, 내부 콘텐츠의 넓이를 고정값으로 주었으면 적용이 되었을 것 같기도 하다.
소감
오늘 배운 것 중 가장 새로웠던 것은 특정 영역에 가로 스크롤을 이용한 리스트를 만드는 것이었다. 영역의 크기보다 더 많은 컨텐츠 리스트를 보여주는 것은 자바스크립트가 있어야 할 것이라고 생각했는데 html와 css만으로도 가능해서 신기하다.
또한 강의에서 다루지 않은 경제지표 부분을 한번 만들어봤는데, 기존에 id로 만들어진 영역을 클래스화하고 재사용하는 부분을 스스로 해 본 것이 뿌듯했다.
문서화를 좋아하는 개발자