[부스트코스/웹 UI 개발] 프로젝트 C

웹페이지 전체 화면

main_pc(1024px~)

---

main_tablet(768px~1023px)

---

main_mobile(~767px)

---

view_pc(1024px~)

---

view_tablet(768px~1023px)

---

view_mobile(~767px)

---

기능

main_pc(1024px~)

헤더의 메뉴에 마우스를 오버하면 폰트의 weight가 bold로 변경된다.

 

 

빨간 박스로 감싸져있는 부분은 모두 링크처리되어 있다.

 

상품 리스트는 마우스를 오버하거나 키보드로 초점을 맞추면 숨겨져있던 텍스트와 딤드 배경 이미지가 노출된다.

텍스트는 모두 한줄 말줄임처리가 되어있다.

 

빨간 박스로 감싸져있는 부분은 모두 링크처리 되어 있다.

---

main_tablet(768px~1023px)

헤더 부분은 pc버전과 다르게 마우스를 오버해도 bold처리되지 않는다.

빨간 박스로 감싸져있는 부분은 모두 링크처리되어 있다.

 

상품 리스트는 pc버전에서 숨겨놨던 텍스트가 그대로 노출되고 빨간 박스만큼 링크처리되어 있다.

 

푸터는 pc버전과 동일하다.

---

main_mobile(~767px)

헤더에 햄버거 버튼이 추가된다.

 

햄버거 버튼을 클릭하면 숨겨져 있던 메뉴가 노출된다.

 

배너 부분의 링크처리는 pc버전, 태블릿버전과 동일하다.

 

상품 리스트는 한 행으로 보이도록 수정되고 다른 버전과 마찬가지로 링크처리되어 있다.

 

빨간 박스로 감싸져있는 부분은 한 줄 말줄임처리가 되어있다.

---

view_pc(1024px~)

main.html과 동일한 css를 사용하고, 헤더의 동작이 같다.

그 외에 특별한 기능은 없다.

---

view_tablet(768px~1024px)

main.html의 태블릿 버전에서 헤더와 푸터의 동작과 동일하게 view.html의 헤더와 푸터가 동작한다.

그 외 특별한 기능은 없다.

---

view_mobile(~767px)

main.html의 모바일 버전에서 헤더와 푸터의 동작과 동일하게 view.html의 헤더와 푸터가 동작한다.

 

만드는 법 리스트에서 텍스트가 두 줄 이상으로 늘어나면 들여쓰기 처리가 된다.

 

그 외에 특별한 기능은 없다.

---

이전 프로젝트 B와 동일하게 html과 css만으로 제작했다.

마찬가지로 소스코드를 업로드할 수 없지만, 모두 IR기법 처리가 되어 있다.

 

이번 프로젝트는 반응형 웹을 만드는 과제였다.

프로젝트의 작업 순서가 모바일->태블릿->pc 라서 그런지 이상하게 난이도가 높게 느껴졌다.

모바일 기준으로 html과 css를 코딩한 다음에 해상도가 큰 태블릿, pc로 수정하는게 익숙하지 않아서 그런 것 같다.

 

이번에 특히 어려웠던 부분은 이메일 입력 폼 부분이었다.

폼을 꾸미는 중에 '@'는 폼이 아니라 그냥 텍스트였는데 이것 때문에 세 요소(input, 텍스트, input)의 width를 조정하기가 불편했다.

뭘 어떻게 해도 방법이 없어서 ID 폼 부분의 width를 45%로, email 폼 부분의 width를 45%로, '@'의 width를 9%로 둬서 주먹구구식으로 조정했다.

 

그리고 이 프로젝트는 css파일 하나로 두 html을 꾸며야 했는데, 이 부분이 좀 신기했다.

여태껏 배워오면서 html에 css하나라는 고정관념이 박혀있었던 것 같은데, 실제 업무에서도 저런식으로 css파일 하나에 여러 html을 처리하는지 궁금해졌다.

 

main을 먼저 만들고 view를 만들었는데 main을 만들고 나서 만드는 view는 아주 간단하게 만들어졌다.

view는 main에 비해 css로 꾸밀게 별로 없어서 그런 것 같다. 헤더나 푸터도 main과 동작이 같기도 하다.

 

세 번째로 만들어본 웹페이지인데 가장 처음에 만든 웹페이지와 비교하면 충분히 잘 만들었다고 생각한다.

웹페이지 제작에 자신감이 생겼냐 하면 꼭 그렇지도 않지만 앞으로 공부하면서 실력이 더 늘 것이라는 확신은 있다.

---

https://www.boostcourse.org/web344

웹 UI 개발

해당 프로젝트의 소스 코드는 부스트코스의 규칙에 따라 업로드 하지 않음.