본문 바로가기

분류 전체보기

 (104)
8toZ 미니프로젝트 KPT회고 Keep git을 적극적사용 및 주어진 부분에 대한 적극적인 해결 git 적극적인 사용 및 맡은 임무에 대해 끝까지 해결하려는 책임감 자유로운 의사소통 자신의 역할을 충실히 이행함 어려워하는 부분이 있으면 서슴없이 도와주는 모습 Try 질문에 의한 답변이 아닌 본인 생각에 대한 의견을 전달 project 전반적인 구상이나 기능에 대한 아이디어를 말할때 본인이 생각하는 의견을 적극적으로 전달 충분한 기간을 가지고 구체적인 뼈대 구상후에 담당 부분 배분 댓글 수정이나 비밀번호 입력 시 자기소개 글 수정 같은 다양한 기능 추가 좋아요 버튼 기능을 추가하거나 시각적으로 주는 즐거운 부분을 추가하면 좋을 것 같음 Problem project 아이디어 및 기능에 대한 회의를 진행할때 소극적인 의견어필 생각한 의견을..
JSON 이해하기 및 Fetch 프로젝트에 적용하기 JSON에 대해서 이해하고 Fetch를 통해 JSON 데이터를 받아 프로젝트에 적용해 보기로 한다. 1. JSON 이해하기 서울시 OpenAPI를 통해 JSON을 쉽게 접해보기 서울시 미세먼지 OpenAPI url : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 크롬 익스텐션 JSONView를 설치하면 가독성이 좋아진다! JSON은 key:Value로 이루어져 있다. 클라이언트 →서버 get 요청 이해하기 GET: 통상적으로 데이터 조회(Read)를 요청할 때 POSt: 통상적으로 데이터 생성(Create), 변경(Updaate), 삭제(Delete)를 요청할 때 GET 방식으로 데이터를 전..
스파르타 플릭스 JQuery 적용하기 이번에 스파르타 플릭스에 JQuery를 적용하여 새로운 기능을 추가할 것이다. 1. 포스팅박스 숨기기 진행하기전에 꼭 head title 태그 아래에 추가하기 main div 태그에서 영화기록하기 버튼에 onclick 추가하기 영화 기록하기 mypostingbox div 태그에 id="postingbox" 추가하기 scipt 태그 생성 및 onclick="openclose()" 에 대한 메서드 생성 토글 달아주기 function openclose(){ $('#postingbox').toggle(); } 클릭 전(왼쪽)후(오른쪽) 사진 2. 카드만들기 mypostingbox 클래스 id="postingbox" 추가 각 input 태그에 id 추가 id="image" id="title" id="star" i..
JQuery 및 추억앨범에 적용하기 JQuery는 javascript를 미리 더 쉽게 작성해 둔 것이며, 라이브러리이다. javascript로도 충분히 기능을 구현할 수 있지만 코드가 복잡하고, 브라우저간 호환성 문제 등등.. 발생할 수 있기 때문에 사용한다. JQuery 사용 방법 위의 코드를 head 태그 사이에 넣어주면 사용할 수 있다. 이전 블로그에서 했던 나만의 추억앨범과 스파르타 플릭스에 JQuery를 적용할 것이다. 1. 추억앨범 alert 기능 사용해보기 추억 저장하기 버튼에 onclick 기능 추가 추억 저장하기 script 태그를 만들고 onclick에 대한 function 만들어주기 alert 추가해서 클릭시 알람테스트 function openclose(){ alert('안녕'); } 2. toggle기능 사용해보기 m..
Javascrip javascript: 브라우저가 알아들을 수 있는 언어 웹 브라우저에서 실행되는 스크립트 언어이다. 매우 다양하게 쓰인다. 서버에도 사용한다. 문법 변수 let: 블록 스코프로 함수 내부에서만 접근 가능한 변수 console.log() : 웹페이지 콘솔에 메시지를 출력 F12을 누르고 console로 변경하면 확인할 수 있다. let a = '안녕하세요'; console.log(a); 리스트: 같은 타입의 데이터와 순서를 가지고있는 집합체 let a = ['사과','수박','딸기','감'] console.log(a); 딕셔너리: 키(key) - 밸류(Value) let a = [ { 'name': '영수', 'age': 27 }, { 'name': '철수', 'age': 15 }, { 'name': '영..
스파르타 플릭스 만들기 내배캠 2주 차 강의에서는 스파르타 플릭스 만들기 프로젝트를 진행했다. Jumbotron 사용해 보기, Headers 사용하기 1. 배경 및 타이틀 꾸미기 부스트 트렙에서 Jumbotron 검색 파란 글씨 클릭 우클릭 검사 위 사진에 대한 부분 div 복사 body 아래에 붙여 넣기! Headers 추가하기 부트스트랩 사이트에서 Examples → Headers 클릭! 검사를 통해서 해당 부분 복사하기! body아래에 넣기! 이후 부스트 트렙에서 버튼 및 각종 꾸미고 싶은 기능을 추가한다. DOCTYPE html> 스파르타플릭스 @import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap'); * { font-family: 'Dong..
나만의 추억앨범 만들기 내배캠 사전캠프 1주 차에서는 나만의 추억앨범 프로젝트를 진행했다. 웹 페이지에 제목틀, 카드, 포스팅 박스를 만들었다. 1. 틀 만들기 DOCTYPE html> 나만의 추억앨범 @import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap'); * { font-family: 'Dongle', sans-serif; } .mytitle { height: 250px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url('https://images.unsplash.com/phot..
내배캠 로그인 페이지 만들기 사전캠프 1주 차 웹개발 강의에서는 웹 브라우저 작동원리, css, css에 필요한 폰트를 어떻게 사용하는지에 대해 공부하면서 간단한 프로젝트를 만들어 보았다. 1. 웹 브라우저 작동 중요한 3가지를 간단하게 표현하면 html은 뼈대 css는 꾸미기 JS는 움직이기 2. 웹페이지 만들기 시작 개발환경 개발환경 VS Code(Visual studio Code) HTML tag기초 코드 DOCTYPE html> 스파르타코딩클럽 | HTML 기초 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지..

티스토리툴바