우주바다 개발일지

1일부터 18일까지 웹개발 종합반 포스팅하면서 복습했다. 3주 가까이했으니 진도도 3주 차까지는 끝낼 줄 알았는데 복습이랍시고 응용하고 안 해본 거 시도하다 늦어지고 있다. 강의 기간 끝나서 복습노트에만 의존하다 보니.. 더 어렵기도 하고.. 그래도 어떻게든 해나가던 중 제일 관심 가지던 게임 개발 강의가 얼리버드 할인 중이래서냅다 카드 긁었다 ㅋㅋㅋㅋ 원가에서 거의 절반 깎았다. 포인트 모아놓은거 다 쓰고.. 완주자 쿠폰 싹싹 긁어서 . 국비 아니고 자비로 하는 강의라서 그런지 수강 기간 내에 완강하면 평생 소장이라서 다행이다! 열심히 5주 차 과정 끝내고 , 웹이랑 앱은 느긋하게 복습해야지. 너무 조바심 내지 말고 꾸준히만 하자!

frontend 폴더에 02_ajaxquiz03.html 파일 생성. 내용 지우고 골격 붙여넣기. [예제] 고양이 api , 완성 예시 페이지 참고해서 만들기. Hint : 구글 검색 - jQuery 이미지태그 src 바꾸기 (분명 힌트를 줬지만 ㅋㅋㅋ복습이랍시고 검색 안 하고 혼자 해보다 무한 물음표 지옥에 빠져있다. 근데 그게 즐거운 estj ..^^) 일단 api 부터 열어보기. 새로고침 할 때마다 주소가 바뀌고 list[ { dictionary} ] 구조로 되어있다. 이제 html 전체 코드 위에서부터 보기.. 그런데 css에 처음 보는 게..(견딜수 없음) 인간은 모르는 걸 보면 본능적으로 불편합니다. ( 이고잉님 말씀 음성지원 ㅋㅋㅋㅋ) type 이건 뭐고.. 왜 신경쓰이게 줄이 그어져있으며...

과제는 homework 폴더 안에서 진행. homework 폴더 열기 그 안에 index.html 파일 만들어서 시작 템플릿 붙여 넣고 시작. *과제 내용 ▼부트스트랩 홈페이지▼ 참고해서 예시 이미지처럼 레이아웃 만들고 주문하기 버튼 누르면 '주문이 완료되었습니다.' alert 하기. https://getbootstrap.com/docs/4.0/components/alerts/ *이미지 : div로 영역 만들고 background에 이미지 씌워도 되고, img 태그만 사용해도 됨. *주문하기 버튼처럼 text 속성을 가진 컴포넌트 가운데 정렬: 가로 길이 설정 , margin: auto; 해서 안되면 display : block ;으로 설정할 것. img 태그로 한 것과 / div 태그로..

만들 예제. 부트스트랩에서 컴포넌트를 가져다 쓰면서 똑같이 만들어보기. 일단 강의대로 4.0 버전으로 진행. 드래그해서 복사하거나 copy 버튼으로 복사. body 태그 안에 붙여넣기. 다음은 카드에서 같은 모양 찾기. 아래로 쭉 내리면 Card columns 있는데 그 묶음들 중 필요한 모양의 카드만 사용. 불러왔을 때 다르게 뜨는 이유는 가져다 쓴 코드 안에 이미지 주소가 비어있어서. 나중에 사진 넣으면 된다. 그 전에 필요한 카드만 자를 때, 어디까지 잘라야할 지 보려면 파이참에서 직접 지우면서 봐도 되지만 작업 전, 개발자 도구(우클릭 - 검사 )로 미리 확인하고 지우는 게 더 안전하고 마우스 댔을 때 구역 표시되니 편함. 필요한 카드만 남기고 삭제 이미지 태그 안의 src =" 여기에 주소 넣기..

부트스트랩은 CSS를 가져다 쓸 수 있는 라이브러리. ▼ 부트스트랩 홈페이지 ▼ https://getbootstrap.com/ 홈페이지에서 시작하기를 누르면 소개 페이지가 나온다. 매번 업데이트되고 있으므로 쓰려는 버전을 선택하고 introduction 페이지에서 링크를 복사, head에 import 해야 한다. ▼ 부트스트랩 4.0 ▼ https://getbootstrap.com/docs/4.0/components/alerts/

일단 여기까진 혼자 만들었는데.. div로 만든 공간을 이미지로 대체하는 법이 기억안나서 정답 확인. background-color 지우고 아래처럼 3줄 추가! 영역을 이미지로 덮을때는 이 3가지가 세트처럼 쓰인다. background-image background-size background-position 이미지는 구글링해도 되지만.. 안전한 무료이미지 쓰고싶어서 픽사베이에서 긁어왔다. (픽사베이 최고!) 다음은 전체 가운데 정렬 (웹 페이지 내에서) 일단 전체를 감싸는 div 태그 생성 배경 임시로 깔아보면 전체 영역은 기본적으로 가로를 최대로 채우고 있음 여백을 만들기 위해 로그인 페이지 만큼의 가로 길이를 정해주고 남는 양쪽 여백을 동등하게 하기. margin: auto; 배경색 제거. 나는 저..

1. 네이버 해킹해보기. 나한테만 보이고, 새로고침하면 다시 원래 데이터 받아옴. 2. 클라이언트가 서버에 요청하면 데이터를 보내주고 html이 뼈대, css가 디자인 js가 동적인 부분을 그려준다. 3. 특정 부분만 받아올 경우 (실시간 업데이트되는 데이터 등) db에서 그 부분만 json 데이터로 가져온다. 4. 전체 수업에서 배울 내용들 소개 복습해봤다고 네이버 말고 강의 화면 해킹 ㅋㅋㅋ 이제 처음만큼 놀랍진 않지만 여전히 재밌다.

아직 웹/앱 복습을 못했지만 1시간 밖에 안 되기도 하고 기한이 제일 짧으니 얼른 완강 해야지! 하고 하루만에 완강한 덕담 패키지! 처음 이벤트 문자 받았을 때 호랑이 옷 입은 쌤 보고 함박웃음 ㅋㅋㅋ너무 귀엽 여러모로 부담 없이 들을 수 있어서 재밌었다. 알람 받고 좀 지나서 들어왔더니 진도 사우르스한테 잡혀서 이러고 있다 ㅋㅋㅋㅋ 미안해.. 0주차엔 튜토리얼뿐. 심리적 장벽 제로 ㅋㅋㅋ 최근 유행했던 산타파이브 팀의 트리꾸미기가 생각나는 프로젝트. 오브제를 고른다거나 로그인 시스템 등등 부가 기능 없이 훨씬 단순한 편이라 부담 없을 것 같았다. 이벤트로 15개 이상 받으면 뭔가 준다는데.. 테스트 메세지 리셋 빼먹은 난 어떻게 되는거지.. 둘 다 이미 되어있어서 사전과제도 슥삭 고작 0주차의 튜토리얼..