ONLINE CLASS

반응형웹 + 부트스트랩 [전문과정]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

반응형웹이 적용된 페이지를 분석하고 CSS 코딩을 따라 하며 화면 구성 방식을 익힙니다. 여러 실제 적용 사례에서 레이아웃을 수정하는 경험을 쌓은 뒤 부트스트랩의 캐러셀과 버튼, 모달 요소를 다루는 실습으로 이어갑니다. 포트폴리오 영역과 하단 메뉴를 수정하면서 기존 페이지의 요소와 스타일을 목적에 맞게 조정하는 제작 과정을 배웁니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기
ALZIO DEEP GUIDE

반응형 웹과 Bootstrap을 더 깊게 이해하기

35강에서 반응형 웹 사례와 코딩을 익히고 WordPress 환경·Bootstrap 배치·폼·내비게이션·상호작용과 포트폴리오 수정으로 이어집니다. 강의의 구형 클래스와 현재 Bootstrap 5 계열을 구분합니다.

공식 기술정보 확인35강 커리큘럼 연결2026 현재 기술정보

반응형웹 + 부트스트랩 [전문과정] · 35강 · 25시간 17분

01

반응형 웹과 Bootstrap은 무엇인가

반응형 웹은 화면 폭과 이용 환경에 맞춰 문서의 배치와 표시를 조정하는 설계입니다. Bootstrap은 그리드·스타일·상호작용 구성요소를 제공하는 프런트엔드 도구입니다. 프레임워크를 넣었다고 모든 콘텐츠가 자동으로 읽기 쉬워지는 것은 아니며 긴 글·이미지·입력 영역을 실제 폭에서 확인해야 합니다.

02

관련 플랫폼과 개발도구의 관계

HTML은 구조, CSS는 배치와 표시, JavaScript는 상호작용에 관여합니다. Bootstrap은 이들 위에서 사용할 규칙과 구성요소를 제공합니다. WordPress 같은 콘텐츠 관리 도구와 동일한 역할이 아니며 템플릿·콘텐츠·프레임워크를 각각 관리해야 합니다.

03

반응형 웹과 Bootstrap의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

그리드

컨테이너와 행·열로 배치를 구성합니다. 조건별 열 폭을 정하면 같은 콘텐츠를 넓은 화면과 작은 화면에 다르게 놓을 수 있습니다. 중첩과 여백 때문에 예상 폭이 달라지는지도 확인합니다.

강좌에서 직접 학습 · 22~23강

반응형 기준

화면 조건에 따라 배치와 표시 규칙을 바꿉니다. 기기 이름보다 실제 사용 가능한 폭과 콘텐츠를 기준으로 봅니다. 한 폭에서 정상인 화면이 모든 폭에서 정상이라는 뜻은 아닙니다.

강좌에서 직접 학습 · 1~19·23강

폼과 버튼

입력과 실행 요소를 일관된 스타일로 구성합니다. 작은 화면의 터치 영역과 오류 표시를 함께 확인해야 합니다. 디자인 적용과 입력 검증은 다른 작업입니다.

강좌에서 직접 학습 · 24~26강

내비게이션

메뉴와 화면 이동 구조를 제공합니다. 접힌 메뉴·고정 메뉴와 본문이 서로 가리지 않는지 확인하면 모바일 이용이 편해집니다. 링크 목적과 키보드 접근도 표시 모양과 함께 점검합니다.

강좌에서 직접 학습 · 26·32강

모달·드롭다운·캐러셀

추가 표시·선택·순환 콘텐츠를 구성합니다. 열기·닫기·선택·전환의 상태를 확인해야 합니다. 구성요소와 데이터 속성의 이름은 Bootstrap 세대에 따라 다를 수 있습니다.

강좌에서 직접 학습 · 27~31강

템플릿과 사용자 스타일

기존 템플릿을 내용과 목적에 맞게 수정합니다. 공통 규칙과 별도 스타일의 적용 순서를 확인하면 수정한 색상·여백이 덮어써지는 이유를 찾기 쉽습니다. 프레임워크의 원본을 무조건 바꾸기보다 변경 범위를 구분합니다.

강좌에서 직접 학습 · 31~35강
04

이 과정의 실제 작업 흐름

