저번 개인 프로젝트에서 만들었던 인스타그램 모바일 버젼을 좀 더 보완해 데스크탑에서는 데스크탑 형태를, 모바일에선 모바일 형태를 나오도록 만들어보자.
일단 내가 만든 결과물은 다음과 같다.
이 상태로 줄이면 스마트폰 버젼이 나오게 된다.
튜터님의 모습도 이와 비슷하니 따로 게재하진 않겠다. 처음에는 이렇게 만들 때 되게 애먹었다. 미디어 쿼리를 사용하는데 미디어쿼리는 사실 써 본적이 없었다. 그래서 이 사이트로 처음에 많이 공부를 시작했다.
미디어 쿼리를 사용하기 전에 가장 중요한 코드가 있다. 뷰포트에 접근해야하기 때문에 이를 사용할 시 HTML의 헤드 부분에 메타 태그를 넣어야 한다.
<meta name="viewport" content="width=device-width" , initial-scale=1.0">사실 헤드 부분뿐 아니라 link를 거는 방법도 있는데 나는 개인적으로 기억에 남지도 않고 비추한다. 이 부분을 꼭 넣어줘야 뷰포트에 대해 정의할 수 있다.
뷰포트가 뭔데?
문서의 내용이 모두 표시되는 영역이라고 생각하면 된다. 참고로 내가 처음에 만든 인스타그램 클론코딩이 그 예시라고 생각한다. 나는 스마트폰 화면에서 웹으로 넘어가면 형태는 유지되지만 되게 넓어졌었다. 이는 뷰포트를 정의하지 않았기 때문에 스마트폰 기준으로 맞춰진 웹이 넓어지게 되는 것이다.
따라서 이를 조절하는 것이 바로 위의 메타태그이다.
방법을 알게된 후 나는 모바일과 데스크탑을 나누기로 결심했다.
container라는 메인 페이지를 작성하기 전에 또 하나의 큰 div로 묶어 모두 mobile, desktop이라는 클래스명을 붙여줬다. 참고로 이 부분에 아이디 값을 주게 되면 하나만 적용되서 그런지 나머지 요소들은 디폴트값을 갖게 되는 것 같다. 주의하자.
코드에 대해서는 특별히 말할 것은 없으나 가장 힘들었던 부분이 있었다.
이렇게 두가지로 나누는 것이었다. 내가 구글링해서 얻은 정보와 튜터님의 코드가 조금 달랐다. 이를 확인해보자.
일단 나는 오른쪽, 왼쪽 부분을 나누었다. 그에 대한 CSS를 보자면
.main {
width: 100%;
padding: 40px 0;
display: flex;
justify-content: center;
margin-top: 50px;
}
.wrapper {
width: 70%;
max-width: 1000px;
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}이런 식으로 grid-template-columns라는 속성과 grid-gap을 찾았다. 사실 정확히는 무슨 속성인진 모르겠다. 같이 공부했던 스터디원은 이 방식으로 되지않았기 때문이다. 이 부분은 조금 더 확인해볼 필요성이 있다.
튜터님 코드를 보자.
처음에 리뷰할 때 솔직히 어떻게 했는지 모르겠다. 근데 자꾸 보니까 사용한 방법이 보인다. 모바일 헤더, 데스크탑 헤더(내 기준 상태바)는 각각 작성하셨다.
/* 서브 컨테이너 */
#sub-container {
display: flex;
flex-direction: column;
width: 275px;
}아 여기서 width값을 주고 display: flex로 넘기신건가? 하고 생각했다. 확실히 튜터님의 코드는 다시 한 번 리뷰해야 될 것 같다는 생각이 든다. 코드 리뷰할 게 참 많다.
어쨌든 나는 이번 인스타그램 최종버젼 클론코딩하면서 살짝 불만인 부분이 있다.
나는 이 부분이 어느정도 자연스럽게 크기가 맞춰지지 않고 스마트폰 부분을 그대로 가져와서 붙였던지라 스마트폰 기준이 좀 더 컸던 것 같다. 이 부분은 max-width를 맞추고 조금 조절하면 자연스럽게 될 것이라고 생각한다.
하면서 참고했던 프로젝트 및 사이트는 밑의 링크를 참조하고, 이를 끝으로 개인 프로젝트가 끝이 났다. 내가 정확하게 만든 것은 아니어도 어느 정도의 순서를 다시 한 번 리마인드할 수 있었고 새로운 것들도 배워가며 조금 더 반응형에 대해 공부할 수도 있었다고 생각한다.
이제 협업으로 진행되는 프로젝트가 시작되는데 벌써 설렘 반 긴장 반의 반 걱정 반의반이다. 프론트 부분은 조금만 더 보완해보면서 이제 팀 프로젝트에 대해 생각해보자.
