1 of 72

[강의교안 이용 안내]

본 강의교안의 저작권은 한빛아카데미㈜에 있습니다.
이 자료는 강의 보조자료로 제공되는 것으로 무단으로 전제하거나 배포하는 것을 금합니다.

HTML 웹 프로그래밍 입문(3판)

[강의교안 이용 안내]

본 강의교안의 저작권은 한빛아카데미㈜에 있습니다.
이 자료는 강의 보조자료로 제공되는 것으로 무단으로 전제하거나 배포하는 것을 금합니다.

2 of 72

6장 CSS3 속성

3 of 72

Contents

학습목표

CSS3가 지원하는 스타일 속성과 스타일 값을 활용할 수 있습니다.
CSS3를 사용해 레이아웃을 잡을 수 있습니다.

내용

박스 속성
가시 속성
배경 속성
글자 속성
위치 속성
유동 속성
그림자와 그레이디언트 속성

3/72

4 of 72

01 박스 속성

웹 페이지의 레이아웃을 구성할 때 가장 중요

4/72

5 of 72

01 박스 속성

박스 크기와 여백

width와 height 속성 : 글자를 감싸는 영역의 크기를 지정
border 속성 : 테두리 두께 지정
margin : 테두리와 다른 태그의 간격을 지정
padding : 테두리와 바깥쪽 여백을 지정

[기본 예제 6-1] 박스 크기와 패딩 조정

1. width와 height 속성 적용하기

코드 데모 온라인 에디터

5/72

6 of 72

01 박스 속성

[기본 예제 6-1] 박스 크기와 패딩 조정

2. margin과 padding 속성 적용하기

코드 데모

6/72

7 of 72

01 박스 속성

[기본 예제 6-1] 박스 크기와 패딩 조정

웹 브라우저에서 검사로 코드 분석

태그 전체의 크기 구하기

margin, border, padding 속성은 양쪽에 위치하므로 2를 곱함

전체 너비 = width + 2 ×(margin + border + padding)
전체 높이 = height + 2 ×(margin + border + padding)

코드 데모

7/72

8 of 72

01 박스 속성

[기본 예제 6-2] 박스 여백 부분 조정

margin 속성과 padding 속성은 두 가지 방법으로 상하좌우를 각각 지정할 수 있음

8/72

9 of 72

01 박스 속성

[기본 예제 6-2] 박스 여백 부분 조정

1. 네 방향 속성 지정하기 : 순서대로 크기 단위 띄어쓰기

2. 두 방향씩 속성 지정하기 : 네 방향을 2개씩 묶어 지정

코드 데모

9/72

10 of 72

01 박스 속성

박스 테두리

border-width : 테두리 두께

border-style : 테두리 형태
border-color : 테두리 색상

10/72

11 of 72

01 박스 속성

박스 테두리

border

border-width, border-style, border-color 속성을 한 번에 입력할 수도 있음

상하좌우 속성을 각각 입력할 수 있음

11/72

12 of 72

01 박스 속성

[기본 예제 6-3] 박스 여백 부분 조정

1. 기본 테두리 만들기

코드 데모

12/72

13 of 72

01 박스 속성

[기본 예제 6-3] 박스 여백 부분 조정

2. 둥근 테두리 만들기

3. 모서리마다 둥글기를 다르게 적용하기

코드 데모

13/72

14 of 72

02 가시 속성

가시 속성

태그가 화면에 보이는 방식을 지정
display 속성

14/72

15 of 72

02 가시 속성

[기본 예제 6-4] display 속성

1. none 키워드 적용하기

태그가 화면에서 보이지 않음

코드 데모

15/72

16 of 72

02 가시 속성

[기본 예제 6-4] display 속성

2. block 키워드 적용하기

#box 태그의 display 속성을 block 키워드로 바꿈

3. inline과 inline-block 키워드 비교하기

코드 데모

16/72

17 of 72

02 가시 속성

inline과 inline-block 키워드 적용
block 형식, inline-block 형식

margin 속성, padding 속성을 상하좌우 네 방향으로 지정할 수 있음

inline 형식

margin 속성, padding 속성을 왼쪽과 오른쪽으로만 지정할 수 있음

17/72

18 of 72

03 배경 속성

배경 속성

18/72

19 of 72

03 배경 속성

배경 이미지 삽입과 크기 지정

background-image 속성

배경 이미지 지정
URL, 그레이디언트 입력

background-size 속성

배경 이미지 크기

19/72

20 of 72

03 배경 속성

[기본 예제 6-5] 배경 이미지 삽입과 크기 조정

1. 배경으로 사용할 이미지 파일 준비하기

배경 이미지와 작성할 HTML 페이지를 같은 폴더에 넣기

2. 배경 이미지 1개 삽입하기

코드 데모

20/72

21 of 72

03 배경 속성

[기본 예제 6-5] 배경 이미지 삽입과 크기 조정

3. 배경 이미지 2개 삽입하기

먼저 입력한 이미지(왼쪽)가 앞쪽에 위치

