1 of 22

​

[강의교안 이용 안내]

​

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

​

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

​

[강의교안 이용 안내]

​

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

​

2 of 22

7장 다양한 레이아웃의 구성과 기능

3 of 22

Contents

  • 학습목표
    • CSS3를 사용해 수평 정렬하는 방법을 알아봅니다.
    • CSS3를 사용해 중앙 정렬하는 방법을 알아봅니다.
    • CSS3를 사용해 One True 레이아웃을 구성하는 방법을 알아봅니다.
    • CSS3의 절대 좌표를 활용하는 방법을 알아봅니다.

​

​

​

  • 내용
    • 수평, 중앙, One True 정렬 레이아웃
    • 요소 배치
    • 글자 생략

3/22

4 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • 수평 정렬 레이아웃
    • float와 overflow 속성을 사용해 레이아웃을 만들기
    • 규칙
      • 자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용

4/22

5 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-1] 수평 정렬 레이아웃

​

​

​

​

​

​

코드 데모 온라인 에디터

5/22

6 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-1] 수평 정렬 레이아웃- overflow 속성 지정 이유
    • 1. [코드 7-1]에서 overflow 속성을 제거
    • 2. [그림 7-2]의 (a)와 같이 수평 정렬한 요소의 앞뒤로 글자를 넣어 주기

​

​

​

​

​

6/22

7 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-1] 수평 정렬 레이아웃- overflow 속성 지정 이유

​

(b) overflow 속성 적용하지 않음� 🡪 요소가 떠다님

​

(c) 부모의 overflow 속성을� hidden으로 입력�

7/22

8 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • 중앙 정렬 레이아웃
    • 특정한 너비의 중앙에 내용이 위치

8/22

9 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-2] 중앙 정렬 레이아웃
    • width 속성을 부여하고 margin 속성을 ‘0 auto’로 입력

​

​

​

​

​

코드 데모

9/22

10 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • One True 레이아웃
    • 국내 모든 포털 사이트의 메인 페이지 레이아웃
    • “행을 독립적으로 생각”해서 공간을 나눔

10/22

11 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-3] One True 레이아웃(1)
    • 1. 행 구성하기
    • 2. 열 구성하기
    • 3. 레이아웃 구성하기
      • ➊ 부모 태그에 고정된 너비를 입력
      • ➋ 수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용
      • ➌ 자손 태그에 적당한 너비를 입력하고 float 속성을 적용

​

​

​

​

​

코드 데모

11/22

12 of 22

01 수평, 중앙, One True 정렬 레이아웃

  • [응용 예제 7-3] One True 레이아웃(2)

​

​

​

​

​

코드 데모

12/22

13 of 22

02 요소 배치

  • 절대 위치를 사용한 요소 배치
    • 자손의 position 속성에 absolute 를 적용하려면 �부모의 position 속성에 relative를 적용

13/22

14 of 22

02 요소 배치

  • [응용 예제 7-4] 절대 위치를 사용해 요소 배치(1)
    • 자손의 position 속성에 absolute 키워드를 적용하려면 �부모에 height 속성을 입력

코드 데모

14/22

15 of 22

02 요소 배치

  • [응용 예제 7-4] 절대 위치를 사용해 요소 배치(2)

코드 데모

15/22

16 of 22

02 요소 배치

  • 요소를 중앙에 배치
    • ➊ 중앙 정렬하려는 div 태그의 position 속성을 absolute로 지정
    • ➋ left 속성과 top 속성을 모두 50%로 지정

​

​

​

​

​

​

    • ➌ 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수 입력� - 입력하는 값은 div 태그 너비와 높이의 정확히 반이어야 함

16/22

17 of 22

02 요소 배치

  • [응용 예제 7-5] 요소의 중앙 배치

코드 데모

17/22

18 of 22

02 요소 배치

  • 요소를 고정 위치에 배치
    • 웹 페이지의 상하좌우에 붙어서 사용자를 따라다니는 요소

18/22

19 of 22

02 요소 배치

  • [응용 예제 7-6] 고정 바 배치(1)
    • ➊ position 스타일 속성에 fixed를 적용
    • ➋ left 속성, top 속성, right 속성, bottom 속성에 값을 입력해 위치를 설정
    • ➌ width 속성과 height 속성으로 크기를 설정

​

코드 데모

19/22

20 of 22

02 요소 배치

  • [응용 예제 7-6] 고정 바 배치

​

코드 데모

20/22

21 of 22

03 글자 생략

  • [응용 예제 7-7] 글자 생략
    • ellipsis 클래스로 구현

코드 데모

21/22

22 of 22

Thank You