[ 부트스트랩 5 ] 빠르고 스마트하게 웹사이트 만들기 | 입문용
    • 01
      Welcome!
    • 부트스트랩5 강좌에 오신 것을 환영합니다.
    • 02
      [챕터1] About 웹 프로그래밍
    • 1-1. HTML, CSS, 자바스크립트란?
      1-2. 정적 사이트와 동적 사이트
      1-3. 프론트 엔드와 백 엔드
      1-4. vs code 설치하기
    • 03
      [챕터2] HTML이란?
    • 2-1. html이란?
      2-2. html 체험하기 - h 태그
      2-3. html 기본 세팅
      2-4. html 예제 소스 코드 다운로드
    • 04
      [챕터3] html 예제 - 원데이 클래스 웹 페이지 만들기
    • 3-1. 원데이 클래스 예제 소개
      3-2. p 태그란?
      3-3. hr 태그와 br 태그
      3-4. 웹 페이지에 CSS 적용하기
    • 05
      [챕터4] html 예제 - 김소월의 엄마야 누나야
    • 4-1. 김소월 시 웹 페이지 소개
      4-2. html 복습 솔루션
      4-3. 텍스트 굵게/ 이탤릭체/ 밑줄
      4-4. 이미지 추가하기
      4-5. 컬러 코드와 앵커 태그
    • 06
      [챕터5] html예제 - 버거 레시피 소개 페이지
    • 5-1. 통새우 버거 레시피 예제 소개
      5-2. html 복습 솔루션
      5-3. 목록 태그
      5-4. 테이블 태그 (표)
      5-5. 표 구조 나누기
      5-6. 앵커 태그 및 유튜브 비디오 삽입하기
    • 07
      [챕터6] 케이터링 예약 접수 페이지 만들기
    • 6-1. 케이터링 예약 접수 페이지 소개
      6-2. 입력 양식(폼)이란?
      6-3. 다양한 input 타입
      6-4. 라디오 버튼과 체크 박스
      6-5. 버튼 태그 및 input 태그의 기타 속성
      6-6. textarea 태그와 CSS스타일 적용
    • 08
      [챕터7] html - 시맨틱(semantic) 태그
    • 7-1. 시맨틱(semantic) 태그란?
      7-2. header, nav, section 태그
      7-3. article, main 태그
    • 09
      [챕터8] CSS - Step 1
    • 8-1. CSS 적용 방식 3가지
      8-2. 글꼴 변경하기 - 웹 폰트
      8-3. font-weight 및 font-size
      8-4. 줄 간격 및 텍스트 정렬
      8-5. 색상 적용하기
      8-6. 배경 이미지
    • 10
      [챕터9] CSS - Step 2
    • 9-1. 마진(margin)과 패딩(padding)이란?
      9-2. 마진과 패딩 속성 지정하기
      9-3. 테두리 속성 지정하기
      9-4. CSS 선택자 - 클래스와 ID
      9-5. CSS 우선 순위
      9-6. 연결 선택자
      9-7. 뷰포트 단위 vw/vh
      9-8. 플렉스박스(flexbox)란?
      9-9. 주축 정렬 (justify-content)
      9-10. 교차축 정렬 (align-속성)
      9-11. 플렉스박스 주축/교차축 전환 - column
    • 11
      [챕터10] 부트스트랩 기초
    • 10-1. 부트스트랩 적용 방식 이해하기
      10-2. 부트스트랩 파일 가져오기
      10-3. 버튼 스타일 지정하기
      10-4. 색상 적용하기
      10-5. 글자 크기 조정하기 (font-size)
      10-6. 기타 텍스트 속성 지정하기
      10-7. 마진(margin)과 패딩(padding)
      10-8. 테두리(border) 스타일 지정하기
    • 12
      [챕터11] 부트스트랩 - 플렉스박스 및 그리드 시스템
    • 11-1. 컨테이너 클래스
      11-2. 플렉스박스
      11-3. 그리드(grid) 시스템이란?
      11-4. 기본 그리드 연습하기
      11-5. 그리드 - 반응형 레이아웃
      11-6. 반응형 레이아웃 연습하기
      11-7. 에밋(emmet)이란?
    • 13
      [실전 프로젝트1] 코드덤 ART Cook 포트폴리오 사이트
    • 실전 1-1. ART Cook 포트폴리오 웹사이트 소개
      실전 프로젝트 1 예제 소스 코드 다운로드
      실전 1-2. 헤더 영역 - 내용 채우기
      실전 1-3. 헤더 영역 - 배경 이미지 넣기
      실전 1-4. 헤더 영역 아이템 배치하기
      실전 1-5. 쉐프 소개 섹션 만들기
      실전 1-6. 포트폴리오 섹션 만들기
      실전 1-7. SNS 섹션 만들기
      실전 1-8. 연락처 섹션 만들기
      실전 1-9. 서비스 섹션 만들기
      실전 1-10. 블로그 섹션 만들기
      실전 1-11. 뉴스 섹션 모달 만들기
      실전 1-12. 헤더 섹션 모달 띄우기
      실전 1-13. 기본 네비게이션 바 만들기
      실전 1-14. 네비게이션 버튼, 색상 효과, 스크롤스파이
      실전 1-15. 풋터 만들기
    • 14
      [실전 프로젝트2] 코드덤 인테리어 포트폴리오 사이트
    • 실전 2-1. 두 번째 프로젝트 소개
      실전 프로젝트 2 예제 소스 코드 다운로드
      실전 2-2. Home - 프로필 영역 만들기
      실전 2-3. Home - 자격 사항 및 경력 사항 추가하기
      실전 2-4. Home - 포트폴리오 영역 만들기
      실전 2-5. Home - 배너 및 모달 만들기
      실전 2-6. Home - 풋터 만들기
      실전 2-7. Home - 네비게이션 바 만들기
      실전 2-8. Home - 헤더 영역 캐러셀 만들기
      실전 2-9. 프로필 페이지 - Tab 버튼 만들기
      실전 2-10. 프로필 페이지 - Tab 패널 만들기
      실전 2-11. 개인 공간 인테리어 페이지 만들기
      실전 2-12. 비즈니스 인테리어 만들기
      실전 2-13. 연락처 페이지 만들기
      실전 2-14. 웹 사이트 배포하기
      실전 2-15. 개인 도메인 연결하기
    • 15
      완강을 축하합니다!
    • 부트스트랩5라는 새로운 도구의 획득을 축하드립니다!
    실전 1-1. ART Cook 포트폴리오 웹사이트 소개
    13 [실전 프로젝트1] 코드덤 ART Cook 포트폴리오 사이트
    실전 1-1. ART Cook 포트폴리오 웹사이트 소개


    질문하기