6 주차 _2

교시

웹 프로그래밍 기초 행복교육원 채미혜

5. CSS : 배경과 목록
1. CSS 배경 색상
1.1 CSS 배경 색상
2. CSS 배경 이미지
2.1 배경 이미지 삽입하기 – background-image
2. CSS 배경 이미지
2.2 배경 이미지 반복 설정하기 – background-repeat 속성

 background-repeat 속성
2. CSS 배경 이미지
2.2 배경 이미지 반복 설정하기 – background-repeat
속성
2. CSS 배경 이미지
2.2 배경 이미지 반복 설정하기 – background-repeat
속성
2. CSS 배경 이미지
2.3 배경 이미지 위치 설정하기 – background-position 속성
2. CSS 배경 이미지
2.3 배경 이미지 위치 설정하기 – background-position 속성

 background-position 속성
3. CSS 목록
3.1 목록의 글머리 형태 설정하기 – list-style-type 속성
3. CSS 목록
3.1 목록의 글머리 형태 설정하기 – list-style-type 속성

 list-style-type 속성
3. CSS 목록
3.2 목록의 글머리에 이미지 삽입하기 – list-style-image
속성
6. CSS : 박스모델과 디스플레이
1. 박스 모델
1.1 박스 모델

 박스 모델
 콘텐츠 : 박스에 들어가는 텍스트나 이미지 등의 내용물
 패딩 : 콘텐츠와 경계선 사이의 간격
 경계선 : 콘텐츠와 패딩을 포함한 경계를 나타내는 선
 마진 : 경계선과 외부 요소 사이의 간격
2. 경계선
2.1 경계선 그리기 - border 속성
2. 경계선
2.1 경계선 그리기 - border 속성

 border 속성

Border : 경계선스타일 경계선 두께 경계선 색상

경계선 스타일
• solid( 실선 )
• Double( 이중실선 )
• Dashd( 줄표로 이루어진 선 )
2. 경계선
2.1 경계선 그리기 - border 속성
2. 경계선
2.2 박스의 모서리와 그림자 모양 설정하기 – border-radius, box-shadow
속성
3. 여백 : 마진과 패딩
3.1 여백 지정하기 - margin 속성

 margin 속성
 박스의 경계선과 경계선 외부에 존재하는 요소 사이의 여백 설정
3. 여백 : 마진과 패딩
3.1 여백 지정하기 - margin 속성

 margin 속성
3. 여백 : 마진과 패딩
3.2 여백 지정하기 - padding 속성

 padding 속성
 박스 안에 있는 콘텐츠와 경계선 사이의 여백 설정
3. 여백 : 마진과 패딩
3.2 여백 지정하기 - padding 속성

 padding 속성
3. 여백 : 마진과 패딩
3.3 기본 설정된 여백 초기화하기
3. 여백 : 마진과 패딩
3.3 기본 설정된 여백 초기화하기
3. 여백 : 마진과 패딩
3.3 기본 설정된 여백 초기화하기
수업 요약
박스 모델
– 콘텐츠 : 박스에 들어가는 텍스트나 이미지 등의 내용물
– 패딩 : 콘텐츠와 경계선 사이의 간격
– 경계선 : 콘텐츠와 패딩을 포함한 경계를 나타내는 선
– 마진 : 경계선과 외부 요소 사이의 간격
수업 요약
배경
• background-color
• background-image
• background-repeat
• background-position
• 목록
• list-style-type
• list-style-image
과제
 작성한 실습 파일 제출 ① 박스모델 .html

① 5 주차복습 .html

② class 선택자 .html  이번주 퀴즈 과제는 없음

③ 선택자들 .html

④ css 배경색상 .html

참고문헌

 생활코딩 ! HTML+CSS+ 저바스크립트 , 이고잉 저 , 위키북스

 예제 중심의 웹 프로그래밍 입문서 HTML & CSS for Beginner, 황재호 저 , 한빛 아카데미

 예제 중심 HTML & 자바 스크립트 & CSS for 초급 & 중급 , 장수진저 , 현우사

 코딩 스쿨 : http://tcpschool.com/html/intro

 생활 코딩 ! https://opentutorials.org

Page 29