html_css

display:flex, position:relative

자무카 2023. 1. 12.

tistory 글 작성 단축키 Ctrl + i

block 속성을 inline-block 으로 변경하거나, div 에 float 속성 등. 여러가지 편법 같은 스킬들이 많아졌다.

1. display: inline / block / inline-block / flex / grid

1. 요소는 display 속성이 있다. 화면에 어떻게 표현될지. ( display: none, inline, block, inline-block, flex, grid )

<body> 이하 html 을 구성하는 요소들은 inline이나 block 속성을 갖고 있다.

inline 속성은 '안녕하세요' 같은 텍스트나 이미지 등

block 은 텍스트나 이미지를 감싸고 있는 요소들이다. 즉, <div>안녕</div>, <h1>제목</h1> 같은 것들.

2. 그러면, inline-block, flex, grid 는?

block 과 inline 이 요소들의 display 기본값인데, 한 줄에 block 요소들을 여러개 배치해야하는 경우가 많이 발생했다.

그래서, 두 가지를 짬뽕한 inline-block 을 사용하는데, 여러 문제와 복잡함이 발생했고, block 속성을 inline-block 으로 변경하거나, div 에 float 속성 등. 여러가지 편법 같은 스킬들이 많아졌다.

이를 위해 flex 와 grid 가 출현

각각 가로 세로 정렬 방법

flex 정렬

justify-content

align-items

position 기본값은 static(고정)이다. 요소의 위치를 변경하려면, dwidth, height, 요소와 결합을 통해 위치 조정하는 것이 당연하니까.

이 속성들의 특징은 어떤 요소를 기준으로, 이동할지다.

1) 위치를 사용하지 않는 static (기본값) : top, left, right 등이 있어도 작동 안되게 함

2) 위치값(top,bottom,left,right)의 기준을 잡아주는 속성

relative : 내 기준
fixed : 뷰포트 기준
sticky
absolute : position 속성을 가진 가장 가까운 조상 요소를 기준으로 함. ( 다 없으면, body 를 기준으로 잡음). inline 처럼 속성이 변경돼서, 요소의 크기에 따라 변하기 때문에, width 필요.
조상(부모)의 위치를 기준으로 하기 때문에, 주로 container, ul 등 안에서 사용된다.

css 가상 선택자: 형제 + ~, a[href^="http"] 등 (0)	2023.01.09
html에 data-*사용법 (0)	2023.01.06
css 하이라이트 hover , z-index, transition (0)	2022.11.07
스벅 예제: css 포지션, 애니메이션, JS 스크롤 이벤트 (0)	2022.11.06
display: inline-block, 가로 정렬 flex, grid (0)	2022.11.02