1~19강은 반응형 웹의 개념·사례·코딩을 연결하는 구간입니다. 20~23강은 WordPress·Bootstrap 시작과 컨테이너·행·열·중첩·오프셋입니다. 프레임워크 설치 전에 문서 구조와 작은 화면의 배치 조건을 이해하는 흐름으로 복습하세요.

24~31강의 폼·버튼·내비게이션·모달·캐러셀·알림을 32~35강의 상단 메뉴·본문·포트폴리오·하단 수정과 연결합니다. 하나씩 표시 조건을 바꿔 결과를 확인하고, 화면을 꾸민 것과 자료 처리 기능을 만든 것을 구분하세요.

  1. 반응형 사례 분석
  2. CSS 배치 실습
  3. WordPress·Bootstrap 환경
  4. 그리드·폼·메뉴
  5. 상호작용 구성요소
  6. 포트폴리오 수정
05

핵심 구조를 이해하는 방법

컨테이너·행·열은 내용의 배치 범위를 만들고 반응형 기준점은 조건별 배치를 바꿉니다. 화면 크기와 내용 길이는 독립 변수입니다. 열 수만 맞추지 말고 제목·버튼·이미지가 작은 화면에서도 읽히고 입력 가능한지 확인하세요.

06

실무 적용과 결과 확인

22~23강의 그리드는 작은 폭에서 긴 제목·이미지·여러 열을 응용 점검해 보세요. 칸 수를 맞춘 것과 내용이 읽히는 것은 다릅니다. 본문과 고정 메뉴가 겹치지 않는지도 확인하는 것이 유용합니다.

27~31강의 상호작용 복습에서는 열기·닫기·선택·반복 전환 상태를 나눠 확인하세요. 32~35강의 포트폴리오는 이미지와 설명 길이를 바꿨을 때 배치가 유지되는지 추가 검토할 수 있습니다. 이 검토는 복습 응용이며 강의에 없는 접근성 전체 검증을 제공한다는 의미는 아닙니다.

반응형 소개·포트폴리오

32~35강은 메뉴·본문·포트폴리오·하단 수정과 연결됩니다. 실제 작품의 이미지·글 길이에 맞춘 폭 점검은 추가 응용이며 템플릿만으로 사이트 전체 운영이 끝나지는 않습니다.

강좌 연결과 추가 적용의 범위 구분

폼과 메뉴가 있는 화면

24~31강의 입력·메뉴·모달·알림을 화면 동작에 활용할 수 있습니다. 스타일과 서버 자료 처리·인증을 다른 기능으로 구분하세요.

강좌 연결과 추가 적용의 범위 구분
07

이 강좌에서 집중할 전문주제

이 과정은 프레임워크 클래스만 외우는 과정과 구분됩니다. 앞부분 반응형 사례를 뒤의 템플릿 수정에 연결해 배치 규칙이 필요한 이유를 설명해 보세요. 메뉴·본문·포트폴리오가 서로 다른 폭에서 어떤 우선순위를 갖는지 살펴봅니다.

20강 WordPress 설치는 환경 소개 범위입니다. 콘텐츠 관리 시스템 전체 운영이나 서버 보안 전체까지 직접 배우는 것으로 확대하지 않습니다. 강의의 코딩 범위와 현재 홈페이지 운영 요구사항을 나눠 학습하세요.

08

현재 기술과 강좌 환경의 관계

공개 자료만으로 Bootstrap의 정확한 패치 버전은 특정되지 않습니다. navbar-default·affix·구형 데이터 속성 등 이전 세대의 표기가 보이므로 최신 5 계열 문법과 구분합니다.

