인프런 HTML & CSS 14~22강에서 진행하는 실습을 강의 듣기 전에 직접 해보았다.
1. 웹페이지 실전
14~16강
1-1. yahoo 클론
#5.5 에 따로 글을 썼다. 처음으로 진행해보는 메인 페이지 전체 클론이라 어려움이 많았다.
1-2. 쇼핑몰 레이아웃 클론
- 최상단 nav를 global navigation bar, menu1~8이 적힌 nav를 local navigation bar라고 부른다.
- header 구현이 가장 오래 걸린다.
- 버튼 구현 시에는 anchor tag에 padding을 줘서 클릭하기 편하게 만들자.
1-3. 웹 폰트 적용하기
구글 폰트를 이용해서 폰트를 적용해 보았다.
2. 스마트폰 레이아웃
viewport : meta tag 내에 브라우저 화면 설정과 관련된 정보를 제공
<meta charset="utf-8" content="width=device-width, initial-scale=1.0, minumum-scale=1.0, user-scalable=no">width/height - 화면 너비 높이
initial-scale - 초기 확대 비율
user-scalable - 확대 축소 가능 여부
minimum-scale/maximum-scale - 최소 최대 비율
- 스마트폰 레이아웃의 경우 화면 사이즈가 작기 때문에 대부분 수직 구조
2-1. 스마트폰 클론 1
- 크롬에서 모바일 화면으로 볼 수 있지만, 모바일에서 보면 또 다른 상황이 생길 수 있기 때문에 호스팅을 해보는 것을 추천한다. 나는 깃헙을 이용해서 확인해보았다.
그냥 보이는 이미지만 만드는 건 뚝딱 해냈는데, 강의를 들어보니까... 메뉴 버튼에 toggle을 넣어서 navigation이 나오도록 하는 기능이 있었는데, 강의 코드를 보고 내 코드에 토글을 적용시키는 것에서 많이 해맸다.
toggle 이용법
#toggle { display: none; } #toggle:checked ~ .mobile > .gnb-wrap { /* label을 눌러서 toggle이 check 되면, toggle과 같은 레벨에 있는 모든 .mobile (모든 이래봤자 1개) 의 바로 아래 레벨에 있는 .gnb-wrap이 block이 되어 나타나게 된다. */ display: block; } .gnb-wrap { /* navigation도 기본적으로 숨김상태 */ display: none; border:10px solid #333333; }<body> <header> <!-- 토글을 체크박스를 숨겨서 구현한다. --> <input id="toggle" type="checkbox"> <section class="mobile"> <div class="container"> <!-- 체크박스는 숨기고 버튼만 나오게 하기 위해 버튼을 label로 만든다. --> <label class ="header-btn" for="toggle" onclick=""> Menu </label> </div> <!-- 아래의 gnb-wrap이 숨겨졌다 나타났다 할 부분. --> <div class="gnb-wrap"> <nav class="gnb"> <ul> <li><a href="#none">gnb1</a></li> <li><a href="#none">gnb2</a></li> <li><a href="#none">gnb3</a></li> <li><a href="#none">gnb4</a></li> <li><a href="#none">gnb5</a></li> <li><a href="#none">gnb6</a></li> <li><a href="#none">gnb7</a></li> <li><a href="#none">gnb8</a></li> </ul> </nav> </div>
2-2. 스마트폰 클론 2
1번 클론이랑 난이도가 비슷할거라고 예상했는데, 처음에 사진에 여백을 더 주고 했더니 그 여백 조정하는 거랑, 검색창 너비 구현, 그리고 텍스트 잘리도록 조정하는게 생각보다 힘들었다.
1. header 왼쪽, 오른쪽에 아이콘 붙이기
.header-wrap { position: relative; text-align: center; } .logo1 { positon: absolute; left: 10px; } .logo2 { position: absoulte; right: 10px; }<!-- html은 구조만 쓰겠다. --> header-wrap logo1 h1 logo2
나는 display: flex, justify-content: space-between 을 가지고 해결했는데, position을 가지고 할 수도 있다.
2. 검색창이 모바일 UI에서 width에 맞춰서 전체를 다 차지하게 하는 방법
.search-bar { width: 100%; } .search-btn { position: absolute; top: 0; right: 0; }
나의 경우는 처음에 input width를 95% 로 놓고 그 옆에 30px의 버튼을 배치했다. 이러면 버튼 크기는 고정이라 width가 너무 작아졌을 때 버튼이 아래로 밀려나는 현상이 있어서 어느 정도 작아져도 괜찮게 input width를 85% 로 줄여서 뭔가.. 양 옆 여백이 애매하게 남았는데, search-bar 를 100% 를 주고 그 위에 버튼을 놓으면 되는거였다.
그치만 굉장히 긴 검색어를 검색하면 버튼에 글자가 가려지게 될 테니까 그 점에 대한 보완이 필요할 것 같다.
3. 긴 글을 ... 으로 자르는 법
아래 3가지 속성을 주자.
p { white-space:nowrap; overflow: hidden; text-overflow: ellipsis; /* ... 으로 잘림 */ }
4. 화면 너비가 줄어들면서 가로 배치가 깨지는 문제
원래 광고, 광고 문장이 네모 박스 옆에 있는데, 가로 너비를 줄이니까 그냥 내려가버리는 문제가 발생했다. block 형태라서 내려갈 수 밖에 없지만 안 내려가는 방법은 없을까 고민하다가
오른쪽 text 영역의 width를 줄어들 부분보다 더 작게 지정해보았다.
/* 광고 제목, 내용이 묶인 곳이 .text-wrap */ .text-wrap { float: left; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
그러나 text-overflow: ellipsis;를 주지 않고 그냥 텍스트가 밑으로 흐르게 둘 경우, 어색하게 거기만 너비가 작아지므로... 적확한 해결법은 아닌 것 같다.
-> 해당 문제점은 flex를 배우고 flex-wrap을 주지 않아서 그냥 흘러넘치게 두는 방법으로 해결했다!!!! (211123)
4. 느낀점
- 쇼핑몰 코드는 짜는데 1시간 정도 소요가 되었고, 웹 폰트는 간단해서 그런지 거의 15분만에 짠 것 같다. 강의 코드랑도 크게 차이가 나는 부분도 없었다.
- 헷갈렸던 점은 그냥 화면만 보고 로컬 메뉴바는 메인에 들어간다고 생각했는데, 보통 헤더에 넣는다는 점.
- main에 section 태그로 나눴는데, content 태그도 있다.
- 웹 만드는게 너무 너무 힘들었다는 동기들의 말을 들었어서 겁먹었었는데, 아마도 로딩해와야하는 그런 UI부터인 것 같다. 앱은 확실히 그런 부분이 편하게 되어있긴 하니까 어떤 차이가 있을지 빨리 공부하고 싶다.
- 토글 만들고 연결하는게 앱보다 복잡했다...! 같은 레벨이 아니라서 굉장히 헤맸다 😵💫
- 생각보다... layout에 문제가 많다. position 을 적극 활용해야 풀린다.
- 그리고 2-2의 4번 같은 경우는.. 어떻게 해결할 지 더 고민해봐야 한다.
