1. JQuery란? • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리 - Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야해서, JQuery라는 라이브러리가 등장하게 됨. • JQuery와 Javascript 코드 비교해보기 - Javascript로 길고 복잡하게 써야 하는 것을 document.getElementById("element").style.display = "none"; - JQuery로 보다 직관적으로 쓸 수 있음 $('#element').hide(); 2. JQuery 사용하기 • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부름 - jQuery CDN 부분을 ..

1. 자바스크립트란? • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 - 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + Javascript를 줌 - Java와 Javascript는 아무런 관련이 없음 2. 자바스트립트 HTML연결, 버튼을 클릭하면 경고창이 뜨게하기 • 함수를 만들어두기 function hey(){ alert('안녕!'); } - 안에 로 공간을 만들어 작성함 • 버튼에 함수를 연결하기, 버튼을 누르면 함수가 불림 영화 기록하기 - 직독직해하면, (1)버튼을 클릭하면, (2)hey를 불러라! (3)alert(’안녕’)을 실행하는 것 3. Javascript 기초 문법 배우기 • 화면에 미리 찍어보는 console.log() 영화 기록하기 • ..

1. 우리가 만들 것 2. 우선 큰 박스 먼저 만들기 • 그림자 효과 : box-shadow: 0px 0px 3px 0px gray; • 안쪽으로 띄우기: padding: 20px; 3. 영화 URL • Form 의 Floating Labels 참고 4. 코멘트 URL • Form 의 Floating Labels의 Textareas 참고 5. 기록하기, 닫기 버튼 • Button 두 개를 묶을 div를 만들어 display: flex 주기(display: flex; flex-direction: row; align-items: center; justify-content: center;) • Buttons 참고 6. 완성코드 내 생애 최고의 영화들 영화 기록하기 영화URL 코멘트 기록하기 닫기 영화 제목이 ..

1. bootstrap이란? 「부트스트랩이란? 예쁜 CSS를 미리 모아둔 것!」 2. bootstrap 시작 템플릿 「남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일함. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐」 이걸로 시작해보죠! • 부트스트랩이 미리 css를 작성해뒀기 때문에 간편하게 예쁜 버튼이 생김. 3. bootstrap 본격적으로 써보기 「남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는게 좋음.」 • 카드 복사해서 붙여넣기 ① 코드스니펫 카드 붙여넣기 https://getbootstrap.com/docs/5.0/components/card/ Cards Bootstrap’s cards ..

1. 주석달기 • 주석은 언제 사용하는가? - 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 - 코드에 대한 간단한 설명을 붙여주고 싶을 때 사용 • 주석을 붙여놓으면, 브라우저/ 컴퓨터가 읽지 않음. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것 • 단축키 : 주석처리하고 싶은 라인들은 선택 -> ctrl(또는 command) + / (슬래시)

1. 구글 웹폰트 입히기 • 구글 웹폰트 ① 크롬 브라우저에서 google fonts 검색하기 ② 옵션에서 language를 korean으로 바꾸기 ③ 원하는 폰트 클릭 ④ 폰트 두께 결정 후 클릭 ⑤ 화면 오른쪽의 아이콘을 클릭하여 공유화면 열어주기 ⑥ 오른쪽의 Use On Web 탭에서 import 버튼 클릭 ⑦ 태그 안에 묶인 코드만 복사해서 style태그 안에 넣음 @import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap'); ⑧ CSS rules to specify families 탭의 코드를 복사해서 전체적용(*{})css에 넣으면 완성 * { font-family: 'Hahmlet', serif; }