안녕하세요. 진득코딩입니다.  그룹 프로젝트가 드디어 마무리되었습니다.  원래는 3일 차와 4일 차를 구분하려고 했지만 밤새 작업을 해서 일차를 나누기 애매해 3, 4일 차를 한 번에 포스팅하게 되었습니다.  3, 4일차에는 1, 2일 차에 만든 페이지를 다른 요리 레시피 버전으로 더 만들고 다른 팀원들이 만든 페이지들과 링크로 연결하는 작업을 하였습니다.  프로젝트를 완성하는 과정이 어떤 식으로 진행되었는지 살펴보도록 하겠습니다. header 추가   먼저 header가 추가되었습니다. header에는 팀 로고, 검색창, 카테고리, 즐겨찾기, 로그인 버튼, 회원가입 버튼이 위치해 있습니다. header의 색상도 팀컬러에 맞춰서 왼쪽에서 오른쪽으로 그라데이션되도록 설정해 두었습니다. header HTML..

안녕하세요. 진득 코딩입니다.  이번 시간에는 그룹 프로젝트 2일 차의 과정에 대해서 살펴보도록 하겠습니다.  2일차에는 저번 시간에 못했던 만드는 방법과 추천 레시피를 추가하였습니다.  벤치마킹하고 있는 웹페이지에 제목 밑에 태그가 있어서 해당 태그도 추가해 주었습니다.  또한 모바일 버전에서의 nav바 기능을 추가하였습니다.  그리고 footer를 담당해 주신 팀원분이 footer를 완성하여 이 footer도 적용해 두었습니다. 태그   위와 같이 태그라는 파트를 추가해 주었습니다.  원래는 각 음식마다 어울리는 태그를 삽입하여 해당 태그를 누르면 그 태그로 검색을 하여 고객에게 보여주는 기능입니다.  하지만 현재 프로젝트에서는 검색 기능이 없기 때문에 맨 앞의 태그를 해당 음식의 종류로 넣고 해당 ..

안녕하세요. 진득 코딩입니다.  저번 시간에는 프로젝트할 준비를 하기 위해서 세팅하는 시간을 가졌습니다.  이번 시간에는 본격적으로 HTML/CSS 개발하는 과정에 대해서 살펴보도록 하겠습니다. head 부분   기본적으로 html 양식에 들어가 있는 태그들은 제외하고 살펴보도록 하겠습니다.    위 코드를 이용해서 bootstrap과 css연결을 하였습니다. 해당 코드가 있어야 bootstrap하고 연결되어 여러 컨텐츠들을 사용할 수 있습니다.   위 코드는 bootstrap과 js를 연결하는 코드입니다.  해당 프로젝트는 HTML/CSS만 사용하는 프로젝트이지만 bootstrap에 구현된 기능들은 js가 포함된 기능들이 있기 때문에 해당 코드를 넣어놓는 것이 좋습니다.   위 코드를 사용하여 favi..

보호되어 있는 글입니다.

안녕하세요. 진득 코딩입니다.  이번 시간에는 텍스트를 다양하게 표현하게 해주는 스타일을 이용하는 방법을 살펴보도록 하겠습니다.  더불어 목록과 표에도 스타일을 지정하여 다양하게 표현하는 방법에 대해서 살펴보도록 하겠습니다. 글꼴 관련 스타일  1. font-family 속성   - font-family 속성으로 웹 문서에서 사용할 글꼴을 지정할 수 있습니다.   - 텍스트를 사용하는 요소에서 주로 사용합니다.   - 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시됩니다.   - 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 해당 글꼴이 없을 경우를 대비해 두 번째,       세 번째 글꼴까지 입력하기도 합니다.  ..

안녕하세요. 진득 코딩입니다.  지난 시간까지는 웹 사이트의 뼈대를 담당하는 HTML에 대해 알아보았습니다.  하지만 HTML로만 이루어진 웹 사이트는 UI/UX면에서 떨어지는 웹 사이트입니다.  이번 시간에는 밋밋한 웹 사이트를 꾸며주는 CSS에 대해 살펴보도록 하겠습니다. 스타일을 사용하는 이유 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킵니다.이러한 작업을 HTML로 하지 않고 따로 스타일을 사용하는 이유는 두 가지 정도 있습니다.웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다.- HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작입니다.-..