STS 122::CSS 기초

5. 레이아웃, 인라인블럭


본 강좌에서는 웹 페이지 개발에 사용하는 주요 레이아웃 구성 방법을 정리합니다. 먼저, HTML요소의 블록레벨, 인라인레벨 그리고 인라인-블록 레벨에 대해 살펴봅니다. 각 레벨들의 특징을 살펴본 후 차이점을 분석합니다. 레이아웃을 정렬할 때 사용하는 속성은 텍스트 정렬과 요소정렬로 나누어 살펴봅니다. 그리고 해당 웹 페이지에 요소를 배치하는 속성인 포지셔닝에 대해 알아봅니다. 요소 배치 방법 4가지를 학습한 후 각각의 차이점을 분석해 봅니다.

이 강의를 통해 자바언어의 특징을 이해하고 자바언어를 왜 배워야 하는지 알 수 있게 됩니다.


01: 인라인블럭

HTML 요소는 블록 레벨인지 인라인 레벨인지에 따라 나열 방법이 달라집니다. 블록 레벨요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이것은 해당 요소의 너비가 100% 라는 의미이기도 합니다. 반면, 인라인 레벨요소는 줄을 차지하지 않는 요소입니다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.

css_5-1

1) block

2) inline

3) inline-block

동영상 강좌

참고 자료

퀴즈

1) Inline과 Block의 차이점은 무엇입니까?

해답보기

인라인은 특정영역만 차지하지만, 블록은 가로영역전체를 차지합니다.

2) 태그 중 Inline에 해당하는 요소는 어떤 것이 있나요?

해답보기

  • <b>
  • <img>
  • <input>

02: 정렬

Align은 요소들을 정렬하는 속성입니다. 블록 안에 있는 텍스트는 text-align 속성을 이용하여 글자를 정렬합니다. 요소 배치에는 Float, clear, overflow 속성을 이용합니다. 이 속성들을 이용하여 요소들을 배치하며 레이아웃을 구성합니다.

css_5-2

1) text-align

|value|description| |—|—| |left|왼쪽 정렬| |right|오른쪽 정렬| |center|중앙 정렬| |justify|양쪽 정렬|

2) float

3) clear

4) overflow

동영상 강좌

참고 자료

퀴즈

1) Text를 오른쪽 정렬하는 코드를 작성하시오.

해답보기

#id_name { text-align: right; }

2) Float는 텍스트와 이미지를 __ __할때 사용합니다.

해답보기

  • 배치

03: 포지셔닝

문서 내에 삽입된 여러 가지 요소들은 별도의 위치 지정이 되지 않은 경우 기본적으로 상/하로 나열됩니다. CSS에서는 position과 float 속성을 통해 HTML 여러 요소들에 대해 위치를 직접 적용하고 레이아웃을 구성할 수 있습니다. position 속성은 문서 내 위치를 직접 지정할 수 있다는 것이 float속성과의 차이점입니다.

css_5-3

Position 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다.

1) Static

2) Relative

3) Absolute

4) Fixed

동영상 강좌

참고 자료

퀴즈

1) Relative와 Absolute 포지셔닝의 차이점은 무엇입니까?

해답보기

relative는 원래 있던 위치가 기준 좌표값이 되지만, Absolute는 가장 가까운 상위 요소가 기준 좌표값이 되어 배치됩니다.


04: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

05: 참고 자료