현재 Bootstrap 5.3 문서는 5 계열 그리드·구성요소를 안내하며 5부터 jQuery 의존성을 제거했습니다. 강의의 플러그인·클래스·data-toggle 같은 표기는 현재 data-bs 계열과 다를 수 있습니다. 최신 파일만 덮어씌우는 방식의 업그레이드를 강의 범위나 호환성 보장으로 표시하지 않습니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지작업 접근이 강좌와의 관계
CSS 직접 구성필요한 배치·표시 규칙을 작성1~19강의 기반과 연결
Bootstrap그리드·구성요소 규칙 활용21~35강의 직접 범위
WordPress콘텐츠와 사이트 관리20강 환경 소개 · 전체 운영과 구분
10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념무엇인가실무 의미강좌 회차학습 상태
반응형 원리·사례·코딩환경에 따른 배치화면 폭과 내용 확인1·2·3·4·5·6·7·8·9·10·11·12·13·14·15·16·17·18·19강강좌에서 직접 학습
WordPress·Bootstrap 시작설치와 도구 구성환경과 화면 도구 구분20·21강강좌에서 직접 학습
컨테이너·그리드행·열·중첩·오프셋조건별 배치22·23강강좌에서 직접 학습
폼·표·버튼·메뉴입력과 이동 요소사용자 동작 구조24·25·26강강좌에서 직접 학습
상호작용 구성요소캐러셀·모달·알림 등상태 변화 확인27·28·29·30·31강강좌에서 직접 학습
템플릿·포트폴리오 수정상단·본문·작품·하단배치 규칙의 실제 적용32·33·34·35강강좌에서 직접 학습
11

처음 배울 때 자주 생기는 오해

Bootstrap을 넣으면 반응형이 끝나나?

내용과 배치를 실제 폭에서 확인해야 합니다. 22~23강의 그리드를 앞부분 사례와 연결하세요. 긴 글·이미지는 별도 조건입니다.

WordPress와 Bootstrap은 같은가?

콘텐츠 관리와 화면 구성 도구의 역할이 다릅니다. 20강과 21강의 경계를 확인하세요. 하나를 설치했다고 다른 역할이 대체되지는 않습니다.

강의 클래스가 현재에도 모두 같은가?

세대별 명칭과 속성이 다를 수 있습니다. 구형 내비게이션·affix 표기를 현재 문법과 대조하세요. 정확한 패치 버전은 미확정입니다.

Bootstrap 5도 jQuery가 필수인가?

5 계열은 해당 의존성을 제거했습니다. 강의의 구형 플러그인 예제와 현재 도구를 구분하세요. 라이브러리만 바꾸면 모든 예제가 호환된다는 뜻은 아닙니다.

그리드 열 수만 맞추면 되나?

여백·중첩·콘텐츠 길이도 영향을 줍니다. 23강 뒤 실제 본문을 바꿔 확인하세요. 작은 화면에서 읽기와 입력이 가능해야 합니다.

폼 스타일이면 입력 검증도 되나?

표시와 자료 검증은 다릅니다. 24·26강의 폼은 실제 공개 범위로 연결합니다. 서버 처리와 운영 검증 전체를 제공한다고 확대하지 않습니다.

12

다음 학습 방향

자바스크립트 ES6 [입문부터 고급까지]

화면 상호작용의 JavaScript 기반을 보강합니다.

자료 보기 →

반응형 웹과 Bootstrap 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

기술정보는 Bootstrap 프로젝트의 공식자료를 기준으로 검토했으며, 강좌 범위는 반응형웹 + 부트스트랩 [전문과정]의 공개 커리큘럼과 구분했습니다.

공식 기술정보 확인일: 2026-10-05 · 강좌 업데이트일을 의미하지 않습니다.

