실습 예제 모음

[STS 122] CSS 프로그래밍 기초 실습 예제 목록 입니다. 챕터별로 관련 예제들이 목록으로 정리되어 있습니다. 원하는 예제를 클릭해 직접 작성해 보고 실행해 보도록 합니다. 관련 예제들은 지속적으로 수정 및 추가될 예정 입니다.

• 아래의 목록에서 원하는 장의 예제를 클릭하면 새로운 창(탭)으로 연결 됩니다.
• 퀴즈는 모든 예제를 다 마친 후 도전해 봅니다.

1장: CSS 개념이해

• 1-1 HTML에서 CSS 제거해 보기
• 1-2 CSS 작성과 실행하기
• 1-3 CSS 포함방법 3가지

2장: 셀렉터와 스타일 속성

• 2-1 기본 셀렉터
• 2-2 기본 셀렉터 조합
• 2-3 컬러 속성
• 2-4 텍스트 및 폰트 속성
• 2-5 정렬 속성
• 2-6 링크 속성

3장: 박스 모델과 포지셔닝

• 3-1 CSS 단위
• 3-2 기본 박스 모델
• 3-3 position 속성을 통한 박스 배치
• 3-4 float 속성
• 3-5 display 속성 변경
• 3-6 display 속성을 통한 박스 배치
• 3-7 다단 레이아웃 구성
• 3-8 박스와 이미지 정렬

4장: 복합 셀렉터

• 4-1 CSS 상속
• 4-2 셀렉터 조합
• 4-3 가상 셀렉터

6장: Bootstrap 개요

• 6-1 BS 기초 종합
• 6-2 BS로 레이아웃 잡기
• 6-3 Carcousel로 슬라이드쇼 구현하기

퀴즈: 주어진 문제를 스스로 해결해 봅니다.

• q-1 소스코드 설명 페이지 만들기
• q-2 사이드 메뉴 웹페이지 구조 만들기

• q-3 부트스트랩 테이블 구조 만들기