[CSS3] CSS Display and Positioning - Flow of HTML (2)

저번 포스팅에서는 HTML 요소를 포지셔닝하는 다섯 가지 속성 중 첫 번째인 position에 대해서 알아보았다. 이번 포스팅에서는 나머지 속성들에 대해서 알아보도록 하자

 

 

 

Z-Index

 

웹 페이지 상의 박스들이 포지셔닝 될 때 서로 오버랩될 수 있다. 이는 해당 박스의 콘텐츠를 읽기 어렵게 만드는 요인으로 작용한다

.box-top {
  background-color: Aquamarine;
}

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
}

위 코드에서 아래쪽 박스는 위쪽 박스를 무시(ignore)하여 이를 오버랩한다. z-index 속성은 웹 페이지 상의 요소들이 얼마나 '뒤로' 가고 '앞으로' 나오는지 조절할 수 있게 해 준다.z-index 속성은 정수 값을 취하는데, 이 값에 따라 브라우저가 요소를 먼저 그리는 순서가 정해지게 된다

.box-top {
  background-color: Aquamarine;
  position: relative;
  z-index: 2;
}

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

위 코드에서 우리는 위쪽 박스의 z-index를 2로 설정하고 position을 relative로 설정하였다. 왜냐하면 z-index 속성은 디폴트 포지션(static)에서 작동하지 않기 때문이다. 2의 z-index는 아래쪽 박스의 z-index의 값인 1 보다 크므로 위쪽 박스를 화면 앞으로 이동시킨다. 아래 그림은 이러한 배치의 결과를 보여준다

 

<그림 1> z-index가 더 큰 위쪽 박스가 앞으로 나온 상태(출처: codecademy.com)

 

사진에서 볼 수 있듯이 위쪽 박스가 더 앞으로 나온 것을 확인할 수 있다. 즉, z-index가 더 큰 값이 화면 앞으로 나온다

 

 

 

Inline Display

 

모든 HTML 요소들은 다른 요소들과 수평 공간을 공유할 수 있는지 여부를 나타내는 display 속성의 디폴트 값을 보유한다. 어떤 요소들은 전체 브라우저를 왼쪽에서 부터 오른쪽까지 꽉 채우기도 하고, 어떤 요소들은 내용에 필요한 만큼의 수평 공간을 차지하고 다른 요소가 바로 옆에 올 수 있다. 이번 포스팅에서는 display 속성이 가질 수 있는 세 가지 값인 inline, block, inline-block에 대해서 알아보도록 하자

 

<em>, <strong>, 및 <a> 와 같은 일부 태그들의 디폴트 diplay 값은 인라인(inline)이다. 인라인 요소들은 그들을 콘텐츠 영역을 감싸는 박스를 가지는데, 오직 내용이 필요로 하는 만큼의 공간을 차지하고 새로운 줄은 요구하지 않는다. 이 요소들의 height와 width는 CSS파일에서 특정지 어질 수 없다. 예를 들어, <a> 태그의 텍스트는 디폴트로 속해있는 텍스트와 같은 라인을 이룬다. 그리고 오직 해당 텍스트가 필요로 하는 길이만큼만 선택되어진다. 인라인 요소는 CSS의 height와 width 속성으로 사이즈를 조절할 수 없다

To learn more about <em>inline</em> elements, 
read <a href="#">MDN documentation</a>.   

위 코드에서, <em> 요소는 인라인인데, 왜냐하면 해당 요소의 콘텐츠가 <a> 태그의 그것과 함께 다른 콘텐츠와 같은 라인을 이루기 때문이다. 위 코드는 다음과 같이 보여진다

 

To learn more about inline elements, click MDN documentation

 

CSS의 display 속성은 어떤 요소라도 인라인 요소로 만들 수 있다. 이는 기본적으로 인라인 요소가 아닌 것들도 포함한다(p, div, heading 등)

h1 {
  display: inline;
}

위 코드는 모든 h1 요소들을 인라인 요소로 만든다. 브라우저는 <h1> 태그를 다른 인라인 태그들과 같은 줄에 위치시킨다(다른 인라인 태그들이 주변에 존재한다면 말이다)

 

 

 

Block Display

 

어떤 요소들은 다른 요소들과 같은 줄에 위치하지 않는다. 이러한 요소들을 block-level 요소라고 부른다. 이 요소들은 디폴트로 페이지의 전체 width를 채우지만, 이들의 width는 설정할 수 있다. 즉 정의되지 않는 한 그들의 내용을 수용할만한 height가 필요하다. block-level 요소들은 헤딩 요소(<h1>부터 <h6>), <p>, <div>, 그리고 <footer> 등이 있다. 모든 블록 요소들은 여기에서 확인할 수 있다

strong {
  display: block;
}

위 코드는 모든 <strong> 요소들이 각각 한 줄을 차지하게 만든다. 비록 한 줄이 페이지의 전체 너비를 차지하지 않더라도 말이다

 

 

 

Inline-Block Display

 

세 번째 display 속성 값은 인라인-블록(inline-block)이다. inline-block은 inline과 block이 갖는 내용을 혼합은 형태를 나타낸다. inline-block 요소들은 같은 줄의 바로 옆에서 이어 나타날 수도 있고 그들의 차원(width, height)도 설정할 수 있다. 이미지 요소가 바로 대표적인 inline-block이다

 

예를 들어, <div> 요소가 같은 줄에 표시되고 그 차원을 설정하도록 하는 CSS는 다음과 같다

<div class="rectangle">
  <p>I’m a rectangle!</p>
</div>
<div class="rectangle">
  <p>So am I!</p>
