CSS: Display and Positioning

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

DISPLAY AND POSITIONING

Flow of HTML

HTML에서 요소의 흐름(Flow of elements): 브라우저는 CSS가 없는 HTML 문서의 요소를 문서에 존재하는 것과 같은 순서로 왼쪽에서 오른쪽으로, 위에서 아래로 렌더링하는 것

 

스타일 HTML 요소에 제공하는 property 외에도, CSS는 브라우저가 요소를 배치(position)하는 방법을 변경하는 property를 포함한다.

이러한 property는 요소가 다른 요소 및 기타 관련 속성과 선을 공유할 수 있는 경우 요소의 페이지 위치를 지정한다.

 

브라우저에서 HTML 요소의 위치를 조정하는 다섯 가지 property

• position
• display
• z-index
• float
• clear

---

Position

아래 이미지에서 block-level element를 보자.

출처: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Position-updated.png

이 상자와 같은 block-level element는 상위 요소의 전체 너비를 블록으로 만들어 다른 요소가 동일한 수평 공간에 나타나지 않도록한다.

 

위 이미지의 block-level element는 자체 공간을 차지하므로 서로 겹치지 않는다.

이 위치는 block-level element의 기본 위치이다.

 

요소의 기본 위치는 position property을 설정하여 변경한다.

position property은 다음 다섯 가지 값 중 하나를 취한다.

• static - 기본값(지정할 필요가 없음) 
• relative
• absolute
• fixed
• sticky

Position: Relative

요소의 기본 위치를 수정하는 한 가지 방법은 position property을 relative로 설정하는 것이다.

이 값을 사용하면 웹 페이지에서 요소의 default static position을 기준으로 요소를 배치한다.

.green-box {
  background-color: green;
  position: relative;
}

예제의 코드는 브라우저에 .green-box 요소의 상대적인 위치를 예상하도록 지시하지만, 페이지에 .green-box 요소가 위치해야 하는 위치는 지정하지 않는다.

이 작업은 요소를 default static position에서 멀어지게 하는 다음 offset properties 중 하나와 함께 position declaration에 따라 수행된다.

 

offset properties

• top: 요소를 상단에서 아래로 이동
• bottom: 요소를 아래에서 위로 이동
• left: 요소를 왼쪽(오른쪽으로)에서 멀리 이동
• right: 요소를 오른쪽(왼쪽으로)에서 멀리 이동

픽셀, ems 또는 백분율로 값을 지정하여 요소의 이동 거리를 정확히 입력할 수 있다.

또한 요소의 position property이 default static인 경우 offset property가 작동하지 않는다.

.green-box {
  background-color: green;
  position: relative;
  top: 50px;
  left: 120px;
}

예제에서 green-box class의 요소는 default static position에서 50픽셀 아래로, 오른쪽으로 120픽셀로 이동한다.

아래 이미지는 상자의 새 위치를 표시한다.

점선은 static position(default) 상자의 위치를 나타낸다.

출처: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Relative.png

relative 요소를 offset해도 다른 요소의 위치에는 영향을 주지 않는다.

 

Position: Absolute

요소의 위치를 수정하는 또 다른 방법은 요소의 위치를 absolute로 설정하는 것이다.

 

요소의 위치가 absolute로 설정되면 페이지의 다른 모든 요소는 그 요소를 무시하고 페이지에 없는 것처럼 작동한다.

요소는 가장 가까운 위치에 있는 상위 요소에 상대적(relative)으로 배치되는 반면, offset property는 거기서 최종 위치를 결정하는 데 사용된다.

 

"Website building in progress. Please com back later!!" 텍스트가 상위 컨테이너의 왼쪽 상단 모서리에 있는 static position에서 이동된다.

top: 300px, right: 0;, 페이지의 300px 아래로 , 오른쪽에서 0픽셀의 offset property declaration이 있다.

Position: Fixed

요소의 위치가 absolute로 설정되면 사용자가 스크롤할 때 요소는 문서의 나머지 부분과 함께 스크롤된다.

 

요소를 fixed 위치로 설정하고 top, bottom, left 및 right에 익숙한 offset property를 함께 표시하여 페이지의 특정 위치에 고정(fix)한다.

.title {
  position: fixed;
  top: 0px;
  left: 0px;
}

예제에서 .title 요소는 사용자가 페이지에서 스크롤하는 위치에 관계없이 고정된 상태로 유지된다.

예제 확인: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Fixed.gif

Position: Sticky

static 및 relative 위치 구성요소는 문서의 정상적인 흐름에 머물기 때문에, 사용자가 페이지(또는 상위 구성요소)를 스크롤할 때 이러한 구성요소도 스크롤된다.

