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

웹페이지 전체 화면

---

기능

헤더와 top버튼은 화면에 고정되어 있음.

 

 

푸드위드 스토어 페이지에서는 상품 이미지에 마우스를 오버하거나 키보드로 초점을 맞췄을 때 할인율과 할인 시간을 표시해준다.

 

 

푸드위드 레시피 페이지에서는 레시피 이미지에 링크 처리가 되어있다.

그리고 레시피 전체 보기 버튼에 마우스를 오버하거나 키보드로 초점을 맞추면 버튼 이미지가 변경된다.

---

본문

html과 css만으로 제작했다.

부스트코스 프로젝트 규칙때문에 소스코드를 올릴 수는 없어 확인할 수는 없겠지만 해당 웹페이지에서 이미지로 되어있는 부분들은 모두 IR기법을 통해 텍스트를 blind 처리해놓았다.

 

확실히 웹 UI 개발 강의를 듣고나서 웹페이지를 만드니 프로젝트 A를 진행할 때보다는 훨씬 시간도 적게걸리고 난이도도 쉽게 느껴졌다.

 

이번 프로젝트에서 어려웠던 점, 이해가 안됐던 점이 있었다.

평가 기준표에서 FAQ 페이지에 화살표 버튼을 <button> 태그로 제작하라고 되어있는데

<button> 태그는 type이 button일 때 스크립트 없이는 아무런 동작을 할 수가 없는 걸로 알고 있다.

이 페이지에서 화살표 버튼을 누르면 Q에 해당하는 A가 활성화되고 화살표 이미지가 변경되어야 하는데 <button> 태그를 사용하면 스크립트 없이 동작을 구현할 수가 없었다.

웹 UI 개발 강의를 들어보면 알겠지만, 이 과정에서 스크립트는 일절 사용하지 않는다.

그래서 스크립트를 사용하지 않고 스크립트가 동작한 것처럼 클래스를 추가해서 웹페이지에서 그렇게 보이도록만 해주었다.

스크립트 없이 동작이 가능하도록하려면 <a> 태그를 사용해야 할 것 같다.

 

또, 해상도가 1920px 이상이면 각 페이지들의 배경색이 보이도록 하는 디자인 가이드가 있었는데

필자는 해상도가 1920px 미만이면 배경색이 나오지 않게 하는 것으로 이해했다.

그래서 미디어 쿼리를 이용해 min-width가 1920px일 경우 페이지들에 배경색을 주었는데 이렇게 하면 당연히 브라우저의 가로 크기를 줄이면 배경색이 없어진다.

그런데 부스트코스에서 제공해준 비디오 영상을 보면 가로 크기를 줄여도 배경색이 없어지지 않는다.

이 부분은 이해가 잘 안됐었다. 부스트코스 측에서 제공한 비디오에 문제가 있는지, 가이드에 대한 이해를 잘못했는지 잘 모르겠다.

 

두 번째로 만들어본 웹페이지인데 생각보다 쉽게 만들 수 있어서 기분이 좋았다.

다음으로 프로젝트 C가 하나 더 남아있는데, 이 프로젝트도 잘 진행되면 좋겠다.

---

https://www.boostcourse.org/web344

웹 UI 개발

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