솔로의 식탁
이번 시간에는 html, css 모두 이용하여 '솔로의 식탁'이라고 불리는 웹 페이지를 만들어보겠습니다.
모바일 버전, 테블릿 버전, 데스크 탑 총 세 가지로 구분하여 만들어보겠습니다.
모바일 버전
태블릿 버전
데스크탑 버전
위와 같이 '솔로 식탁' 페이지를 모바일 버전, 태블릿 버전, 데스크 탑 버전에 따라 배열 방식이 다르다는 것을 눈으로 확인할 수 있습니다. 거의 모든 웹사이트가 모바일, 태블릿, 데스크탑등에 따라 서로 다른 배열 방식을 사용하여 편리한 방식을 제공하고 있습니다. 또 저희는 그러한 경험을 한 번쯤은 해봤습니다.
따라서 이번에는 웹 사이트의 배열 방식을 화소에 따라 구분하여 만들어보겠습니다.
위와 같이 html 코드를 작성하여 뼈대를 갖춥니다.
css는 외부 스타일을 이용하겠습니다.
css 파일로 가서 코드를 확인하겠습니다.
모바일 버전에서 확인할 때 사진 등이 한 화면에 다 나오도록 설정해주어야 합니다.
이제 각 사진이 겹치지 않고 차례로 담길 수 있도록 설정하겠습니다.
이번에는 왼쪽 하단에 적힐 숫자를 설정하겠습니다.
absolute를 이용하여 상자 왼쪽하단 위치에 설정하겠습니다. 오른쪽 3%, 아래서부터 10px 떨어지게끔 설정하면 다음과 같습니다.
다른 3칸도 위와 마찬가지입니다.
위와 같이 각 사진이 모바일 버전에서 한 눈에 담기도록 width: 100%로 설정합니다.
그 후 각 칸에 사진이 담길 수 있도록 url을 이용하여 삽입합니다.
마지막으로 footer의 '솔로의 식탁' 부분을 꾸며주겠습니다.
이 역시 모바일 화면에서 한 눈에 보일 수 있도록 width:100%로 설정합니다.
추가적으로 배경은 검은색, 글자 색은 흰색으로 하여 눈에 잘 띌 수 있도록 설정합니다. 또 text-align으로 가운데 정렬까지 설정합니다.
태블릿과 노트북의 크기는 최소 768px, 1024px이상입니다.
저희가 흔히 모바일, 태블릿, 노트북에서 같은 웹사이트에 접속하더라도 다른 배열 및 방식을 사용하고 있음을 확인할 수 있습니다.
여기서 미디어 쿼리를 이용하여 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만드는 웹페이지 접근 방법을 사용해보겠습니다.
flex레이아웃을 이용하여 수평정렬이 되도록 설정합니다. 여유 공간이 충분하면 좋겠지만 그렇지 않은 경우도 있습니다. 여유 공간이 충분하지 못하다면 다음 줄로 넘길 수 있도록 설정합니다. 이때 flex-wrap: wrap;이 그와 같은 역할을 합니다. 더 나아가 4개의 이미지의 크기를 각각 49%로 설정하면 한 행에 두 개의 이미지만 오고 그 다음 이미지는 다음 행으로 넘어갑니다. 결국에는 첫 행에 두 이미지, 두번째 행에 두 이미지, 마지막 행에 하나의 이미지가 정렬될 것입니다. menu5의 크기는 설정하지 않았으니 세번째 행의 이미지는 100%크기를 유지할 것입니다.
이번에는 크기가 1024px이상인 노트북이나 데스크탑의 경우입니다.
위의 사진에서처럼 첫 행에 3개의 이미지, 두번째 행에 두 개의 이미지가 정렬되도록 하려면 4개의 이미지를 32%로 설정하여 3개의 이미지가 첫 행에 수평 정렬되고 여유 공간이 부족하여 4번째 이미지는 다음 행으로 넘어갑니다. 나머지 공간을 5번째 이미지가 채우도록 설정하면 완료입니다.