HTML/CSS 그룹 프로젝트 2일차 - 페이지 완성하기

 

 안녕하세요. 진득 코딩입니다.

 

 이번 시간에는 그룹 프로젝트 2일 차의 과정에 대해서 살펴보도록 하겠습니다.

 

 2일차에는 저번 시간에 못했던 만드는 방법과 추천 레시피를 추가하였습니다.

 

 벤치마킹하고 있는 웹페이지에 제목 밑에 태그가 있어서 해당 태그도 추가해 주었습니다.

 

 또한 모바일 버전에서의 nav바 기능을 추가하였습니다.

 

 그리고 footer를 담당해 주신 팀원분이 footer를 완성하여 이 footer도 적용해 두었습니다.

 

태그

 

 

 위와 같이 태그라는 파트를 추가해 주었습니다.

 

 원래는 각 음식마다 어울리는 태그를 삽입하여 해당 태그를 누르면 그 태그로 검색을 하여 고객에게 보여주는 기능입니다.

 

 하지만 현재 프로젝트에서는 검색 기능이 없기 때문에 맨 앞의 태그를 해당 음식의 종류로 넣고 해당 태그만 카테고리로 넘겨주는 기능을 넣고 다른 태그들은 따로 기능을 주지 않을 계획입니다.

 

 

 태그 관련 HTML입니다.

 

 전체를 korea1-Tag라는 div로 싸고 <ul> 태그와 <li> 태그를 이용하여 목록으로 만들어주었습니다.

 

 위에 목록들을 많이 만든 이유는 태그들이 max-width를 넘었을 때의 배치를 확인하기 위해서입니다.

 

 

 위 코드는 태그 관련 CSS입니다.

 

 tag자체의 위아래로 margin을 주었고 각 클래스는 웬만하면 부모 클래스와 각 요소를 적어주어 최대한 다른 팀원들이 만든 페이지에 영향이 가지 않도록 노력하였습니다.

 

 flex-wrap을 wrap으로 설정하여 태그들이 많아져 max-width를 넘었을 때 깨지지 않고 한 칸 내려쓰도록 설정하였습니다.

 

 한 칸 내려썼을 때 각 태그들이 겹치는 것을 방지하기 위해 gap으로 위치를 조정해 주었습니다.

 

 <a> 태그에 border을 설정하여 실제 버튼은 아니지만 버튼처럼 보이도록 시각 처리 해주었고 border-radius를 이용하여 태그의 모서리를 둥글게 표현해 주었습니다.

 

 

 태그에 마우스를 올려두었을 때 태그 색상이 팀 색상으로 바뀌도록 설정해 두었습니다.

 

 

 그냥 background-color만 팀 색상으로 지정하자 글씨 색이 검은색이라 글씨가 잘 안보였습니다.

 

 그래서 hover 할 때만 color를 white로 설정해서 글씨가 잘 보이도록 설정하였습니다.

 

만드는 방법 파트

 

 

 다음은 해당 컨텐츠 중 가장 중요한 만드는 방법 파트를 구현하였습니다.

 

 만드는 방법 파트는 각 단계별로 사진이 들어가고 팀색상의 글씨인 Step N이라는 글귀가 들어갑니다.

 

 그 밑에 약간 약한 색상으로 설명이 쭉 들어가게 됩니다.

 

 

 위 코드는 만드는 방법 HTML 코드입니다.

 

 먼저 howToMakeArea라는 클래스인 div로 묶어주었습니다.

 

 저번 시간과 달리 area에 id를 지정해 주었는데 id를 지정한 이유는 밑에서 다시 설명드리도록 하겠습니다.

 

 먼저 가장 위에 h2 태그로 만드는 방법이라는 글씨를 넣어주었습니다.

 

 그 이후 img 태그를 이용하여 벤치마킹하는 웹사이트에서 사진을 가져왔습니다.

 

 Step1이라는 글자와 설명은 설명이 필요한 목록인 <dl>, <dt>, <dd> 태그를 사용해 주었습니다.

 

 

 다음은 CSS 코드를 살펴보도록 하겠습니다.

 

 float를 left로 하여 좌측 정렬을 해주었고 width는 100%, max-width는 768px로 설정하여 반응형 웹 페이지에 대비하였습니다.

 

 dt에 팀색상을 입혀주었고 bold 정도인 font-weight 700은 너무 글자가 두꺼워서 600 정도로 설정해 주었습니다.

 

 dd에는 설명이 들어가므로 font-weight를 lighter로 설정해서 사진이나 step N 부분을 강조해 주었습니다.

 

추천 레시피

 

 

 다음은 마지막 컨텐츠인 추천 레시피 파트입니다.

 

 관련 레시피는 관련된 하나의 레시피만 나오지만 추천 레시피는 해당 음식과 관련된 여러 음식들이 나오는 파트입니다.

 

 4가지의 음식이 출력되기 때문에 위에 있는 컨텐츠들처럼 768px만을 사용하면 좁아서 해당 컨텐츠의 영역만 넓혀두었습니다.

 

 각 추천 레시피는 음식 사진이 들어가고 태그, 음식 이름 순으로 배치됩니다.

 

 

 해당 파트를 recommended-recipe-Area인 클래스를 부여한 div로 묶어주었습니다.

 

 네 가지 음식을 container로 묶어주어 그리드를 적용해 주었습니다.

 

 각 col에 col-lg-3, col-md-6, col-sm-12를 적용해 주어 4가지 음식이 같이 나오다가 브라우저의 크기가 줄어들면 2가지 음식, 더 줄어들면 1가지 음식씩 나오도록 설정해 주었습니다.

 

 각 음식 사진에는 <a>를 걸어주어 해당 음식 레시피 화면으로 넘어가도록 해주었습니다.

 

 

 다른 컨텐츠들과 다르게 max-width를 1280px로 설정한 것을 확인하실 수 있습니다.

 

 다른 부분은 관련 레시피와 거의 흡사한 설정들이기 때문에 넘어가도록 하겠습니다.

 

 

 구분선도 last-divider이라는 이름으로 따로 설정해 주었습니다.

 

 다른 부분은 똑같지만 max-width를 1280px로 설정해 주었고 양 옆에도 margin을 넣어 1280px이하일 때 구분선 양 옆에 여백을 두었습니다.

 

