배운내용 정리 (29) 썸네일형 리스트형 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도 각자의 역할이 있죠. 비중은 작지.. 이전 1 2 3 4 다음
