4. CSS 위치 속성

1. 키워드

디스플레이(Display)
포지션(Position)
플로트(Float)
정렬(Align)

2. 디스플레이

1) `display` 속성

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.

대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가진다.

1] 블록(block)

2] 인라인(inline)

(1) 블록

display 속성값이 블록(block)인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.

Note

<div>, <h1>, <p>, <ul>, <ol>, <form> 요소는 대표적인 블록 요소이다.

(2) 인라인

display 속성값이 인라인(inline)인 요소는 새로운 라인에서 시작하지 않는다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지한다.

Note

<span>, <a>, <img> 요소는 대표적인 인라인 요소이다.

2) `display` 속성의 기본 설정값의 변경

HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있다.

하지만 display 속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있다.
또한, 반대로 display 속성값이 인라인인 요소의 속성값을 블록으로 바꿀 수도 있다.

이렇게 HTML 요소의 display 속성값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경할 수 있다.

<style>
  li {
    display: inline;
  }
</style>

위의 예제에서 블록 요소인 <li> 요소의 display 속성값을 인라인으로 변경하고 있다.
display 속성값이 인라인으로 변경된 <li> 요소는 해당 라인의 모든 너비를 차지하는 블록 요소의 특징을 잃어버리게 된다.

display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아니다.
즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없다.
왜냐하면, 처음부터 display 속성값이 블록인 요소만이 내부에 다른 요소를 포함할 수 있기 때문이다.

3) 인라인-블록

인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작한다.
하지만 해당 요소 내부에서는 블록 요소처럼 동작한다.

이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다.
또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 된다.

다음 예제는 다양한 display 속성값의 동작을 보여주는 예제이다.

<style>
  div {
    width: 100px;
    height: 50px;
  }

  .first {
    background-color: aqua;
  }
  .second {
    background-color: green;
  }
  .third {
    background-color: yellow;
  }

  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
</style>

위의 예제처럼 display 속성값이 인라인-블록으로 설정된 요소들은 인라인 요소처럼 한 줄로 늘어서게 된다.
하지만 블록 요소처럼 너비와 높이를 설정할 수 있게 된다.
따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용된다.

4) `visibility` 속성

visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정한다.
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재하게 된다.
visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃을 손쉽게 만들 수 있다.

visibility 속성에 사용할 수 있는 속성값은 다음과 같다.

1] visible: 해당 HTML 요소를 웹 페이지에 나타낸다.

2] hidden: HTML 요소를 웹 페이지에 나타내지 않는다. 하지만 여전히 웹 페이지의 레이아웃에는 존재한다.

3] collapse: 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여준다.

5) HTML 요소 숨기기

HTML 요소를 숨기기 위해서는 display 속성값을 none으로 설정하면 된다.
이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다.

또한, visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있다.
하지만 display 속성값을 none으로 설정한 것과는 달리, 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재하게 된다.

<style>
  p.none {
    display: none;
  }

  p.hidden {
    visibility: hidden;
  }
</style>

Note

따라서 민감하거나 귀중한 데이터를 visibility 속성을 이용하여 감추는 것은 바람직하지 못하다.

6) `opacity` 속성

opacity 속성을 이용하면 HTML 요소의 투명도를 간단히 조절할 수 있다.
opacity 속성값은 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태가 된다.

익스플로러 8과 그 이전 버전에서는 투명도를 표현하기 위해 다음과 같은 문법을 사용한다.

filter: alpha(opacity=x);

여기서 x값은 0부터 100까지 설정할 수 있으며, x값이 0에 가까울수록 투명한 상태가 된다.

다음 예제는 대부분의 웹 브라우저뿐만 아니라 익스플로러 8과 그 이전 버전에서도 투명도를 정확하게 표현하는 예제이다.

<style>
  img {
    opacity: 0.4;
    filter: alpha(opacity=40);
  }

  img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }
</style>

3. 포지션

