[우아한 형제들 클론 코딩 프로젝트] 2/5의 해커톤
열심히 강의를 듣고, 실습을 따라하고 과제도 성실하게 수행해서 제출했는데 문제가 생겼다.
막상 프로젝트를 시작하려 하니 그냥 진짜 새하얀 백지가 눈앞에 펼쳐진 기분이었다.
근데 비유가 아니라 아무것도 작성되지 않은 웹은 진짜 새하얀 백지였다.
이 분야가 항상 그렇지...
매 순간 느끼지만 이론(강의 수강)과 실습의 괴리가 느껴질 땐 기분이 조금 그렇다..ㅎ
실망도 좌절도 아니지만 이게 맞나 싶고 그런..
근데 뭐 내가 얼마나 많은 프로젝트를 해봤다고,,,아직 해야할 공부도 많은걸,,,
그래도 다행인건 너무 재미가 있다는거야
나름 2년 동안 이 분야의 공부를 하며 깨달은 나만의 공부 방법(?)은,
강의를 들으며 공부한 내용과 내가 실제로 할 수 있는 것 사이에 괴리가 생겼을 때 좌절하고 다시 이론으로 돌아가면 안된다. 일단 코드 한 줄이라도 작성하고, 컴파일해보면서 앞으로 나아가야 한다.
모르는게 생기면 그 때마다 구글링을 하든, 강의 자료를 다시 들여다 보든 암튼 문제가 생긴 그 순간에 잠깐 돌아가 해결해야 한다. 난 완벽하지 않으니까 다시 이론부터 차근차근 공부하고 와야지라는 생각으로는 평생 이론만 공부하고 있을 지도 모른다. 이런 부분에 있어 it 분야의 공부, 특히 프로그래밍 과목의 공부는 수학 공부법과 참 유사하다.
암튼 주저리가 길었는데, 이 괴리를 깨부시기 위해 강의로 다시 돌아가는 대신,
코드 한 줄이라도 더 작성하고 컴파일 해보기를 방법을 선택했다.
내가 담당한 페이지는 [서비스] 부분이여서, 이 페이지의 구조를 뜯어보았다.
[헤더]
-상단 메뉴바: 드롭다운 형식
[메인]
-무한재생 되는 동영상
-서비스 소개 txt 문단
-앱 다운로드 버튼
-중간 메뉴바, 프로그레스 바, 중간 서브 메뉴
-중간 메뉴바 주제들의 서비스 소개 txt, 로고, 사진들
[푸터]
페이지 구조는 위와 같다.
HTML로 페이지 레이아웃 먼저 잡아갔다.
메인 부분들은 동영상 하나와 서비스 소개글, 그에 맞는 사진이 반복되었기에
구현에 있어 가장 많은 시간을 상단의 메뉴바에 투자했다.
HEADER
[상단 메뉴바 부분]
상단의 메뉴바의 메인 메뉴와 마우스 hover 시 등장할 서브메뉴의 관계를 display: flex; 로 지정했다.
이를 통해 메인 메뉴 리스트와(회사소개, 서비스, 함께가치, 뉴스룸)와 서브 메뉴 리스트를 수평으로 만들고,
메인메뉴-서브메뉴 관계는 수직 쌓임으로 구현했다.
아직 hover는 구현하지 못하여 서브 메뉴들이 그대로 화면에 나타나 있다.
사실 저기까지 구현해놓고, 헤더 부분의 코드를 완전히 마무리하기까지 꽤 많은 시간이 걸렸다.
MAIN
[video]
서비스 페이지의 헤더 아래에는 배달로봇 딜리를 소개하는 반복 재생 영상이 나온다.
video 태그를 이용한 구현에 있어 두 가지 문제가 발생하였는데,
1-p. 영상이 반복 재생이 되지 않는 문제(크롬 브라우저 사용)
2-p. 영상 크기가 화면에 딱 들어맞지 않고 over 되어 스크롤바가 생겨버리는 문제
; video의 width와 height를 100%로 설정해도 문제가 해결되지 않았다.
1-s. 크롬에선 자동재생 기능을 "사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방지" 를 명목으로 지원하지 않는다는 것을 알게 되었으며, 구글링을 통해 음소거가 된 autoplay는 지원한다는 것 또한 알게 되었다.
따라서 "muted" + "autoplay" 로 구현해 주었다.
<video muted="muted" loop="loop" autoplay="autoplay">
2-s. %는 부모 요소 길이의 몇%를 차지할 것인지 나타내기 때문에 먼저 부모 요소의 길이가 설정되어 있어야 함
=>video 태그의 부모 요소인 .SERVICEVISUAL의 값을 width: 100%; height: 600px; 로 지정해 준 후,
video의 width: 100%; height: 100%; 값을 부여했더니 문제를 해결할 수 있었다.
아래는 문제를 해결 함에 있어 많은 도움을 받은 블로그다.
https://codingbroker.tistory.com/56
[HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset
HTML에서 최상위 div를 화면 전체로 설정하는 방법입니다. 1. % 사용 width와 height를 100%로 설정하면 전체화면이 될 것만 같습니다만 그렇지 않습니다. %는 부모 요소 길이의 몇%를 차지할 것인지 나
codingbroker.tistory.com
영상 크기 조절에 성공하고 너무 기뻤다!
카페에서 작업을 하다가 소리지를 뻔 했다.
3일동안 저거 때메 끙끙거렸거덩....ㅎㅎㅎ
[배달의 민족 서비스 소개 txt]
영상 바로 밑에 배달의 민족-우리가 어떤 민족입니까 타이틀 글씨가 나온다.
1-p. css를 만지는 과정에서 [배달의 민족] 부분 txt 크기를 조절했더니 배달의 민족 글씨와 우리가 어떤 민족입니까 사이의 공백이 엄청엄청 크게 나오는 문제가 발생
1-s.
[HTML]
<h3 class="page-heading">배달의민족</h3>
<p class="page-heading-sub">우리가 어떤 민족입니까</p>
[CSS]
h3, p {
margin: 0; }
=> h3 태그와 p 태그에 margin 값으로 0을 주어 문제를 해결했다.
[앱 다운로드 버튼]
border로 앱 다운로드 버튼을 구현해 주고, href에 링크를 걸어 버튼을 클릭했을 때 앱 다운로드 사이트로 이동할 수 있게 구현했다.
1-p. IOS 앱 다운로드, Android 앱 다운로드 글자 앞에 각 사과모양, 재생버튼 모양의 이모티콘이 들어가는데 글자와 이모티콘 간격이 안 띄워지는 문제 발생
1-s. 공백문자 코드 (non-breaking space) 을 이용해 문제 해결.
 을 이용하면 키보드의 스페이스 키 한 번을 친 것과 같이 한 칸을 띄운다.
여러 칸의 공백을 주려면, 원하는 만큼 공백문자를 연이어 붙여 쓰면 된다.
아래와 같이 적용해 구현했다.
  IOS 앱 다운로드,   Android 앱 다운로드
여기까지가 페이지의 중반부이다.
페이지 중반부 이후의 메인 요소들, 푸터, 그리고 헤더의 해결되지 못한 상단 메뉴바 부분의 코드 리뷰는 이어지는 글을 통해 다루겠다.