웹 개발 기초와 지식 - jQuery, Bootstrap
jQuery
jQuery는 JavaScript 라이브러리로, 웹 페이지에 동적 기능을 쉽게 추가할 수 있게 해줍니다.
jQuery 기본 구문
$(selector).action();
주요 메소드와 기능
1. HTML/DOM 조작
- `.html()`: HTML 요소의 내용을 가져오거나 설정
- `.append()`: 선택한 요소의 끝에 새 콘텐츠 추가
- `.prepend()`: 선택한 요소의 시작 부분에 새 콘텐츠 추가
2. 이벤트 처리
- `.click()`: 클릭 이벤트 처리
- `.dblclick()`: 더블클릭 이벤트 처리
- `.mouseenter()`: 마우스 진입 이벤트 처리
3. 효과 및 애니메이션
- `.fadeIn()`, `.fadeOut()`: 페이드 효과
- `.slideUp()`, `.slideDown()`: 슬라이드 효과
- `.hide()`, `.show()`: 요소 숨김/표시
4. AJAX 기능
- `$.ajax()`: 비동기 HTTP 요청 수행
Bootstrap
Bootstrap은 반응형 웹 디자인을 위한 프론트엔드 프레임워크입니다.
Bootstrap의 특징
1. 반응형 그리드 시스템
2. 미리 정의된 CSS 클래스
3. JavaScript 플러그인 제공
4. 브라우저 호환성
주요 컴포넌트 및 기능
1. 그리드 시스템
- 12칼럼 구조
- 반응형 클래스: `.col-`, `.col-sm-`, `.col-md-`, `.col-lg-`, `.col-xl-`
2. 타이포그래피
- 제목, 단락, 목록 등의 기본 스타일
3. 폼
- 입력 필드, 체크박스, 라디오 버튼 등의 스타일
4. 버튼
- 다양한 크기와 색상의 버튼 스타일
5. 내비게이션
- 네비게이션 바, 드롭다운 메뉴 등
Bootstrap 사용법
1. CDN을 통한 연결 또는 파일 다운로드
2. HTML에 Bootstrap CSS와 JS 파일 연결
3. 미리 정의된 클래스를 HTML 요소에 적용
Bootstrap을 사용하면 반응형 웹 디자인을 쉽게 구현할 수 있으며, 일관된 디자인을 빠르게 적용할 수 있습니다.
jQuery와 함께 사용하면 동적이고 인터랙티브한 웹사이트를 효율적으로 개발할 수 있습니다.