안녕하세요. 진득코딩입니다.  그룹 프로젝트가 드디어 마무리되었습니다.  원래는 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..

안녕하세요. 진득코딩입니다. 웹 페이지를 살펴보게 되면 로그인 창이나 검색창과 같이 뭔가를 입력할 수 있는 요소들이 있습니다.  이렇게 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것을 입력 양식, 다른 말로 폼이라고 합니다.  이번 시간에는 입력 양식을 작성하는 방법에 대해 알아보고 다양한 태그와 속성에 대해 살펴보도록 하겠습니다.  태그 폼(form)이란 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소를 의미합니다. 태그는 폼을 만드는 가장 기본적인 태그로 과 태그 사이에 여러 가지 폼 요소를 넣습니다. 여러 폼 요소  태그는 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정합니다.종류설명method 사용자가 입력한 내용을 서버 쪽 ..

안녕하세요. 진득 코딩입니다.  이번 시간에는 HTML에서 이미지와 오디오, 비디오와 같은 미디어와 하이퍼링크를 삽입하는 법에 대해 살펴보도록 하겠습니다.  태그  태그는 웹 문서에 이미지를 삽입할 때 사용하는 태그입니다. 태그에서 알아야 할 속성은 src와 alt입니다.src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 합니다.alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.** 웹에서 사용하는 대표적인 이미지 파일 형식 - 웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 합니다. - 주로 JPG(또는 JPEG)나 PNG 파일 형식을 사용합니다. - 아이콘이나 로고처럼 작은 이미지일 ..

안녕하세요. 진득코딩입니다.  저번 시간에는 HTML의 구조에 대해서 알아보았습니다.  이번 시간에는 HTML에 기본적인 내용들을 입력하는 방법에 대해 살펴보도록 하겠습니다.  태그  태그는 제목을 나타내는 태그입니다. 태그를 사용하면 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시합니다.이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 바로 제목 태그입니다.h는 제목을 뜻하는 heading을 줄인 말입니다.n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있습니다.이 가장 큰 제목이고 , ,..., 의 순서로 크기가 작아집니다. 태그는 닫는 태그인 을 반드시 사용해야 합니다. 태그  태그는 텍스트 단락을 만드는 태그입니다.와 태그 사이에 텍스트를 입력하면 텍..