1) `position` 속성

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.
CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 네 가지 방식이 있다.

1] 정적 위치(Static Position) 지정 방식

2] 상대 위치(Relative Position) 지정 방식

3] 고정 위치(Fixed Position) 지정 방식

4] 절대 위치(Absolute Position) 지정 방식

(1) 정적 위치 지정 방식

HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치 지정 방식이다.

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.
정적 위치 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.

<style>
  div {
    position: static;
  }
</style>

(2) 상대 위치 지정 방식

상대 위치 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다.

HTML 요소의 기본 위치란 해당 요소가 정적 위치 지정 방식일 때 결정되는 위치를 의미한다.

<style>
  div.relative {
    position: relative;
    left: 30px;
  }
</style>

(3) 고정 위치 지정 방식

고정 위치 지정 방식은 뷰포트(Viewport)를 기준으로 위치를 설정하는 방식이다.

즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.

<style>
  div.fixed {
    position: fixed;
    top: 0;
    right: 0;
  }
</style>

(4) 절대 위치 지정 방식

절대 위치 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다.
단지 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상(Ancestor) 요소를 기준으로 위치를 설정하게 된다.

하지만 위치가 설정된 조상 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다.

<style>
  div.absolute {
    position: absolute;
    top: 50px;
    right: 0;
  }
</style>

Note

위치가 설정된 요소라는 것은 정적 위치 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미한다.

2) 정적 위치 지정 방식과 다른 방식들과의 차이점

정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식이다.

1] 상대 위치: 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함.

2] 고정 위치: 뷰포트에 상대적으로 위치함.

3] 절대 위치: 위치가 설정된 바로 상위의 조상 요소에 상대적으로 위치함.

<style>
  .static {
    position: static;
  }

  .relative {
    position: relative;
  }

  .fixed {
    position: fixed;
  }

  .absolute {
    position: absolute;
  }
</style>

3) `z-index` 속성

HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다.
z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(Stack)의 순서를 설정한다.
스택의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 된다.

<style>
  .last {
    position: fixed;
    top: 180px;
    left: 120px;
    z-index: -1;
  }
</style>

4) CSS `position` 속성

속성	설명
`position`	HTML 요소의 위치를 결정하는 방식을 설정함.
`top`	위치가 설정된 조상 요소의 위로부터의 여백을 설정함.
`right`	위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함.
`bottom`	위치가 설정된 조상 요소의 아래로부터의 여백을 설정함.
`left`	위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함.
`z-index`	겹쳐지는 요소들이 쌓이는 스택의 순서를 설정함.
`clip`	절대 위치 지정 방식으로 위치한 요소를 자름.
`cursor`	표시되는 마우스 커서의 모양을 설정함.
`overflow`	내용의 크기가 해당 요소의 박스를 넘어갈 때 어떻게 처리할지를 설정함.
`overflow-x`	내용의 크기가 해당 요소의 수평 방향으로 박스를 넘어갈 때 어떻게 처리할지를 설정함.
`overflow-y`	내용의 크기가 해당 요소의 수직 방향으로 박스를 넘어갈 때 어떻게 처리할지를 설정함.

4. 플로트

1) `float` 속성

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용된다.

다음 예제는 이미지와 글자를 함께 출력하는 예제이다.

<style>
  img {
    float: left;
    margin-right: 20px;
  }
</style>

2) `clear` 속성

clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

<style>
  .left {
    background-color: #ff8c00;
    width: 150px;
    height: 50px;
    float: left;
  }

  .right {
    background-color: #9932cc;
    width: 150px;
    height: 50px;
    float: right;
  }
</style>

따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 float 속성에 영향을 받지 않도록 설정해줘야 한다.

<style>
  .left {
    background-color: #ff8c00;
    width: 150px;
    height: 50px;
    float: left;
  }

  .right {
    background-color: #9932cc;
    width: 150px;
    height: 50px;
    float: right;
  }

  p {
    clear: both;
  }
