✨display

display 속성은 css에서 홈페이지 레이아웃을 정할 때 가장 중요한 속성으로, 웹페이지 상에 엘리먼트들이 어떻게 보여지고 다른 엘리먼트들의 상호배치 등을 결정한다. 자주 쓰는 것만 정리해놨다. MDN사이트(https://developer.mozilla.org/ko/docs/Web/CSS/display)에서 더 많은 내용을 찾을 수 있다.

block

display 속성이 block으로 지정된 요소들은 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자서 한 줄을 차지한다. 대표적인 블록태그로는 <div>,<p> 등이 있다.

display:block;

inline

inline으로 지정된 요소들은 그 요소의 내용 자체가 차지하는 공간만큼만 공간을 차지한다. 전후 줄바꿈없이 한 줄에 다른 inline 엘리먼트들이 있다면, 그 엘리먼트들과 한 줄에 나란하게 배치된다.

 display:inline;

inline-block

inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다. 해당 속성을 가진 태그는 대표적으로 <button>이나 <select> 등이 있다.
inline-block으로 스타일을 지정하면, 한 줄에 원하는 요소를 정확하게 원하는 너비만큼 배치할 수 있다.

display:inline-block;

위 세가지 속성을 그림으로 보면 다음과 같다.
 (출처:https://www.tutorialbrain.com/css_tutorial/css_display/)

none

none값 또한 흔히 쓰이는 속성으로, 엘리먼트를 보이지 않게 할 때 사용된다. 이는 javascript에서 엘리먼트를 제어할 때, 실제로 삭제 또는 재생성하지 않고 보이고 감추는 데에 흔히 사용된다. (visibility:hidden과 다른 점은 display:none은 렌더링시에 존재하지 않는 것처럼 작동한다는 것이고, visibility:hidden 은 보이지만 않을 뿐 공간은 차지하는 상태이다.)

display:none;

flex

flex 속성은 레이아웃 배치 전용 기능으로, float나 inline block 등의 기존 방식보다 편리한 점이 많다. 사용 시 구역을 flex container와 flex item으로 나눌 수 있다. 컨테이너는 flex 속성의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 배치되는 것이다.
flex의 속성들은 container에 적용되는 속성, item에 적용되는 속성으로 나뉜다. flex는 정말 다양한 속성들이 많아 자세한 사항은 아래 링크를 참고하면 좋다.
https://studiomeal.com/archives/197

display:flex;
/* 꾸미고 싶은 태그에 작성 후, flex 관련 속성들 중 원하는 속성을 적용시키면 된다. */

float

레이아웃 배치에 관련된 속성으로 특정 요소를 왼쪽, 오른쪽 등으로 배치할 수 있다. flex 속성이 더 다양하고 쓰이기 편리할 수 있지만, 많은 웹사이트들이 float를 사용하고 있다.

<div class ="parent">
  <div class="child">
    about float
  </div>
</div>

.child {
 float:left; /* 이 때, float 속성은 position의 absolute와 양립할 수 없다 */
 }

float의 속성값은 다음과 같다.

• left : 요소를 왼쪽으로 부유하게 설정
• right: 요소를 오른쪽으로 부유하게 설정
• none: default값으로, float를 설정하지 않는다

float를 해제시키자!

플로팅한 요소는 문서의 흐름을 벗어난 상태이기 때문에, 때때로 레이아웃을 망치기도 한다. 그 땐 float 기능을 해제해야 한다. 관용적인 방법으로, clear 속성을 이용해 해제하고 다른 방법으로 해제할 수도 있다.

.child {
 clear:left;
 }

clear의 속성값은 다음과 같다.

• left: 왼쪽에 플로팅된 요소를 해제
• right: 오른쪽에 플로팅된 요소를 해제
• both: 왼쪽 오른쪽 모두 플로팅 해제
• none: default값으로, 해제하지 않는다

다른 방법으로는 플로팅된 요소의 부모요소를 float 속성으로 지정해주어 자식 요소를 컨트롤할 수 있게 해주는 것이다. 플로팅된 요소가 자식요소인 경우 부모요소가 자식요소를 감싸지 못해 레이아웃이 무너지는 것처럼 보인다. 이땐, 부모요소에 똑같이 float 속성을 적용해주면 된다.

.parent {
 float:left;
 }

그 외에도 overflow:hidden;을 통해 제어할 수도 있지만, 동적 스크립팅으로 부모,자식 요소 밖으로 벗어나야 하는 경우에 제대로 표시되지 못할 수 있기 때문에 신중하게 선택해야 한다.

⚡️Position

position 속성은 html 요소의 위치를 지정하는 속성이다. 속성값으론 static, relative, absolute, fixed, or sticky 등이 있다.

<nav>home</nav>
<aside>side bar</aside>
<div class="parent">
  <div class="child">
    about position
  </div>
</div>

static

static값은 디폴트값으로 문서의 일반적인 흐름에 따라 지정되고, 굳이 지정해줘서 사용하진 않는다.

relative

relative는 해당 요소의 기본값(static)을 기준으로 위치를 설정하는 방식이다.

.parent {
 position:relative;
 }

absolute

부모요소를 기준으로 위치를 지정하는 방식이다. 부모요소의 position에 relative, fixed, absolute 하나라도 있어야 한다.

.child {
 position: absolute;
 /* absolute로 지정시, 부모요소를 기준으로 top,bottom,left,right 등의 속성으로 어느 정도에 위치시킬 것인지 설정할 수 있다. */
 top:10px;
 left:15px; 
 }

fixed

뷰포트를 기준으로 위치를 지정하는 방식이다. 말그대로 요소를 fixed 하여 스크롤 시에도 움직이지 않게 한다. 주로 navigation bar를 고정시킬 때 사용한다.

nav {
 position:fixed;
 /* absolute와 같이 top,right,bottom,left 등의 속성을 줄 수 있다. 이 경운 navigation bar이므로 top,left값을 0으로 줄 것이다. */
 top:0;
 left:0;
 }

sticky

sticky는 relative처럼 동작하면서 relative 요소가 없는 경우엔 fixed처럼 동작하는 두 가지 효과를 모두 가질 수 있다. 이런 레이아웃은 aside 요소에 많이 사용된다.
sticky는 부모 요소 중 어느 하나라도 overflow:hidden 값을 가진 경우 작동하지 않으니 모든 부모 요소의 overflow 값을 확인해야 한다.

aside {
 position: sticky;
 /* 마찬가지로 top,left,bottom,right 등의 값을 줄 수 있다. */
 left:10px;
}

참고
https://webclub.tistory.com/606
https://poiemaweb.com/css3-layout
https://studiomeal.com/archives/197
http://www.tcpschool.com/css/css_position_position
https://webisfree.com/2018-11-16/[css]-스크롤해도-엘리먼트가-움직이지-않는-방법-position-sticky