코드 데모

21/72

22 of 72

03 배경 속성

[기본 예제 6-5] 배경 이미지 삽입과 크기 조정

4. 배경 이미지의 너비 조정하기

5. 배경 이미지 높이 조정하기

코드 데모

22/72

23 of 72

03 배경 속성

배경 이미지 반복과 부착 형태, 위치

background-repeat 속성

배경 이미지의 반복 형태 지정
repeat-x : X축 방향으로만 이미지 반복
repeat-y : Y축 방향으로만 이미지 반복

background-attachment 속성

배경 이미지를 화면에 고정

23/72

24 of 72

03 배경 속성

배경 이미지 반복과 부착 형태, 위치

background-position 속성

배경 이미지의 배치 위치 지정
background-position: 키워드;
background-position: X축 위치;
background-position: X축 위치 Y축 위치;

24/72

25 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

1. 배경 이미지 반복 없애기

코드 데모

25/72

26 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

2. 스크롤이 가능한 분량의 텍스트 추가하기(1)

코드 데모

26/72

27 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

2. 스크롤이 가능한 분량의 텍스트 추가하기(2)

코드 데모

27/72

28 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

3. 배경 이미지 화면에 고정시키기

코드 데모

28/72

29 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

4. 배경 이미지 아래쪽에 배치하기

코드 데모

29/72

30 of 72

03 배경 속성

[기본 예제 6-6] 반복과 부착 형태, 위치

5. 배경 이미지 위치 조정하기

코드 데모

30/72

31 of 72

03 배경 속성

배경 속성 정리

31/72

32 of 72

04 글자 속성

32/72

33 of 72

04 글자 속성

generic-family - 다국적 사용자 대상용 글꼴

33/72

34 of 72

04 글자 속성

[기본 예제 6-7] 글자 크기와 글꼴 지정

코드 데모

34/72

35 of 72

04 글자 속성

[기본 예제 6-7] 글자 크기와 글꼴 지정

2. 글꼴 1개 지정하기

코드 데모

35/72

36 of 72

04 글자 속성

[기본 예제 6-7] 글자 크기와 글꼴 지정

3. 글꼴 여러 개 지정하기

4. 웹 브라우저 고유 글꼴 적용하기

코드 데모

36/72

37 of 72

04 글자 속성

글자의 스타일과 두께

37/72

38 of 72

04 글자 속성

[기본 예제 6-8] 글자의 스타일과 두께 조정

두께를 지원하지 않는 글꼴은 font-weight 속성을 사용해 두께 조정 불가능

코드 데모

38/72

39 of 72

04 글자 속성

글자 정렬

39/72

40 of 72

04 글자 속성

[기본 예제 6-9] 글자 정렬 지정

코드 데모

40/72

41 of 72

04 글자 속성

[기본 예제 6-10] 글자를 수직 중앙 정렬

글자 높이 지정하는 line-height 속성을 사용한 글자 수직 중앙 정렬
1. 간단한 버튼 만들기(1)

코드 데모

41/72

42 of 72

04 글자 속성

[기본 예제 6-10] 글자를 수직 중앙 정렬

글자 높이 지정하는 line-height 속성을 사용한 글자 수직 중앙 정렬
1. 간단한 버튼 만들기(2)

코드 데모

42/72

43 of 72

04 글자 속성

[기본 예제 6-10] 글자를 수직 중앙 정렬

2. 글자를 수직 중앙 정렬하기

코드 데모

43/72

44 of 72

04 글자 속성

링크 글자의 밑줄

text-decoration - <a> 태그에 href 속성 지정하면 적용되는 밑줄 제거

[기본 예제 6-11] 링크의 밑줄 제거

코드 데모

44/72

45 of 72

05 위치 속성

요소의 고정 위치와 상대 위치 지정

position – 요소의 위치 지정 형식 설정
절대 위치 좌표 : absolute, fixed
상대 위치 좌표 : relative, static

45/72

46 of 72

05 위치 속성

[기본 예제 6-12] position 속성

1. absolute 키워드 적용하기

코드 데모

46/72

47 of 72

05 위치 속성

[기본 예제 6-12] position 속성

2. left 속성과 top 속성 적용하기

코드 데모

47/72

48 of 72

05 위치 속성

[기본 예제 6-12] position 속성

3. z- index 속성 적용하기

숫자를 입력하면 숫자가 클수록 앞에 위치

코드 데모

48/72

49 of 72

05 위치 속성

위치 속성 공식

위치 속성 공식을 적용하지 않은 코드(1)

49/72

50 of 72

05 위치 속성

위치 속성 공식

위치 속성 공식을 적용하지 않은 코드(2)

50/72

51 of 72

05 위치 속성

위치 속성 공식

문제 파악하기

❶ h1 태그 2개가 붙어 있음(div 태그가 영역을 차지하지 않음)
❷ 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않음

❶ 문제 해결하기

“자손의 position 속성에 absolute 키워드를 적용하려면 � 부모에 height 속성을 입력합니다.”

51/72

52 of 72

