요소의 position/display/float 프로퍼티를 활용하여 웹 문서를 원하는 형태의 레이아웃으로 디자인 할 수 있다.

Position 프로퍼티

• relative : 특별한 의미는 없음. top/bottom/right/left로 원래의 위치에서 조정 가능
• absolute : 부모 요소를 기준으로 절대적인 위치에 나타남. 이때 부모 요소의 position 값은 relative여야 한다.
• fixed : 요소를 다른 요소와 상관없이 브라우저의 일정 위치에 완전히 고정함. z-index값이 큰 순서대로 화면의 앞쪽에 표시된다.

상단 바는 header 태그로 지정하고, 브라우저가 스크롤되더라도 항상 상단에 표시되게끔 position: fixed과 z-index: 1를 설정했다.

밑 부분 Inner Box는 부모 요소인 Outer Box에 대하여 absolute 포지션을 갖게 하고, 부모 요소 기준 bottom: 0, right: 0을 설정하여 항상 Outer Box의 우측 하단에 붙어서 나타나도록 하였다.

HTML

<header>
 <p>I'm a header!!</p>
</header>
<div class="outer-box">
 <p>Outer Box</p>
 <div class="inner-box">Inner Box</div>
</div>

CSS

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 1;
  background-color: blue;
  color: white;
}

.outer-box {
  background-color: green;
  height: 500px;
  position: relative;
  top: 50px;
  margin-top: 10px;
}

.inner-box {
  background-color: yellow;
  width: 50%;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

인라인/블록 요소와 Display 프로퍼티

일반적으로 블록 요소는 화면의 가로축 전체를 영역으로 가지고, 인라인 요소는 요소가 가진 내용의 너비만큼을 영역으로 가진다. div, p 등의 태그는 블록 요소이고, span, img, input과 같은 태그는 인라인 요소이다.

HTML

<div class="first">First Block</div>
<div class="second">Second Block</div>
<span class="first">First Inline</<span>
<span class="second">Second Inline</span>

CSS

.first {
  background-color: green;
  height: 200px;
  width: 300px;
}

.second {
  background-color: yellow;
  height: 200px;
}

위 코드가 적용되는 화면을 보면, 몇 개의 사실을 알 수 있다.

1. 인라인 요소에는 height, width가 적용되지 않는다.
2. 인라인 요소 다음 인라인 요소는 바로 우측에 표시된다.
3. 블록 요소 다음 블록 요소는 줄바꿈이 발생한다.

하지만 CSS display 프로퍼티를 통해 블록 요소도 인라인 요소처럼 가로로 나열할 수 있다. 인라인 요소 역시 블록으로 나타낼 수 있다.

아래와 같이 display 프로퍼티를 추가하여 블록 요소를 인라인 요소가 나열되는 성질을 갖게 하고(inline-block), 인라인 요소는 블록 요소로 바꾸었다(block).

div {
  display: inline-block;
}

span {
  margin-top: 10px;
  display: block;
}

Float 프로퍼티

Float 프로퍼티는 요소를 다른 요소로 감싸거나, 사이드바를 만들 때 활용한다. 말만 놓고 보자면, float: right는 그 요소가 아닌 다른 요소들이 오른쪽에 둥둥 뜨고, float: left는 그 반대다.

HTML

    <div>
      <aside class="float-left">
        I'm a sidebar!!
      </aside>
      <section>
        I'm a section!!
      </section>
      <br class="clear">
    </div>

CSS

div {
  width: 600px;
  padding: 10px;
  border: 1px solid black;
}

aside {
  background-color: blue;
  width: 20%;
  height: 100px;
}

section {
  background: yellow;
}

.float-left {
  float: left;
}

다만, 위처럼 float 프로퍼티를 가진 요소는 부모 요소의 높이를 인식하지 못하는 문제가 있다. 이럴 땐 보통 부모 요소 안에 clear 프로퍼티를 가진 빈 태그를 삽입하거나, 부모요소에 overflow: hidden을 추가하여 해결한다.

div {
  overflow: hidden;
}