</style>

3) `overflow` 속성

float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.

<style>
  div {
    border: 3px solid #73ad21;
    padding: 5px;
  }

  img {
    float: left;
  }

  .good {
    overflow: auto;
  }
</style>

4) `float` 속성을 이용한 레이아웃

현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있다.

다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여준다.

<style>
  div.page {
    border: 3px solid #cd5c5c;
    overflow: auto;
  }

  h2 {
    text-align: center;
  }

  header {
    border: 3px solid #ffd700;
  }

  nav {
    border: 3px solid #ff1493;
    width: 150px;
    float: left;
  }

  section {
    border: 3px solid #00bfff;
    margin-left: 156px;
  }

  footer {
    border: 3px solid #00fa9a;
  }
</style>

5) CSS `float` 속성

속성	설명
`float`	HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함.
`clear`	`float` 속성이 적용된 후 나타나는 요소들이 더 이상 `float` 속성에 영향을 받지 않도록 설정함.
`overflow`	내용의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함.
`overflow-x`	내용의 크기가 해당 요소의 수평 방향 박스를 넘어갈 때 어떻게 처리할지를 설정함.
`overflow-y`	내용의 크기가 해당 요소의 수직 방향 박스를 넘어갈 때 어떻게 처리할지를 설정함.

5. 정렬

블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용할 수 있다.

1] margin 속성을 이용한 가운데 정렬

2] position 속성을 이용한 좌우 정렬

3] float 속성을 이용한 좌우 정렬

1) `margin` 속성을 이용한 가운데 정렬

margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다.

이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어진다.
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 한다.

<style>
  div {
    width: 300px;
    margin: auto;
  }
</style>

2) `position` 속성을 이용한 좌우 정렬

절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 된다.
따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.

position 속성을 이용하여 정렬할 경우에는 <body> 요소에 margin과 padding 속성값을 설정하는 것이 좋다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
  div {
    width: 300px;
    padding: 10px;
    margin: 0;
    position: absolute;
    right: 0;
  }
</style>

3) `float` 속성을 이용한 좌우 정렬

float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있다.

float 속성을 이용하여 정렬할 경우에는 <body> 요소에 margin과 padding 속성값을 설정하는 것이 좋다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

<style>
  div {
    width: 350px;
    padding: 10px;
    margin: 0;
  }

  div.left {
    float: left;
  }

  div.right {
    float: right;
  }
</style>

4. CSS 위치 속성

1. 키워드

2. 디스플레이

1) display 속성

(1) 블록

(2) 인라인

2) display 속성의 기본 설정값의 변경

3) 인라인-블록

4) visibility 속성

5) HTML 요소 숨기기

6) opacity 속성

3. 포지션

1) position 속성

(1) 정적 위치 지정 방식

(2) 상대 위치 지정 방식

(3) 고정 위치 지정 방식

(4) 절대 위치 지정 방식

2) 정적 위치 지정 방식과 다른 방식들과의 차이점

3) z-index 속성

4) CSS position 속성

4. 플로트

1) float 속성

2) clear 속성

3) overflow 속성

4) float 속성을 이용한 레이아웃

5) CSS float 속성

5. 정렬

1) margin 속성을 이용한 가운데 정렬

2) position 속성을 이용한 좌우 정렬

3) float 속성을 이용한 좌우 정렬

References

1) `display` 속성

2) `display` 속성의 기본 설정값의 변경

4) `visibility` 속성

6) `opacity` 속성

1) `position` 속성

3) `z-index` 속성

4) CSS `position` 속성

1) `float` 속성

2) `clear` 속성

3) `overflow` 속성

4) `float` 속성을 이용한 레이아웃

5) CSS `float` 속성

1) `margin` 속성을 이용한 가운데 정렬

2) `position` 속성을 이용한 좌우 정렬

3) `float` 속성을 이용한 좌우 정렬