반응형웹 + 부트스트랩 [전문과정] 반응형웹 + 부트스트랩 [전문과정]

  • 반응형웹 + 부트스트랩 [전문과정]

  • 강의구성
  • (35강) 전체 : 25시간 17분|평균 : 43분20초
  • 이용기간/강사
  • 1개월2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 190,000원할인95,000원
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기 >
  • 01.41분 반응형 웹 제작 핵심기술
    기본만 알아도 완벽한 구현이 가능합니다.
    강의전 알아야 할 점, 참고로 알아야 할 점, 뷰 포트 속성 설명, 브라우저나 기기에 따라 사이즈 다르게 하는 방법, media all, 디바이스 최대, 최소 높이 정의, 실무에 사용되는 웹 페이지 다루기, 컨테이너 입력, div 선언, 로고 설정, 잘못된 경우, 이미지 width 값 설정
  • 반응형 웹 제작실무
  • 02.48분 실제적용 사례 CSS실무코딩 1
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹사이트 보기, 소스 확인, 좌우 여백이 생겼다가 없어지는 이유, 이미지 일부분만 보이게 변경하는 방법, 우측 메뉴, 삼단계 변경 설명, 텍스트 부분 소스 보기, pc 사이즈일 경우, 10 픽셀로 수정 후 확인, 배경 컬러가 흰색인 이유, 기본 패딩값 확인
  • 03.38분 실제적용 사례 CSS실무코딩 2
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹사이트 보기, 소스 확인, 좌우 여백이 생겼다가 없어지는 이유, 이미지 일부분만 보이게 변경하는 방법, 우측 메뉴, 삼단계 변경 설명, 텍스트 부분 소스 보기, pc 사이즈일 경우, 10 픽셀로 수정 후 확인, 배경 컬러가 흰색인 이유, 기본 패딩값 확인
  • 04.53분 실제적용 사례 CSS실무코딩 3
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹 사이트 보기, lt로 돼 있을 경우, 네비게이션 태그 보기, 토글 스트림 확인, 소스에서 주목해야 할 점, 상단 공백 부분, stream, 전체 설명, content-head 값 확인, bottom 값 보기, 이미지가 커진 이유, 따로 설정해야할 부분, 카피라이트 부분
  • 05.32분 실제적용 사례 CSS실무코딩 4
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    홈페이지 살펴보기, link href, 배경값, div id=mobile-header, 모바일 헤더 아래 로고 불러오기, div class=wrapper, absolute 제거 했을 경우, 내부 여백 확인, 배너 이미지, 홈페이지 하단, gutter-horiz-in, span class=logo alt
  • 06.1시간 18분 실제적용 사례 CSS실무코딩 5, 6
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    소스 보기, id 값과 css값 보기, 차이가 margin-bottom 일 경우, 로고 애니메이션 효과 확인, 오퍼시티 값, 이미지 애니메이션 효과 확인, 백그라운드 이미지, 와이드 화면이 아닐 경우, 모바일 화면일 경우, 기본 스텐다드 확인, content, 폰트 사이즈, 패딩 값 수정 후 확인, 홀수일 경우에만 백그라운드 컬러 지정, footer 사항
  • 07.54분 실제적용 사례 CSS실무코딩 7
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹사이트 살펴보기, 기본 선언, 기본 pc일 경우 적용 사항, 일반 텍스트에 적용되는 컬러값, serious, 그림자, 모바일일 경우 에프터에 대한 선언, section class=group, div class=reasons, 내부 텍스트 값, actions li, nav class=conditions, 이미지
  • 08.59분 실제적용 사례 CSS실무코딩 8
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    주의 할 부분, 웹사이트 모바일로 함축, 위치, width 값 확인, a 링크-pc 사이즈일 경우, 이미지 css 확인, 평상시 li 값 알아보기, 바 부분, 기본 설정 파일 셋팅, 태블릿일 경우 변경 사항, div class=svtnit-1 svtnit-1-2, 태블릿일 경우, 요약
  • 09.1시간 6분 실제적용 사례 CSS실무코딩 9
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    media=screen, projection, div class=page, 로고 이미지, 일반 pc일 경우, 달라진 li 값 확인, 기본 스텐다드 사항 확인, p 태그 확인, 로그인 창, 텍스트 소스 확인, 추가 적용된 사항, img class=img_opa, li 태그 확인, 추가적인 팁
  • 10.45분 실제적용 사례 CSS실무코딩 10
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    div class=wrapper, div id=header-main, 변경된 패딩값 확인, div id=menu class=hamburger, 웹페이지 몸통 부분, 특이한 점, section id=advert, 마진 값 수정, 없어지는 사항, 차이 알아보기, ul 목록, 백그라운드 이미지 부분 확인
  • 11.38분 실제적용 사례 CSS실무코딩 11, 12
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹사이트 확인, 화면이 줄어들었을 경우, 태블릿 이하 적용 사항 확인, 변경 사항 확인, div id=illustration-parts, 버튼, 첫번째 섹션 확인, div id=partners, 2페이지 보기, 내용이 두줄이 될 경우
  • 12.45분 실제적용 사례 CSS실무코딩 13
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    div id=testata, 대 화면 로고 css 확인, 메뉴가 두줄이 됐을 경우, li에 a가 있을 경우, div id=lingue, div의 ul 목록, css 정의 확인, 와이드일 경우, div class=left_home, 이미지가 pc 버전에서 오버되는 이유, div id=news_home, 기본 셋팅 확인, pc 버전 이하 내용
  • 13.42분 실제적용 사례 CSS실무코딩 14
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹페이지 확인, div class=externalWrap, li 확인, 아이콘 부분, nth-of-type, p class=header-single-link, 기본적인 input에 대한 선언, li 내부에 이미지가 있을 경우, fieldset, 백그라운드 이미지
  • 14.1시간 16분 실제적용 사례 CSS실무코딩 15
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹페이지 확인, li 값 기본 사항, ul class=tbar-right, 좌표, input 확인, li 태그의 열쇠, 이미지가 변경됐을 때, 텍스트 사이즈, 간과하지 말아야 할 점, 패딩값, h1 적용사항 확인, 카피라이트
  • 15.1시간 6분 실제적용 사례 CSS실무코딩 16
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    마진값 제거 후 확인, 모바일일 경우, div class=nav-collapse collapse, li 목록 확인, button type=button, tickets& shows, 화면에 따른 폰트 사이즈 변경 확인, section id=content, aside id=side bar, 우측 하단 내용
  • [전문가 skillup]
  • 16.56분 실제적용 사례 CSS실무코딩 17
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹페이지 확인, 평상시 백그라운드 포지션, 외부 여백 확인, 새 웹페이지 확인, 해당 css에 h1이 있을경우, ul id=nav, 보더값, 평상시 최소높이, div class=inner, 컬럼 카운트 확인
  • 17.52분 실제적용 사례 CSS실무코딩 18
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    웹페이지 확인, min-width 확인, a id=back-home, 이미지, 아이콘 소스 보기, 주목해야할 부분, 변수 확인, 외부 여백 확인, h1에 대한 태그, div id=secondary, 사이즈 확인, colophon.signup, div class=item, colophon.nav li, 차이점, div class=mission, 차이점
  • 18.1시간 32분 실제적용 사례 CSS실무코딩 19, 20, 21
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    body id=Home class=no-js, div id=ToolbarWrapper, rss 정의 부분 확인, ul에 대한 선언 알아보기, 변경된 li 사항, div class=featureText, div class=entry-meta-wrapper, 텍스트 선언 확인, 카피라이트 부분, 제목글에 h4가 있을 때, 새로운 웹페이지 보기, 로고 뒤 이미지, 넓이값
  • 19.1시간 8분 실제적용 사례 CSS실무코딩 22
    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.
    일반 body 설정사항 확인, 네비게이션 태그, 평상시 컬러값과 폰트 사이즈 확인, 반영 안되는 사항, hgroup, 화면 줄었을 경우 기본 정의사항, introduction img 일반적 사항, li 별도 선언 값 확인, 주석 처리 부분 제거, 포지션 정의 부분, 퍼센트 정의 부분, 팁
  • 20.1시간 20분 워드프레스와 반응형웹
    반응형웹을 지원하는 워드프레스의 Twenty Twelve 테마, Twenty Fourteen 테마, Twenty Thirteen 테마, Twenty Eleven 테마를 활용해 코딩 실습을 진행합니다.
    워드프레스의 반응형 웹, 전체 내용 페이지 소스 확인, 문제점, 버튼 요소 확인, 컬러 추가, site-header, 메뉴 단축 버튼, secondary, list-view.site-content.hentry, 마우스 오버시 메뉴 차이점, site-header.home-link, clip, 위젯 차이 확인, 링크 값, supplementary.two.widget-area
  • [Bootstrap]
  • 21.30분 부트스트랩 시작
    부트스트랩 셋팅, 그리드 시스템, container-fluid, h1~h6, small, mark, abbr, blockquote, blockquote-reverse, code, pre, kbd
    다운로드, 주석처리, 서버 실행, container 정의, 그리드 시스템 설치, menu 넓이 조정, font-size, 인용구(blockquote), 코드 태그, .display (block), text-muted, 배경
  • 22.24분 테이블, 이미지
    p태그, class=lead, tr 태그, col-md-2, page-header, class=close, data-dismiss=alert, fade in, class=btn
    p태그, text-transform, img-rounded, 반응형웹, alert alert-success, fade in, 버튼 스타일, btn-link
  • 23.21분 버튼 그룹, 버튼 드롭다운, 라벨과 뱃지
    disabled, active, div class=btn-group, a link, dropdown-menu, data-toggle, date-toggle=dropdown, span class=caret, badge, container, label
    btn-xs, btn-default, 그룹화, a link, 주석처리, dropdown-toggle, label, default 처리
  • 24.22분 progress bar, pagination, breadcrumb, list-group, panel
    progress bar, pagination, breadcrumb, list-group, panel
    progress-bar-striped, 미디어 쿼리 반영, pager, float값 (right), list-group-item-text, panel-heading
  • 25.23분 panel-group, dropdown, dropup, nav
    panel-group, dropdown, dropup, nav
    panel-group, 드롭다운,토글만들기, class="disabled", panel=group collapse, class="nav", tab-pane fade in active
  • 26.26분 navbar, form, input
    navbar-nav, navbar-inverse, navbar-fixed, navbar-brand, form-group, form-inline, form-horizontal, form-control, sr-only, checkbox-inline, input-sm, input-lg
    navbar, container-fluid, right! important, glyphicon glyphicon-log-in, btn btn-default, disabled, form-control input-sm
  • 27.25분 carousel, button
    carousel slide, carousel-indicators, carousel-inner, #next, carousel-control, carousel-caption, modal, modal fade, modal-dialog, modal-header, modal-footer, modal-content, modal-sm, poull
    div class="container", data-target="#next", div class="carousel-inner", style 시트 삽입, href="#next", input type 버튼 생성, modal fade 정의, 토글값 변수 정의
  • 28.26분 poull, popover, scroll
    data-placement, data-content, popover, data-spy=scroll, container-fluid, data-offset-top, data-spy=affix
    data-placement="right", opacity, 스크롤, navbar-fixed-top, 응용, 기기별 화면 비율 확인, col-sm-4, col-sm-8, style='top: 10px;', offset
  • 29.26분 affix, 버튼, 팝업, 롤링배너
    affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지, data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링 배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기
    affixed.bs.affix, 애니메이션 설정방법, 경고 메시지, 변수명 정의, 함수 실행, 롤링 배너 속도 변경하기, 순환 사이클 설정
  • 30.28분 버튼, 드롭다운 메뉴
    btn-default, btn-danger, show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse, dropdown-toggle, show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, hidden.bs.dropdown
    클릭시 보이고 숨기기, 함수 만들기, collapse('show'), data-target, 클릭시 스타일시트 적용, show.bs.dropdown, 보일 때 버튼내용 바꾸기, 부모 요소, 자식 요소
  • 31.23분 경고, 알림 메세지
    show.bs.model, hidden.bs.model, popover, popover-title, popover-content, 나만의 스타일 시트 만들기, charset 설정, mainNav, navbar-fixed
    실행시 알림 출력하기, id 찾기, delay, selector, trigger:"click", .popover 테두리 설정, 실습예제 결과보기, 부트스트랩의 강점, nav 태그
  • 32.30분 부트스트랩 페이지 수정 (상단 메뉴)
    navbar, navbar-default, container-fluid, navbar-brand, navbar-right
    navbar, @media, border-color 변경, 메뉴 스타일, pc환경 스타일 확인, 알파값 변경, Menu 버튼 display, Menu 버튼 클릭시 메뉴 나오기, .nav>l
  • 33.29분 부트스트랩 페이지 수정 (본문)
    header-content, page-scroll, section, container
    메뉴 추가, -webkit-, -ms-, header-content-inner 스타일, @media 아닐때 header 스타일, 책갈피 링크, 애니메이션 속도 조절, :after, :before, h2
  • 34.25분 부트스트랩 페이지 수정 (분문, 포트폴리오)
    section-heading, services, container, col-md, 아이콘 변경, text-muted, container-fluid, popup-gallery, portfolio-box
    section-heading, btn-xl, section-heading, service-box, text-primary, service-box, 개별 갤러리, porfolio-box:hover
  • 35.30분 부트스트랩 페이지 수정 (포트폴리오,하단 메뉴)
    carousel-inner, portfolio-box-caption, bg-dark
    img, Project Name 색상변경, text-faded, h2, mfp-zoom-out-cur, mfp-zoom-out-cur, mfp-arrow, $('body, html').css('overflow','hidden'), 닫기버튼

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중