05 위치 속성

위치 속성 공식

❷ 번 문제 해결하기

“자손의 position 속성에 absolute 키워드를 적용하려면 � 부모의 position 속성에 relative 키워드를 적용합니다.”

위치 속성 공식 적용 후 실행 결과

52/72

53 of 72

05 위치 속성

내용이 요소 크기를 벗어날 때 처리

overflow

내용이 요소 크기를 벗어나 모두 보여 주기 힘들 때 어떻게 보여 줄지 지정
float 속성과 함께 자주 사용

53/72

54 of 72

05 위치 속성

[기본 예제 6-13] overflow 속성

1. hidden 키워드 적용하기

부모 영역을 벗어난 부분을 잘라 모두 감춤

코드 데모

54/72

55 of 72

05 위치 속성

[기본 예제 6-13] overflow 속성

2. scroll 키워드 적용하기

부모 영역을 벗어난 부분은 스크롤을 내리면 볼 수 있음

코드 데모

55/72

56 of 72

05 위치 속성

[기본 예제 6-13] overflow 속성

3. overflow-x와 overflow-y 속성 적용하기

특정한 방향으로만 스크롤 생성할 때

코드 데모

56/72

57 of 72

06 유동 속성

float 속성

웹 페이지의 레이아웃을 잡을 때 많이 사용
웹 브라우저 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합

57/72

58 of 72

06 유동 속성

[기본 예제 6-14] float 기본 속성

1. HTML 페이지 만들기

코드 데모

58/72

59 of 72

06 유동 속성

[기본 예제 6-14] float 기본 속성

2. float 속성 적용하기

이미지와 글이 어우러진 형태로 출력

코드 데모

59/72

60 of 72

06 유동 속성

[기본 예제 6-15] 수평 정렬

1. float 속성을 적용할 대상 만들기

코드 데모

60/72

61 of 72

06 유동 속성

[기본 예제 6-15] 수평 정렬

2. left 키워드 적용하기

코드 데모

61/72

62 of 72

06 유동 속성

[기본 예제 6-15] 수평 정렬

3. float 속성이 right 키워드일 때 확인하기

코드 데모

62/72

63 of 72

07 그림자와 그레이디언트 속성

그림자 속성

63/72

64 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-16] 글자와 박스에 그림자 생성

1. 글자에 그림자 주기

코드 데모

64/72

65 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-16] 글자와 박스에 그림자 생성

2. 박스에 그림자 만들기

코드 데모

65/72

66 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-16] 글자와 박스에 그림자 생성

3. 중첩 그림자 만들기

코드 데모

66/72

67 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-17] CSS3 Generator를 사용해 그림자 생성

CSS3 Generator 웹 사이트(http://css3generator.com/)에 접속
box-shadow와 text-shadow 속성을 쉽게 생성 가능

67/72

68 of 72

07 그림자와 그레이디언트 속성

그레이디언트 속성

두 가지 이상의 색상을 혼합하는 채색 기능

[기본 예제 6-18] 그레이디언트 생성

1. 그레이디언트 생성기 사용하기

http://www.colorzilla.com/gradient-editor/에 접속
Ultimate CSS Gradient Generator 페이지 왼쪽에서 원하는 형태의 그레이디언트 생성
오른쪽에 생성된 CSS 코드 복사

코드 데모

68/72

69 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-18] 그레이디언트 생성

2. 복사한 CSS 코드를 사용해 HTML 페이지 만들기(1)

코드 데모

69/72

70 of 72

07 그림자와 그레이디언트 속성

[기본 예제 6-18] 그레이디언트 생성

2. 복사한 CSS 코드를 사용해 HTML 페이지 만들기(2)

코드 데모

70/72

71 of 72

07 그림자와 그레이디언트 속성

선형 그레이디언트 분석

linear-gradient()

선형 그레이디언트가 진행될 각도와 색상 블록을 차례로 입력

radial-gradient()

원형 그레이디언트

71/72

1 of 72

2 of 72

3 of 72

4 of 72

5 of 72

6 of 72

7 of 72

8 of 72

9 of 72

10 of 72

11 of 72

12 of 72

13 of 72

14 of 72

15 of 72

16 of 72

17 of 72

18 of 72

19 of 72

20 of 72

21 of 72

22 of 72

23 of 72

24 of 72

25 of 72

26 of 72

27 of 72

28 of 72

29 of 72

30 of 72

31 of 72

32 of 72

33 of 72

34 of 72

35 of 72

36 of 72

37 of 72

38 of 72

39 of 72

40 of 72

41 of 72

42 of 72

43 of 72

44 of 72

45 of 72

46 of 72

47 of 72

48 of 72

49 of 72

50 of 72

51 of 72

52 of 72

53 of 72

54 of 72

55 of 72

56 of 72

57 of 72

58 of 72

59 of 72

60 of 72

61 of 72

62 of 72

63 of 72

64 of 72

65 of 72

66 of 72

67 of 72

68 of 72

69 of 72

70 of 72

71 of 72

72 of 72