사업개발캠프/스타트업 BD를 위한 웹 개발 기초와 지식

웹 개발 기초와 지식 - jQuery, Bootstrap

leo._. 2024. 11. 7. 10:00
반응형

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 함께 사용하면 동적이고 인터랙티브한 웹사이트를 효율적으로 개발할 있습니다.

반응형