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

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

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

안녕하세요. 진득 코딩입니다.  웹 문서에서는 내용 전체뿐만 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있습니다.  배경에는 단순한 색상이나 이미지를 사용할 수 있습니다.  또한 그라데이션을 넣거나 색의 투명도를 조절하여 다양한 스타일을 적용할 수 있습니다.  이번 시간에는 웹의 바탕을 꾸며주는 배경 스타일에 대해 살펴보도록 하겠습니다. background-color 속성  background-color 속성으로 배경을 넣고 싶은 요소의 스타일 규칙을 만들어 배경색을 지정할 수 있습니다.background-color는 16진수나 rgb값 또는 색상 이름을 사용하여 지정합니다.색상을 세밀히 조절하고 싶다면 16진숫값을 사용하고, 투명도도 함께 조절하고 싶다면 rgba 표기법을 사용합니다. ..

안녕하세요. 진득코딩입니다.이번 시간에는 CSS 박스 모델에 대해 알아보고 이를 이용해 레이아웃을 구성하는 방법에 대해 살펴보도록 하겠습니다. CSS 박스 모델 CSS 박스 모델은 웹 문서의 내용을 박스 형태로 정의하는 방법입니다.이 박스 모델이 모여 웹 문서를 이룹니다.박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있습니다.블록 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다.블록 레벨(block-level) 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킵니다.한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다.따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.대표적인 태그로 ..

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