본문 바로가기

전체 글409

[ HTML ] box-sizing 및 웹개발 종합반 강의 정리 오늘 한 것 팀 프로젝트 CSS 고치기 영화사이트 만들기 리뷰 회고 내가 맡은 부분을 만들고 push를 한다고 끝이 아니다. 팀원들이 만든 부분과 내가 만든 부분을 합쳤을 때 내가 만든 부분이 다른 분들보다 넓이가 길었다. 딱히 넓이를 지정해준 것도 아니고 오히려 width:100%로 설정을 해뒀는데 왜 넘어가는지 몰랐었다. 이 문제를 해결하기 위해 여러 가지 바꿔 보며 깨달았다. box-sizing: border-box를 설정하지 않아 padding의 값 때문에 width가 넓어졌다. box-sizing: border-box를 설정해줌으로써 바로 문제가 해결되었다. 그리고 내 화면에서는 이쁘게 보이지만 다른 화면의 사이즈도 생각해봐야한다. 팀원 중 한 분이 화명이 넓어서 내가 구현한 카톡 느낌의 구조가.. 2022. 11. 3.
[ 스파르타 / SQL ] DBeaver 설치 방법 & SQL절 예제 DBeaver 다운로드 링크 Download | DBeaver Community Download Tested and verified for MS Windows, Linux and Mac OS X. Install: Windows installer – run installer executable. It will automatically upgrade version (if needed). MacOS DMG – just run it and drag-n-drop DBeaver into Applications. Debian package dbeaver.io Mac or Windows 다운로드 프로그램 실행 방법 프로그램 실행 후 상단 왼쪽 클릭 MySQL을 선택한 후 다음 클릭 Server Host, Usernam.. 2022. 11. 3.
[ 스파르타 / Web ] 웹개발 종합반 2주차_#3 (API) GET 데이터를 조회(Read)를 요청할 때 사용한다. POST 데이터를 생성(Create), 변경(Update), 삭제(Delete)요청 할 때 사용한다. 문제 아래의 사진에서와 같이 업데이트 버튼을 누를 시 미세먼지의 수치가 40 이상은 위험으로 나타내기 위해 빨간색으로 표시되게끔 만들어야 한다. 미세먼지 Open API http://spartacodingclub.shop/sparta_api/seoulair 위의 미세먼지 Open API 링크로 들어가면 아래와 같은 데이터가 보인다. 하지만 아래의 데이터는 보기가 힘들다. JSONView API 데이터 파일을 더 이쁘게 보기 위해서 JSONView를 깔아 주었다. (크롬에서 설치 가능) JSONView 브라우저에서 JSON 문서를 보세요. chrome.. 2022. 11. 3.
[ 스파르타 / Web ] 웹개발 종합반 2주차_#2 (jQuery) jQuery와 JavaScript를 사용하여 다음과 같은 기능들을 구현해 보았습니다. 문제 전체 코드 jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들기 이름 붙이기 다지우기 세종대왕 임꺽정 2022. 11. 3.
[ 스파르타 / Web ] 웹개발 종합반 2주차_#1 (영화 후기 사이트) 2주 차에서는 jQuery, AJAX를 이용해 몇 가지 간단한 프로젝트를 만들었다. jQuery란 HTML의 DOM 조작과 이벤트 제어 그리고 Ajax 등 웹 화면을 다루는 자바스크립트 라이브러리이다. 우리는 JavaScript 를 기반으로 화면을 그려낼 때가 있다. 물론 JavaScript만 써도 충분히 화면 작업이 가능 하지만 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리가 존재하는데 이게 바로 JQuery이다. JavaScript 를 보다 쉽게 쓰기 위해 사용하는 쿼리라고 보면 된다. jQuery 사용방법 내 생애 최고의 영화들 영화 기록하기 영화 URL 별점 --선택하기-- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 Movie .. 2022. 11. 3.
[ 스파르타 / Web ] 웹개발 종합반 1주차_#4 (영화 후기 사이트) 앞의 포스팅을 이어서 영화 후기 사이트를 계속 만들어 보았다. 이미 한번 만들어본 사이트이지만 영상을 보면서 이해했다고 생각하는 것과 보지 않고 직접 만들어보는 건 천지 차이인 것 같다. 다시 한번 만들어보면서 시행착오를 겪으며 더 많이 배우게 되는 것 같다. Bootstrap 시작 템플릿 [ 스파르타 / Web ] 웹개발 종합반 1주차_#3 (영화 후기 사이트) 사용한 것 HTML CSS Google Font Font Awsome Bootstrap Bootstrap 시작 템플릿 Let's Go!!! Bootstrap 컴포넌트 Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support fo.. 2022. 11. 3.
[ 스파르타 / Web ] 웹개발 종합반 1주차_#3 (영화 후기 사이트) 사용한 것 HTML CSS Google Font Font Awsome Bootstrap Bootstrap 시작 템플릿 Let's Go!!! Bootstrap 컴포넌트 Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 위의 링크에 들어가면 Components -> Card에서 아래와 같은 모양을 가진 틀을 사용하기 위해 코드를 가지고 와서 html에 코드를 넣어준다. Bootstrap에서 들고온 코드를 html 파일에 추가해준다. 그러면 아래와 같은 결과가 나온다. 이제 가져온 틀에서 .. 2022. 11. 2.
[ 스파르타 / Web ] 웹개발 종합반 1주차_#2 (영화 후기 사이트) 사용한 것 HTML CSS Google Font Font Awsome CSS linear-gradient linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 사진이 밝아서 위에서 아래로 갈수록 어둡게 만들어주었다. 1로 갈수록 어두워지고 0으로 갈수록 밝아진다. 아래의 코드에서 첫 번째 rgba가 아래를 가리키고 두 번째 rgba가 위를 가리킨다. background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/ images/bojnice-castl.. 2022. 11. 2.
[ HTML ] CSS - Button 오늘 한 것 개인 소개 페이지 CSS 수정 개인 페이지 만들기 button 개인 페이지에 sticky 버튼을 구현해 보았다 기본 sticky 버튼 구현 .sticky { position: -webkit-sticky; position: fixed; top: 130px; left: 140px; padding: 10px 45px; background-color: transparent; border-radius: 30px; border: 5px solid rgba(246, 210, 125, 0.9); font-size: 15px; } .sticky a { color: rgb(74, 73, 73); text-decoration: none; } hover을 할 경우 버튼의 사이즈가 커지게 만들었다. .sticky:.. 2022. 11. 2.
728x90

티스토리툴바