우주바다 개발일지

과제 : 나만의 메모장 카드들에 들어갈 데이터를 불러오는 api 적용하기. frontend > index.html 파일로 작업 (나만의 링크 메모장) *코드 스니펫 1. api 2. 로딩 후 바로 실행 $(document).ready(function () { listing(); }); function listing() { console.log('실행확인'); } 로딩 후 바로 실행하는 코드 붙여 넣고 콘솔 창에서 연결 확인. console.log 대신 ajax 기본 코드. $(document).ready(function () { listing(); }); function listing() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/post",..

frontend 폴더에 02_ajaxquiz01.html 파일 만들고 시작. 기본 골격 붙여 넣고, 서울시 실시간 데이터 페이지 참고하면서 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 버튼 누르면 실시간 업데이트 되는 기능 만들기. 내가 작성한 코드랑 강의 코드. 작동도 잘 되고, 보기에는 같은 내용을 한 줄에 쓴 것 같은데 이렇게 써도 되는 건지 모르겠어서 일단 내 코드는 주석으로 남겨놨다. function q1() { $('#names-q1').empty(); $.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c..

[포스팅 박스 여닫기 버튼 구현] 스크립트에서 연습했던 hey( ) 삭제. (홀짝 함수) 포스팅 박스 열기 버튼에 적용된 onclick = "hey( )" 도 이름 변경. ( open_close) alert로 연결 확인. 기억에 의존해서 한 번 짜 본 코드. 작동 x if문부터 이미.. 불가능을 직감했지만 그냥 막 써봤다. *제이쿼리는 자바스크립트의 일종 (라이브러리)이므로 스크립트 태그 안에서 활용할 수 있다. 오답 주석처리해두고 내용 입력. let status = $('#posting_box'). css('display'); console.log(status); 콘솔 창 열고 버튼 누르면 display 값인 block이 찍힌다. 완성본. if 조건문 전에 let으로 박스의 display 상태를 나타낼..

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

주소와 코멘트 입력, 저장하면 카드로 생성되는 form 부트스트랩 > forms에서 찾아보기. *참고 : 태그는 로 바꿔서 사용 (정확한 이유는 모르지만 자유롭게 쓸 수 있는 div 태그로.) posting-box 이름 붙이고 css. border-color가 있길래 적용해봤지만 무반응. 자동완성에서 이것저것 찾아봐도 잘 모르겠다. 그래서 구글링. 바깥 선 색이니까 outline color로 검색 대충 맞는 것 같아 적용해보니 이것도 무반응. 답을 확인해보니 검색어는 css border. 번역기 돌려보니까 테두리는 border. outline은 윤곽, 개요로 뉘앙스가 좀 다르다. 검색할 때 참고하기 좋은 대표 사이트 2개. [1] MDN mozilla (css border) https://develope..

예제. 상단 영역 글씨 바꾸고 구글 폰트에서 원하는 폰트 적용. (+이름이 좀 어색한 것 같아서 '나만의'로 바꿨다.) 카드에 링크 제목, 코멘트 줄 추가하고 css로 색 변경 여기까지 했는데 제목을 링크로 거는걸 까먹었다.. a태그로 href 걸고... 글이 링크가 되는 게 뭐더라.. dev tool 찬스. a태그 쓰는 법을 제대로 기억 못했나보다. 글씨를 좀 크게 하고 싶어서 링크 걸고, css로 font-size 조절했다. 마지막으로 제목, 카드제목 글씨 두껍게. font-weight : bold; 까지하고 끝!

만들 예제. 부트스트랩에서 컴포넌트를 가져다 쓰면서 똑같이 만들어보기. 일단 강의대로 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; 배경색 제거. 나는 저..

[*] 상위 태그를 부모태그, 하위태그를 자식태그라고 한다. 자식태그는 부모태그의 영향을 받는다. [*] css로 꾸밀때, 대상이 무엇인지 정확히 지목해야한다. [ CSS사용법 ] [1] 꾸밀 대상의 앞쪽 태그 안에 class="이름" 로 이름을 붙인다. [2] head 태그 내부에 style 태그를 만들고 그 안에 .이름{ 꾸밀내용} 으로 명령.