안녕하세요. 진득 코딩입니다.  최근 웹페이지를 PC 브라우저 환경이 아닌 모바일 브라우저 환경에서 보는 유저들이 늘어났습니다.  이는 홈페이지를 만드는 개발자 입장에서는 모바일 유저들의 편의성을 고려하게 되었습니다.  이번 시간에는 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여주는 '반응형 웹 디자인'에 대해 알아보도록 하겠습니다. 반응형 웹 디자인  반응형 웹 디자인은 화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를 구현하는 것을 말합니다.즉, 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 줍니다.뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.뷰포트를 지정하면 접속한 기기의 화면에 맞..

안녕하세요. 진득코딩입니다.  지난 시간까지 CSS를 사용해서 웹 요소에 시각 효과를 추가하는 방법에 대해 살펴보았습니다. 이번 시간에는 애니메이션 동작을 어떻게 만드는지 알아보도록 하겠습니다.  애니메이션 동작을 알면 웹 사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수도 있습니다. 예전에는 이런 기능을 JavaScript를 사용하여 처리하였지만 이제는 CSS만으로도 가능합니다.  변형 물체의 크기나 형태의 위치를 바꾸는 것을 '변형', 또는 '트랜스폼(transform)이라고 합니다.웹 문서에서 CSS 변형을 이용하면 사용자의 동작에 반응해 텍스트나 이미지 등을 움직이게 할 수 있습니다.transform과 변형 함수 CSS에서 변형을 적용하려면 transfrom 속성과 변형 함수 이름을 함..

안녕하세요. 진득 코딩입니다.  간단한 웹 문서는 기본 선택자만으로도 스타일을 적용할 수 있습니다.  하지만 소스가 길어지면 스타일을 지정할 때 id와 class가 계속 늘어나므로 그 이름을 모두 기억하기는 쉽지 않습니다.  이번 시간에는 연결 선택자와 속성 선택자를 사용하여 소스의 위치나 속성값에 따라 특정 요소를 쉽게 선택하는 방법을 알아보도록 하겠습니다.  연결 선택자 연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정합니다.선택자를 둘 이상 조합하므로 '조합 선택자', '콤비네이션 선택자', 또는 '콤비네이션 셀렉터' 등으로도 부릅니다.하위 선택자 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택..

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