</div>
<div class="rectangle">
  <p>Me three!</p>
</div>

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

위 코드에서 세 개의 rectangle 클래스를 가진 div를 정의하였다. 그리고 각 div는 하나의 paragraph를 보유한다. 이 div 들은 한 줄로 나타나고(한 줄로 표현할 수 있는 충분한 공간이 있다면), 200px의 width와 300px의 height의 차원을 가진다. 그 안에 담고 있는 내용이 200px & 300px의 공간을 요구하지 않더라도 말이다

 

 

 

Float

 

저번 포스팅에서 오프셋을 활용하여 요소를 포지셔닝하는 방법에 대해서 배웠다. 만약 요소를 단순히 왼쪽이나 오른쪽에 가능한 한 붙여버리고 싶다면, float 속성을 사용하면 된다. float 속성은 다음 두 가지 키워드를 값으로 가질 수 있다:

 

1. left - 해당 요소를 가능한 한 왼쪽으로 붙인다
2. right - 해당 요소를 가능한 한 오른쪽으로 붙인다

.boxes {
  width: 120px;
  height: 70px;
}

.box-bottom {
  background-color: DeepSkyBlue;
  float: right;
}

위 코드에서 아래쪽 박스의 float 속성에 right 값을 부여하여 오른쪽으로 붙이도록 하였다. 위 코드로 인한 요소의 배치는 다음과 같아진다

 

<그림 2> float: right 로 인해 오른쪽에 붙은 상태(출처: codecademy.com)

 

Float 속성을 사용하려면 위의 코드에서와 같이 반드시 width가 명시되어야 한다. 그렇지 않으면, 해당 요소는 전체 width를 차지하게 되어 Float를 명시하더라도 어떤 시각적 효과를 이끌어내지 못하게 된다

 

 

 

Clear

 

Float속성은 한 번에 여러 속성들을 float 시킬 수 있다. 그러나, 여러 floated 요소들이 각자 다른 height를 보유할 땐, 레이아웃에 영향을 미치게 될 수 있다. 좀 더 자세히 말하자면 요소들이 서로 충돌할 수 있으며 다른 요소가 왼쪽이나 오른쪽으로 올바르게 이동하지 못하게 할 수 있다

 

clear 속성은 요소들이 충돌하게 될 때 어떻게 동작하게 하는지 설정한다. clear 속성은 다음과 같은 키워드를 값으로 가질 수 있다:

 

1. left - 특정 요소의 왼쪽 사이드는 같은 부모의 자식 요소들과 서로 닿지 않는다
2. right - 특정 요소의 오른쪽 사이드는 같은 부모의 자식 요소들과 서로 닿지 않는다
3. both - 특정 요소의 양쪽 사이드는 같은 부모의 자식 요소들과 서로 닿지 않는다
4. none - 특정 요소가 양 사이드에 닿을 수 있다

div {
  width: 200px;
  float: left;
}

div.special {
  clear: left;
}

위 코드에서 모든 div 요소들이 왼쪽에 연달아 붙여지게 한다. special 클래스를 가진 div는 clear 속성이 left로 설정되어 왼쪽 사이드가 다른 어떤 요소와도 붙을 수 없으므로, 새로운 라인으로 넘어가서 왼쪽으로 붙는다. special 클래스 다음 요소들은 이 뒤에서부터 왼쪽으로 줄줄이 붙게 된다

 

 

 

Review: Layout

 

저번 포스팅에 이어서 지금까지 웹 페이지 상의 요소들은 어떻게 포지셔닝시키고 컨트롤할 수 있는지에 대해서 알아보았다. 지금까지 배운 것들을 정리하면 다음과 같다:

 

1. position 속성은 요소를 위치시키는 세 가지 다른 방법들을 정의한다
2. position 속성이 relative로 설정되면, 요소의 포지션은 해당 요소의 디폴트 포지션에 대해 상대적이다
3. position 속성이 absolute로 설정되면, 해당 요소의 포지션은 해당 요소와 가장 가까운 부모 요소의 위치에 상대적이다. 이 요소는 웹 페이지 상에서 어디에든지 고정될 수 있는데, 스크롤하면 여전히 이동하게 된다
4. position 속성이 fixed로 설정되면, 해당 요소의 포지션은 웹 페이지 상에서 고정되는데, 스크롤하여도 여전히 화면에 나타나게 된다
5. z-index 속성은 특정 요소가 다른 요소와 겹쳐지게 될 때 화면에서 얼마나 앞이나 뒤로 이동하여 나타날지 설정한다
6. display 속성은 특정 요소가 수평적 또는 수직적으로 어떠한 형태로 이어지게 될지를 정의한다
7. display 속성이 inline로 설정되면, 해당 요소는 필요한 만큼의 공간을 차지하며, 다른 요소들이 옆에 이어서 나타날 수 있다. width나 height 속성에 의해 조절되지 않는다
8. display 속성이 block로 설정되면, 해당 요소는 그들을 담고 있는 부모 요소의 전체 width를 차지하게 된다. 즉 다른 요소들이 옆에 이어서 나타날 수 없다. height속성에 의해 조절될 수 있다
9. display 속성이 inline-block로 설정되면, 해당 요소는 width와 height에 의해 조절될 수 있어 필요한 것보다 더 많은 공간을 차지할 수 있고, 다른 요소들이 옆에 이어서 나타날 수 있으며 부모 요소의 전체 width를 차지하지 않는다.
10. float 속성은 요소를 왼쪽이나 오른쪽에 붙여버린다
11. clear 속성은 요소의 왼쪽이나 오른쪽 사이드에 다른 요소가 올 수 있는지의 여부를 결정한다