이게 왜 돌아가지 이게 왜 돌아가지

주제: 반려동물을 키우거나 키울 예정인 사람을 위한 웹페이지 ​ 기획 의도 : 현재 반려동물을 키우는 인구가 점점 늘어나고 있다. KB금융지주 경영연구소가 발표한 ‘2021 한국반려동물보고서’에는 2020년 말을 기준으로 반려동물을 키우는 가구가 604만 가구로 전체 가구의 29.7%라고 한다. 따라서 늘어나는 반려동물 양육 가구를 위한 웹페이지를 만들어 도움이 되고자한다.( 참조: KB경영연구소 (kbfg.com) ) 첫 화면 ​ ​ "여기" 클릭 시 나오는 화면 ​ 1. 24시 동물병원 버튼 클릭 시 나오는 화면 ​ 2. 스마트폰 어플 버튼 클릭 시 나오는 화면 ​ 첫 화면에서 예비 집사 클릭 시 나오는 화면 ​

1. 2-1의 스마트폰 어플 페이지를 만들었다. 어플은 구글스토어 기준으로 6가지 어플을 작성했고, 어플에 대한 간단한 소개를 옆에 작성했다. 제목은 스마트폰 어플로 정했다. background image를 선택하여 코드를 작성해주고 body 태그의 font-size와 margin을 작성했다. a 태그도 지난 주 과정과 같이 작성했다. ​ class인 shadow를 지난 주 과정과 같이 작성했다. 본문에 들어갈 내용을 위해 새로운 클래스인 fontlist를 정의해 텍스트의 색과 정렬을 정해주었다. 새로운 클래스인 ffont을 정의해 각 어플에 대한 설명을 작성하는 텍스트의 크기와 색상을 정했다. 새로운 클래스인 title을 정의해 제목인 집사들을 위할 스마트폰 추천 어플은 가운데 정렬을 했다. ​ 본문의..

2-1의 24시 병원 기록 페이지를 만들었다. 클릭하는 페이지는 아직 미완성이다. 병원은 서울시에 위치한 연중무휴 24시 병원을 바탕으로 링크를 걸어 코드를 작성했다. 리스트 길이가 적어서 안 쓰고 작성했다. ​ 스타일을 마무리해주고 제목을 24시 병원으로 정했고, 폰트도 정했다. background image를 선택하여 코드를 작성해주고 body 태그의 font-size와 margin을 작성했다. a 태그도 지난 주 과정과 같이 작성했다. ​ class인 shadow를 지난 주 과정과 같이 작성했다. 본문에 들어갈 내용을 위해 새로운 클래스인 fontlist를 정의해 텍스트의 색과 정렬을 정해주었다. 새로운 클래스인 title을 정의해 제목인 24시 동물병원은 가운데 정렬을 했다. ​ 본문의 내용을 a..

2-2 첫화면 만들기 를 했다. ​ 2. 예비 집사입니다 의 첫 화면 만들기 2-1과 비슷하게 만들어준다. 대신 '예비집사님성함'만 만들어준다. 결과) ​

2-1 만들기 를 했다. ​ 2. 지금 댕냥이와 살고 있어요 의 첫 화면 만들기 1처럼 폰트를 설정해준다. ​ 배경을 처음화면과 다른 이미지로 설정해주고 1처럼 margin, font-size 등을 설정해준다. 1과 달라진 점은 버튼을 없애고 class인 .ffont 를 추가해준 것이다. 집사이름. 반려동물이름, 반려동물의 생년월일을 쓰는 데 도움을 줄 class이다. ​ 스타일을 마무리해주고 본문을 썼다. 일단 제목을 으로 적어주었다. 내가 하고 싶은 게 직접 이름과 생년월일을 입력받는 건데 아직 배우지 않아서 인터넷을 참고해 div와 label을 사용했다. 마지막 '완료했을 때~ ' 는 h5로 크기를 맞춰주었다. '생일'은 추후 '반려동물 생일' 로 바꿔주었고 다음 링크를 만들지 않아 마지막 a hr..

지난 주에 정한 계획서를 바탕으로 1주차: 처음 보이는 화면 만들기, 2-1 만들기 를 했다. ​ 1. 처음 보이는 화면 만들기 제목은 '모여봐요 집사의 숲'이다. 기본 폰트가 너무 딱딱해보여서 폰트도 바꿔줬다. (구글폰트에서 link 복붙+ css에서 쓸 수 있도록 font-family 복붙) ​ button 2 전까지 처음 나오는 화면의 배경화면을 동물의 숲 이미지로 나타내주었다. (의 body 태그의 backgroung image) a 로 기본 텍스트 색은 초록색으로 만들고 텍스트 데코레이션은 없는 것으로 설정했다. class인 .shaow로 그림자를 설정해줬다. class인 .button으로 지금 집사라는 버튼을 꾸며줬다. margin 과 padding, width, font-size, font-..