[TIL] CSS {position : display : float} 정리하기

성정민·2020년 4월 20일

🔥 이젠 더 물러날 수 없어!

SBS 아카데미 학원(절대다니지마시오), 국비수업을 거쳐 그간 나름 웹사이트도 만들어 봤지만 아무래도 old한 강사진에게 old한 방식으로 받았던 수업으론 반응형 웹사이트를 만드는 건 불가능했고 1920x1080의 기초 웹사이트를 고작 만드는 정도였다.
나름 자신 있다고 생각하던 HTML / CSS였지만 사전스터디 때 처음 Flex box와 Grid Layout 등 신문물을 접하고는 내가 지금까지 얼마나 낡은 코딩을 했는지 실감했다.

4주간의 사전 스터디가 끝나고 본격적으로 Wecode 부트캠프의 첫날이 밝았다.

repl.it으로 html/css기초를 개념설명+문제풀이 형식으로 스터디하고 오늘이야말로 테트리스처럼 군데군데 파인 구멍을 제대로 막아보기로 한다.

위 게시물은 필자의 지식 정리를 위한 글입니다.
처음부터 차근차근(🙅‍♀️)

position
static, relative, absolute, fixed, sticky, unset, inherit, initial
display
inline, inline-block, block
float

1️⃣ position 프로퍼티

position 프로퍼티는 태그를 어떻게 위치시킬지 정하며 아래의 5가지 값을 가집니다.

static(기본위치)

: 다른 태그와의 관계에 따라 배치되며 임의로 위치 조절은 불가능합니다. 기본적으로 위 값을 지정할 일은 없지만 이미 설정된 position을 무력화 할 때 사용합니다.

absolute(절대위치)

: 부모 또는 가장 가까이 있는 조상 요소를 기준으로 하며 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.
1. static은 부모가 될 수 없기 때문에 absolute를 사용할 때는 부모 요소에 relative를 설정해줘야 합니다.
🧐 if 부모, 조상이 모두 static인 경우?
-> 최상위 요소인 body를 기준으로 이동합니다.
2. 다른 요소가 자리잡고 있어도 옆으로 밀리지 않고 요소 위에 위치하며 이는 z-index프로퍼티로 레이어 조정이 가능합니다.
3. absolute 사용시 block요소도 inline요소와 같이 컨텐츠 영역만을 차지하기 때문에 반드시 width height크기 설정을 해야합니다.
4. 부모의 위치를 벗어나 어디든 ~자유롭게~ 위치할 수 있습니다

position을 사용한 중앙정렬
<style>
div { 
  width:300px;
  background:red;
  position:absolute;
  top:calc(50% - 50px);
  left:calc(50% - 150px);
}
</style>

relative(상대위치)

: static 위치를 기준으로 움직이며 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.

fixed(고정위치)

: 부모요소와 상관없이 viewport를 기준으로 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.
1. 스크롤에 영향을 받지 않고 언제나 고정된 위치를 유지합니다.
2. fixed 또한 absolute와 동일하게 사용시 block요소도 inline요소와 같이 컨텐츠 영역만을 차지하기 때문에 반드시 width height크기 설정을 해야합니다.
3. 🧐 홈페이지 로딩이 느려지는 원인이 될 수 있으니 주의!
4. IE7 이상 지원

주의 : 아래와 같이 사용하면 로딩 속도가 느려질 수 있어요
<div style="position:relative;">
  <div style="position:fixed; background:red;">
    <div style="position:absolute; top:-60px; left:-100px; padding:0px">
      https://github.com/JeongminSung
    </div>
  </div>
</div>

sticky

: relative처럼 작동하다가, 설정된 top, right, bottom, left 값 위치 도달시 고정됩니다.
1. 스크롤 상단 고정 메뉴를 만들때 사용됩니다
2. IE 지원 X

unset

속성을 부모로부터 상속받은 경우 그 상속값으로, 아니면 초기값으로 재설정

inherit

부모 요소의 속성 상속

initial

속성 초기화

2️⃣ display 프로퍼티

display는 크게 inline, block, inline-block, none으로 크게 네 종류가 주로 사용되는데, 실제로 W3C에서 CSS 2.1 Specification를 살펴보면 display속성에 지정할 수 있는 값은 무려 16가지입니다

inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

생각보다 엄청 많지요?😅

이 16가지의 속성값들은 4가지의 계열로 나눌 수 있습니다.

1. Box-model 계열
2. List 계열
3. Table 계열
4. 기타

Box-model 계열

대부분의 태그에서 사용하는 값들입니다.
어떠한 요소를 block or inline요소로 만들 때 사용합니다.
자주 쓰는 block, inline, inline-block의 3개 값이 여기에 속합니다.

List 계열

<li>태그에서는 list-item 이라는 속성을 사용합니다.
기본적으로는 block요소처럼 작용하지만, 추가적으로 list-style 속성을 이용할 수 있다는 특징이 있습니다.

Table 계열

<table> 태그와 그 부속 태그에서 사용되는 값입니다. display 프로퍼티 값의 2/3를 차지하는 비중있는 녀석이라 The CSS table model를 살펴보면 <table>과 부속태그에는 저마다의 display 속성값이 정해져 있음을 알 수 있습니다.

기타

none : 해당 요소와 그 자식요소까지 화면과 레이아웃 자체에서 완전히 사라지게 됩니다. 영역조차 남지 않습니다.

inherit : 부모요소의 display 속성을 그대로 따르게 됩니다.

이 외에도 전후의 맥락을 파악해서 display 값을 결정하는 run-in 값이 있습니다.
하지만 개발자의 의도와 다르게 작동할 가능성이 있어 사용하지 않는 것을 권장합니다.

🧐 inline-block과 Table 계열 값은 크로스 브라우저 문제를 야기합니다.

inline-block과 Table 계열에 속성의 값은 IE7과 그 하위 버전에서는 작동되지 않는다고 알려져 있습니다.
그러나 실제로 테스트를 해보면 Table 계열의 값들은 OS에 따라 결과가 다릅니다.
이것이 가장 문제가 되는 경우는 <table>을 화면에 숨기고 보여주기 위해 JavaScript를 이용할 때입니다. 숨길때는 display:none으로 지정하면 되지만, 보일 때에는 브라우저마다 지원여부가 다르기 때문에 복잡합니다.
이를 해결하기 위해선 display 속성을 빈 문자열로 설정하는 것으로 해결할 수 있습니다. 사용자가 CSS 속성값을 지정하지 않으면, 해당 속성값은 브라우저마다 가지고 있는 기본값으로 지정되기 때문입니다.

<script>
function hide(tr)
{
    tr.style.display = 'none';
}
function show(tr)
{
    //tr.style.display = 'table-row';  // 위험! 
    tr.style.display = '';
}
</script>
예를들면 예제코드처럼 <tr>태그를 보이고 숨기는 스크립트가 있을 때, 보여지는 함수에서 display= 'table-row';로 설정한다면 되는 브라우저, 안 되는 브라우저가 생기는 크로스 브라우저 문제가 생길 수 있습니다.
이 때는 display를 display = ''; 빈 문자열로 설정하면 table-row를 지원하는 브라우저는 table-row 값으로, 그렇지 않은 브라우저에서는 지원되는 display 값으로 <tr>을 세팅할 것입니다.