Layout

이 페이지는 문서의 레이아웃(layout)을 조정하는 몇가지 방법들을 기술합니다.

샘플 문서의 레이아웃을 변경합니다.

정보: 레이아웃(Layout)

CSS를 사용해서 문서의 레이아웃을 바꾸는 다양한 시각적 효과를 지정할 수 있습니다. 레이아웃을 지정하는 몇가지 테크닉(techniques)은 고급기술이며, 이 기초 입문서의 범위를 벗어납니다.

다양한 브라우저에서 비슷하게 보이는 레이아웃을 디자인할 때, 스타일 시트는 브라우저의 디폴트(default) 스타일 시트및 레이아웃 엔진(engine)과 복잡할 수도 있는 방식으로 상호작용합니다.

이 페이지는 시도해볼 수 있는 간단한 몇가지 테크닉을 기술합니다.

문서 구조

문서의 레이아웃을 콘트롤하고 싶으시면 문서의 구조를 변경해야 할 수도 있습니다.

문서의 마크업(markup)언어는 구조를 생성시키는데 일반적인 목적을 가진 택들을 포함하고 있을 수 있습니다. 예를들면, HTML에서 구조를 생성하기 위해서 DIV 택을 사용할 수 있습니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
샘플 문서에서 두번째 헤딩(second heading)아래에 있는 숫자로 나열된 단락들은 자신들의 콘테이너(container)를 가지고 있지 않습니다.

선별자 안에 지정하고 있는 엘리먼트가 없기때문에 스타일 시트는 이들 단락주위에 보더를 그릴 수 없습니다.

이러한 구조적 문제를 고치기 위해서, 단락주위에 DIV 택을 더할 수 있습니다. 이 택은 고유하기 때문에 id 속성으로 분간될 수 있습니다.

<H3 class="numbered">Numbered paragraphs</H3>
<DIV id="numbered">
<P class="numbered">Lorem ipsum</P>
<P class="numbered">Dolor sit</P>
<P class="numbered">Amet consectetuer</P>
<P class="numbered">Magna aliquam</P>
<P class="numbered">Autem veleum</P>
</DIV>

이제 스타일 시트는 규칙하나를 사용해서 리스트 모두에 보더를 지정할 수 있습니다:

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
  }

결과는 이렇게 보입니다:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

크기 유닛(Units)

지금 까지 이 입문서에서 크기는 픽셀로 (px) 지정했습니다. 이 유닛은 컴퓨터 화면 같은 디스플레이 장치에 대한 몇가지 경우들에 적합합니다. 그러나 사용자가 폰트 크기를 변경하면, 레이아웃이 잘 못 될 수 있습니다.

많은 경우에 크기를 백분율(percentage)이나 ems (em) 로 지정하는 것이 보다 낫습니다. em은 명목상으로 현재 사용중인 폰트의 크기 입니다 (문자 m의 폭). 사용자가 폰트 크기를 변경하면 레이아웃은 자동적으로 그에 맞게 조정됩니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
이 텍스트의 왼쪽 보더는 픽셀로 지정된 크기를 가지고 있습니다.

오른쪽 보더는 ems로 지정된 크기를 가지고 있습니다.

브라우저에서, 폰트를 변경해서 오른쪽 보더는 조정이 되는 반면 왼쪽 보더는 그렇지 않다는 것을 보세요:

RESIZE ME PLEASE
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>
다른 장치에겐 다른 길이 유닛(length unit)이 적합합니다.

이 입문서의 뒷 페이지에 이에 관한 더 많은 정보가 있습니다.

값과 유닛에 관한 전체 설명을 원하시면, CSS 규약의 Values을 보세요.

텍스트 레이아웃

두가지 속성이 엘리먼트의 내용물이 어떻게 정렬되는 지를 지정합니다. 이 속성들을 간단한 레이아웃 조정하는 데 사용할 수 있습니다:

  • text-align
내용물을 정렬합니다. 다음 값들중의 하나를 사용하세요:left, right, center, justify
  • text-indent
지정하는 만큼의 값으로 내용물을 들여씁니다.

이 속성들은 실제 텍스트 뿐만이 아니라 엘리먼트의 모든 유사-텍스트(text-like) 내용물에도 적용됩니다. 이 속성들은 엘리먼트의 자녀들에도 상속되므로, 예상치 못한 결과를 피하기 위해선 명시적으로 자녀들에서 이속성들을 꺼놓아야만 할 수도 있다는 점을 기억해 두세요.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
헤딩(heading)을 가운데 정렬하려면:
h3 {
  border-top: 1px solid gray;
  text-align: center;
  }

이런 결과가 나옵니다:

(A) The oceans

HTML문서에선 헤딩아래에 나오는 내용물은 헤딩에 구조적으로 포함되어있지(contained) 않습니다. 따라서 이와 같이 헤딩을 정렬할때, 헤딩 아래에 있는 택은 그 스타일을 상속받지 않습니다.

플로트(Floats)

float 속성은 엘리먼트를 왼쪽또는 오른쪽으로 강제로 옮김니다. 이 속성은 위치와 크기를 콘트롤하는 간단한 방법입니다.

문서 내용물의 나머지는 보통 옮겨진(floated) 엘리먼트 주위로 흐르는 식으로 배열 됩니다. float속성을 다른 엘리먼트들에 사용해서 플로트 엘리먼트(floats)들을 피하도록 조정할 수 있습니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
샘플 문서에서, 리스트가 뻗어나가 윈도우 횡으로 뻗어나갑니다. 리스트를 왼쪽으로 플로트(float)해서 이를 막을 수 있습니다.