또한 fixed 와 absolute 위치 요소는 문서 흐름에서 제거되므로 사용자가 스크롤할 때 이러한 요소는 지정된 오프셋 위치에 유지된다.

 

sticky value는 사용자가 스크롤할 때 문서 흐름의 요소를 유지하지만 페이지가 추가로 스크롤될 때 지정된 위치에 고정되는 또 다른 위치 값이다.

이 작업은 sticky value와 오프셋 속성을 함께 사용하여 수행된다.

.box-bottom {
  background-color: darkgreen;
  position: sticky;
  top: 240px;
}

위의 예에서 .box-bottom <div> 는 상대적인 위치를 유지하고 평소와 같이 스크롤된다.

상단에서 240픽셀에 도달하면 상위 컨테이너의 하단에 도달할 때까지 해당 위치에 달라붙어 문서 흐름에 다시 결합된다.

예제확인: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Sticky.gif

Z-Index

웹 페이지의 상자가 서로 다른 위치의 조합을 가질 경우 상자(및 그 내용)가 서로 겹쳐서 내용을 읽거나 사용하기 어려울 수 있다.

.blue-box {
  background-color: blue;
}
 
.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}

예시에서 .green-box 요소는 .blue-box 요소 위에 겹친다.

 

z-index property는 요소가 겹칠 때 요소가 웹 페이지에 표시되는 간격 또는 앞으로 표시되는 거리를 제어한다.

요소의 depth(깊이)로 간주할 수 있으며, 더 깊은 요소가 더 낮은 요소 뒤에 나타난다.

 

z-index property은 정수 값을 받아들인다.

값에 따라, 정수는 웹 페이지에 요소를 계층화해야 하는 순서를 브라우저에 지시한다.

z-index의 기본 value는 0이므로, 값을 명시하지 않을 경우 0으로 간주한다.

.blue-box {
  background-color: blue;
  position: relative;
  z-index: 1;
}
 
.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}

예시에서는 .blue-box 위치를 relative로, z-index를 1로 설정한다.

z-index property는 static 요소에서 작동하지 않기 때문에 위치를 relative 위치로 변경

출처: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Z-index.png

---

Inline Display

모든 HTML 요소에는 다른 요소와 수평 공간을 공유할 수 있는지 여부를 지정하는 default display value가 있다.

일부 요소는 내용 크기에 상관없이 왼쪽에서 오른쪽으로 전체 브라우저를 채운다.

다른 요소는 컨텐츠가 필요로 하는 만큼의 수평 공간만 차지하며 다른 요소 바로 옆에 있을 수 있다.

 

inline, block, inline-blick의 세 가지 display property에 대해 알아보자.

Display: Inline

inline: <em>, <strong>및 <a>와 같은 일부 요소의 default display

inline 요소는 콘텐츠를 단단히 감싸는 상자가 있으며, 콘텐츠를 표시하는 데 필요한 공간만 차지하며 각 요소 뒤에 새 줄이 필요하지 않는다.

이러한 요소의 높이와 너비는 CSS 문서에서 지정할 수 없다.

예를 들어, anchor 태그(<a>)의 텍스트는 기본적으로 주변 텍스트와 같은 줄에 표시되며, 내용을 포함하는 데 필요한 만큼만 넓어진다.

inline 요소는 높이 또는 너비 CSS 속성으로 크기를 변경할 수 없다.

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

위의 예에서 <em> 요소는 anchor 태그를 포함하여 해당 콘텐츠를 둘러싼 콘텐츠와 동일한 라인에 표시되므로 inline이다.

예시는 다음과 같이 표시된다.

 

To learn more about inline eleents, read MDN documentation

 

CSS display property는 요소를 inline 요소로 만드는 기능을 제공한다.

여기에는 문단, div 및 heading 같이 기본적으로 inline되지 않은 요소가 포함된다.

h1 {
  display: inline;
}

예시에서 CSS는 모든 요소의 표시를 인라인으로 변경한다.

브라우저는 요소를 다른 inline 요소 바로 전 또는 직후(있는 경우)와 동일한 라인에 렌더링한다.

 

inline 요소는 공간을 최대한 적게 차지하며, width나 height를 수동으로 조정할 수 없다.

Display: Block

block-level elements: 주변의 내용과 동일한 행으로 표시되지 않는 요소

이러한 요소는 기본적으로 페이지의 전체 너비를 채우지만 width property도 설정할 수 있다.

