우주바다 개발일지

임베디드 요소 embedded :끼워넣은, 내장된 단어 자체의 의미는 위와 같다. html에서 임베디드 요소란 직접 코드를 작성하는 것이 아니라, 외부의 소스를 가져와 삽입하는 요소를 뜻한다. 대표적으로 , , , , 태그가 여기에 속한다. 태그와 파일 경로 이미지 태그는 빈 태그, 단일 태그로 닫는 태그 없이 사용한다. 의 src 속성 img 태그가 가지는 가장 중요한 특성은 src 이다. 필수 속성이며 이미지의 경로를 적는다. src에 적는 주소로는 절대 경로와 상대 경로가 있다. 절대 경로(Absolute path) 어디에서든 동일한 결과를 보여준다.(구글 검색으로 찾은 이미지 경로 등) 루트 디렉토리를 포함하며 ( C:\를 항상 포함 ) URL 에서는 http:// 를 항상 포함한다. 서버 주소가..

영화 제목 웹스크래핑. 네이버 영화 1. bs4 설치 interpreter에서 bs4 검색해서 설치. *about beautifulsoup4 2. 크롤링 기본 세팅 import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers) soup =..

과제 : 나만의 메모장 카드들에 들어갈 데이터를 불러오는 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",..

과제 : 1주 차에 만들었던 원페이지 쇼핑몰에 환율정보 추가하기. *강의에서 제공되는 코드 스니펫 2개 활용. (api 링크, 로딩 되자마자 호출하는 ajax 코드.) 5주 차에 서버 사서 올리는 것까지 끝낸 폴더라서 이것저것 있지만 다 무시하고 복습 파일로 진행! homework > index.html 로 작업했었고 (복습 파일 명은 fake_index.html) 스크립트 태그 자체가 없으니 만들고 그 안에 로딩과 동시에 불러오는 코드 태그 안에 붙여넣고 시작. $(document). ready(function( ){ }) *괄호 짝 주의 $(document).ready(function(){ alert('로딩 완료!') }); 예시 이미지. 브라우저 열어서 아까 연결한 alert 잘 뜨는 거 확인하고 ..

연습용 html 파일 생성. 02_jquery 이미 있으니 복습용으로 _review 붙여서 만들었다. 내용 다 지우고 기본 골격 붙여넣고 시작, Quiz. 완성 페이지를 참고해서 기능 구현하기. 원본 퀴즈 페이지 단순하게 내용 편집 후, 문제 풀이 시작! 원래는 이름 붙이는 건데 끝말잇기로 만들면 재밌을 것 같아서 바꿔봤다. 1번 문제 빈칸에 입력한 값을 가져와서 담을 변수를 정해야하는데 let $('#아이디').val() = 'content' 라고 해서 막혔다. 정답은 반대로 입력해야 함. 변수를 선언하는 거니까 변수 이름 먼저! let content = $('#아이디').val(); let 변수이름 = 가져올 값 2번 문제 힌트에 includes 사용하라는데 .includes 로 썼던 것 같아 기억나..

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

CSS에 부트스트랩이 있다면 JavaScript에는 JQuery가 있다. 쉽게 가져다 쓸 수 있는 오픈소스 자바스크립트 라이브러리. *부트스트랩과 마찬가지로 상단에 import 해야 사용할 수 있다. * 길게 써야하는 코드를 짧고 직관적으로 쓸 수 있게 해준다.

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

자바스크립트 : 브라우저가 알아들을 수 있는 유일한 프로그래밍 언어. head 태그 안에 를 만들어 사용. 파이썬 등 다른 언어로 만드는 것도 가능하겠지만, 사용하지 않는다. 웹의 등장과 함께 최초의 언어로 쓰이며 표준으로 굳어졌기 때문. 관습적으로 css 밑에, 아래 형식으로만든다. function 이름( ){ 명령할 내용; } 안녕이라는 경고창을 띄우는 함수를 만들었다. 이름은 hey() 이걸 저장 버튼에 적용 태그 안에 onclick = "hey()" 입력. *onclick: 클릭했을 때 " "안의 내용을 실행함. 개발자 도구 - 콘솔 창에서 함수 이름을 입력, 엔터 누르면 실행된다. 파이참만 쓰는 것 보다 편리하고 빠르니 활용하기. 영역을 클릭하면 해당하는 코드로 바로 이동할 수 있고 명령이 잘 ..

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