또한, 헤딩(heading)을 제자리에 유지하기위해서, 헤딩 왼쪽에 플로트를 피하도록 지정해야만 합니다.

ul, #numbered {float: left;}
h3 {clear: left;}

The result looks like:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

(보더가 텍스트와 너무 근접해 있는 상자들의 오른편에 약간의 패딩이 필요합니다.)

위치지정(Positioning)

position 속성과 다음의 값들중의 하나를 지정함으로써 4가지 방식으로 어떤 엘리먼트의 위치를 지정할 수 있습니다.

이들은 고급 속성들입니다. 이들을 간단한 방식으로 사용할 수 있습니다&mdash 그래서 이 기본 입문서에도 언급이 되는 것입니다. 그러나 이들 속성을 복잡한 레이아웃을 위해 샤용하는 것은 어렵습니다.

  • relative
엘리먼트 위치를 보통 위치에 상대적으로 이동시킵니다.
지정된 값만큼 이동시킬때 이 속성을 사용하세요. 때론 같은 엘리먼트의 마진을 사용해서 같은 효과를 얻을 수 있습니다.
  • fixed
엘리먼트의 위치를 고정시킴니다.
문서 윈도우에 상대적인 엘리먼트 위치를 지정합니다. 문서의 나머지 부분이 스크롤(scroll)되더라도, 엘리먼트는 고정된 채로 남아있습니다.
  • absolute
엘리먼트의 위치를 부모엘리먼트에 상대적으로 고정시킴니다.
relative, fixed 또는 absolute 로 위치가 지정된 부모엘리먼트에 대해서 허용됩니다.
어떤 이동치(shift)도 지정하지 않은 채로 position: relative;를 지정해 줌으로써 어떤 부모 엘리먼트든 (허용이)적합하게 만들어 줄수 있습니다.
  • static
디폴트(defalult)값 입니다. 명시적으로 위치지정을 꺼야한다면 이 값을 사용하세요.

position 속성 (static 제외한) 값에 더해서, 엘리먼트가 어디에 나타나가를 원하는 지, 그리고 또 그 크기를 지정하기 위해서 다음의 속성들 중의 하나 혹은 그 이상을 지정하세요: top, right, bottom, left, width, height.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
두개의 엘리먼트를 서로의 위쪽에 위치시키기 위해서, 그 엘리먼트가 들어있는 문서에 부모 콘테이너(container)를 만드세요:
<DIV id="parent-div">
<P id="forward">/</P>
<P id="back">\</P>
</DIV>

스타일 시트에서 부모의 위치를 relative로 만드세요. 어떤 실제 이동치를 지정할 필요는 없습니다. 자녀의 위치를 absolute로 만드세요:

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

#forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

#forward {
  color: blue;
  }

#back {
  color: red;
  }

결과는 다음과 같은데, 뒤슬래시(backslash)가 앞슬래쉬(forward slash) 위쪽에 나옵니다:

/

\

 
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>
위치지정에 대한 모든 내용은 CSS 규약의 2개의 복잡한 장(chapter)에 걸쳐 나옵니다:Visual formatting model 그리고Visual formatting model details.

여러 브라우저들에서 작동하는 스타일 시트를 디자인하고 계시면, 브라우저가 표준을 해석하는 방식에 대한 차이들에 대한 설명과 특정 브라우저의 벅(bugs)에 대해서도 고려할 필요가 있습니다.

액션: 레이아웃(layout) 지정하기

샘플 문서와 스타일 시트를 위의 문서 구조 그리고 플로트 섹션의 예제들을 사용해서 변경하세요.

플로트 예제에서 패딩(padding)을 더해서 텍스트를 오른쪽 보더에서 0.5em 만큼 분리시키세요.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Challenge </caption>
샘플 문서를 거의 끝부분의 </BODY> 바로 앞에 다음의 택을 더해서 변경하세요.
<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

이 입문서의 앞부분에서 다음 이미지 파일을 다운로드하시지 않았다먼 지금 다운로드하세요:

Image:Yellow-pin.png

문서의 어디에 이미지가 나타날 지 예상해 보세요. 그뒤 브라우저를 리프레쉬(refresh)해서 맞았는지 확인하세요.

스타일 시트에 이미지가 문서 오른쪽 상단에 고정시키는 규칙 하나를 추가하세요.

브라우저를 리프레쉬하고 윈도우를 작게 만드세요. 문서를 스크롤 할 때도 이미지가 오른쪽 상단에 머물러 있는 지 확인하세요:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin

그럼 다음은?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

이 기본 CSS 입문서의 모든 토픽을 거의 다 커버하셨습니다. 다음 페이지에서는 CSS규칙의 보다 고급 선별자들과 표(table)을 스타일 하는 몇가지 특정한 방법들을 기술합니다: Tables

첨부 자료

파일 크기 날짜 첨부됨
Yellow-pin.png
1631 바이트 2006-08-26 09:10:53 Ioseph
venkintro-scripts.png
5179 바이트 2007-11-15 09:55:27 Andyyard

Document Tags and Contributors

Contributors to this page: Ioseph, Hyunha Kim
Last updated by: Hyunha Kim,