업버튼

 

 

 다음은 업버튼 기능을 살펴보도록 하겠습니다.

 

 업버튼은 우측 하단에 항상 포함되도록 설정해 두었습니다.

 

 원래는 팀 색상을 입힌 업버튼을 생각하였는데 뭔가 지저분해서 위와 같은 깔끔한 업버튼으로 구현하였습니다.

 

 

 업버튼 HTML 코드는 굉장히 간단합니다.

 

 이미지는 벤치마킹한 웹 페이지에서 가져왔고 div에 onclick 이벤트를 추가해 주었습니다.

 

 

 업버튼 javaScript 코드입니다.

 

 위에서 onclick 이벤트가 발생하면 페이지 상단으로 스크롤되는 함수를 밑에 적어두었습니다.

 

 위에 있는 function()은 웹 페이지 가장 상단에 있을 때는 안 보이다가 스크롤을 좀 더 내려 업버튼이 필요할 때부터 업버튼이 보이게 하는 기능을 주었습니다.

 

 해당 기능은 if문을 사용하여 구현하였습니다.

 

 

 해당 업버튼은 id로 지정해 주었고 position을 fixed로 하여 화면을 내려도 계속 우측 하단에 고정되도록 하였습니다.

 

 z-index를 6으로 하여 다른 컨텐츠보다 위에 표시될 수 있도록 하였습니다.

 

 display는 기본적으로 none으로 하여 안 보이게 해 주었고 JS에서 if문의 조건이 달성될 때만 보이도록 해주었습니다.

 

 처음에는 업버튼에 마우스를 올려두어도 마우스가 포인터로 바뀌지 않아 누를 수 있는 버튼인지 구분하기가 어려웠습니다.

 

 그래서 cursor를 pointer로 바꿔주어 누를 수 있는 버튼인 것을 표현해 주었습니다.

 

footer 적용해 보기

 

 

 다음은 팀원이 만든 footer를 적용해 보았습니다.

 

 팀 색상들로 이루어져 있고 좌측에는 문구들이 있고 우측에는 아이콘들이 몰려있는 모습입니다.

 

 

 위 HTML 코드를 보시면 footer-container-fluid라는 class가 원래는 container-fluid라는 클래스로 설정되어 있었습니다.

 

 해당 클래스 이름은 위에서 메인 사진 부분에서 필자가 사용하고 있는 클래스 이름이기 때문에 바꿔주었습니다.

 

이미지 경로도 필자의 상황에 맞게 바꿔주었습니다.

 

 

 다음은 footer부분 CSS들을 살펴보도록 하겠습니다.

 

 이미 팀원분이 만든 CSS이기 때문에 건드릴건 딱히 없었지만 HTML 코드에서 class이름을 몇 가지 바꾼 게 있어서 해당 부분만 맞춰서 바꿔주었습니다.

 

 

 아이콘 부분에 cursor를 pointer로 따로 설정하여 누를 수 있는 버튼임을 표현해 준 것을 확인하실 수 있습니다.

 

 또한 필자가 위에서 적용한 flex-wrap도 wrap으로 설정한 것을 확인할 수 있습니다.

 

 

 미디어 쿼리를 이용하여 모바일 버전의 화면도 구현해 놓은 것을 확인할 수 있습니다.

 

모바일 버전 nav바 기능

 

 

 다음은 모바일 버전에서 나오는 nav바 기능을 살펴보도록 하겠습니다.

 

 브라우저 크기가 줄어들면 nav바가 생기게 됩니다.

 

 이 부분을 누르게 되면 해당 컨텐츠가 있는 화면으로 스크롤되게 됩니다.

 

 

 먼저 nav바에 있는 <li> 태그들에 <a> 태그를 적용하고 하이퍼 링크를 id로 지정해 줍니다.

 

 

 각 파트의 area 파트에 id를 위와 같이 설정해 줍니다.

 

 이렇게 하면 <a> 태그를 누르면 해당 부분으로 이동하게 됩니다.

 

다른 레시피 추가

 

 

 위와 같이 만든 레시피 화면을 이용하여 다른 페이지도 만들어보았습니다.

 

 음식 사진이나 이름 같은 몇 가지 요소들만 바꾸면 위와 같이 다른 레시피 세부 화면을 만들 수 있습니다.

 

---

 

 이번 시간에는 페이지를 대부분 완성시키고 팀원이 만들어준 footer를 적용해 보았습니다.

 

 또한 이렇게 기본적으로 틀을 완성해 둔 상태에서 다른 음식 페이지도 완성해 보았습니다.

 

 다른 사람이 만든 코드를 적용할 때에는 그냥 붙이는 것보다 어느 정도 코드를 이해하고 내 코드와 부딪히는 일은 없는지 확인한 후에 붙이는 것이 좋다는 생각을 했습니다.

 

 이번 포스팅은 여기까지입니다.

 

 끝까지 봐주셔서 감사합니다.😊