mozilla
검색 결과

    배치

    중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

    CSS 시작하기 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.

    정보: 예제

    Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.

    여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.

    여기서는 간단한 기술에 대해 연습 해 보자.

    Document 구조

    만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.

    document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 <div> element를 사용 할 수 있다.

    예제

    예제 Document에서 두번째 헤더의 숫자 순위가 표시된 단락에서는 컨테이너를 구조가 아니다.

    따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.

    이 구조적 문제를 해결 하기 위해, <div>태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.

    <h3>Numbered paragraphs</h3>
    <div id="numbered">
      <p>Lorem ipsum</p>
      <p>Dolor sit</p>
      <p>Amet consectetuer</p>
      <p>Magna aliquam</p>
      <p>Autem veleum</p>
    </div>
    

    이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.

    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

    크기 단위

    지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.

    다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다. An 고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.

    예제

    아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.

    오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.

    브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.

    RESIZE ME PLEASE
    좀더 자세히

    다른 기기에서는 다른 단위가 적절할 수 있다.

    이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.

    변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 Values 부분을 참고 하라.

    텍스트 배치

    element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.

    text-align
    left, right, center, justify값로 할당하여 정열 할 수 있다.
    text-indent
    들여쓰기를 위해 적당한 값을 명시하여 사용 한다.

    이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.

    예제

    헤더를 가운데 정렬하려면

    h3 {
      border-top: 1px solid gray;
      text-align: center;
    }
    

    결과는 아래와 같다.

    (A) The oceans

    HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.

    부유(Floats)

    float속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.

    나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. clear 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.

    예제

    예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.

    아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.

    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

    (텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)

    위치잡기

    position속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.

    더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.

    relative
    element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.
    fixed
    고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.
    absolute
    부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 relative, fixed or absolute 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.
    static
    기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.

    이 위치 지정 속성과 함께(static은 제외) 방향(top, right, bottom, left), 높이(width), 넓이(height) 크기(size)도 같이 지정 해야 한다.

    예제

    아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.

    <div id="parent-div">
      <p id="forward">/</p>
      <p id="back">\</p>
    </div>
    

    예제 stylesheet에서 부모 element의 위치 속성을 relative로 하라. 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.

    #parent-div {
      position: relative;
      font: bold 200% sans-serif;
    }
    
    #forward, #back {
      position: absolute;
      margin:0px; /* no margin around the elements */
      top: 0px; /* distance from top */
      left: 0px; /* distance from left */
    }
    
    #forward {
      color: blue;
    }
    
    #back {
      color: red;
    }
    

    결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.

    /

    \

     
    좀더 자세히

    위치 지정에 대한 모든 내용은 CSS 사양서의 Visual formatting modelVisual formatting model details의 두 챕터에 나와 있다.

    다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.

    액션: 배치 선언

    1. doc2.html와 style2.css를 수정 하여 위에 나온Document structureFloats를 연습 해 보자.
    2. Floats예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.
    도전

    doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라.

    <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
    

    아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.

    Image:Yellow-pin.png

    Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.

    Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.

    브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.

    (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

    정답 확인.

    다음에는?

    이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 테이블의 스타일을 설정하는 방법에 대해 알아보자.

    문서 태그 및 공헌자

    Contributors to this page: SpikeYou, teoli
    최종 변경: teoli,