별도로 지정하지 않는 한, 콘텐츠 수용에 필요한 높이이다.

 

기본적으로 block-level 요소에는 모든 heading 요소(<h1> ~ <h6> ), <p>,<div> 및 <footer>가 있다.

(block-level 요소의 전체 목록을 보려면 MDN documentation참조)

strong {
  display: block;
}

예시에서, 모든 <strong>요소는 자체 라인에 표시되며, 비록 내용이 대부분의 컴퓨터 화면의 너비를 채우지 못할지라도 그 양쪽에 직접 내용이 없다.

 

block 요소가 컨테이너의 너비를 차지하며 height를 수동으로 조정할 수 있다.

Display: Inline-Block

inline-block displaty는 inline 및 block 요소 모두의 기능을 결합한 것이다.

inline-block 요소는 서로 옆에 나타날 수 있으며 width 및 height property를 사용하여 dimenstion을 지정한다.

이미지는 default inline-block 요소의 가장 좋은 예이다.

 

예를 들어, 아래의 <div>는 지정된 dimension과 동일한 라인에 표시된다.

코드를 살펴보자.

<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;
}

각각 텍스트 단락을 포함하는 세 개의 직사각형 div가 있다.

.rectangle 는 200픽셀의 너비(width)과 300픽셀의 높이(height)에 모두 inline으로 표시된다.(왼쪽에서 오른쪽으로 충분한 공간이 있는 경우).

단, 그 안의 텍스트는 200픽셀 또는 300픽셀의 공간을 필요로 하지 않을 수도 있다.

 

inline-block 요소는 width와 height를 설정할 수 있지만, 서로 옆에 나타날 수도 있고 전체 컨테이너 너비를 차지하지는 않는다.

Float

컨테이너에서 가능한 한 왼쪽 또는 오른쪽으로 요소를 이동하려는 경우 float property를 사용한다.

 

float property는 일반적으로 이미지 주위의 텍스트를 감싸는 데 사용되는 반면 레이아웃 목적을 위해 요소를 왼쪽과 오른쪽으로 이동하는 것이 CSS grid 및 flexboxk와 같은 도구에서는 더 나은 왼쪽이다.

 

float property은 아래 값 중 하나를 사용하여 설정된다.

• left: 요소를 가능한 왼쪽으로 이동
• right: 요소를 최대한 오른쪽으로 이동

.green-section {
  width: 50%;
  height: 150px;
}
 
.orange-section {
  background-color: orange;
  width: 50%;
  float: right;
}

예시에서는 .orange-section 요소를 오른쪽으로 나타낸다.

이것은 static 및 relative 위치 요소에 대해 작동한다.

출처: https://static-assets.codecademy.com/Courses/Learn-CSS/Display-Position/Float.png

주의

floated element는 예시와 같이 너비를 지정해야 한다.

그렇지 않으면 요소는 포함하는 요소의 전체 너비를 가정하고 플로트 값을 변경해도 가시적인 결과가 나오지 않는다.

Clear

float property을 사용하여 여러 요소를 한 번에 플로팅할 수도 있다.

그러나 mutiple floated elements의 높이가 다른 경우 페이지의 레이아웃에 영향을 줄 수 있다.

특히, 요소들은 서로 부딪혀서 다른 요소들이 왼쪽이나 오른쪽으로 제대로 이동하지 못하게 할 수 있다.

 

clear propert는 요소가 페이지에서 서로 충돌할 때 동작하는 방식을 지정한다.

다음 값 중 하나를 사용한다.

• left: 요소의 왼쪽은 동일한 containing element 내의 다른 요소에 닿지 않는다.
• right: 요소의 오른쪽은 동일한 containing element 내의 다른 요소에 닿지 않는다.
• both: 요소의 옆면은 동일한 containing element 내의 다른 요소에 닿는다.
• none: 요소가 양쪽에 닿을 수 있다.

div {
  width: 200px;
  float: left;
}
 
div.special {
  clear: left;
}

예제에서, 페이지의 모든 <div>는 왼쪽으로 떠 있다.

더 큰 <div>가 위치를 차단했기 때문에 class special을 포함한 요소는 왼쪽으로 이동하지 않는다.

clear property를 left로 설정하면 special <div>는 페이지 왼쪽 끝까지 이동한다.

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-improved-styling-with-css/modules/fecp-learn-css-display-and-positioning/cheatsheet

Improved Styling with CSS: Learn CSS: Display and Positioning Cheatsheet | Codecademy

• https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Inline elements - HTML: HyperText Markup Language | MDN

• https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

Block-level elements - HTML: HyperText Markup Language | MDN