•
display : 요소가 보여지는 방식을 지정
- display: block; → block element : 항상 새로운 줄 시작, 너비 디폴트 100%
Ex(<div>, <h1>, <p>, ,<header>, <section>......)
가능 : width, height, margin, padding
> HTML 요소
- display: inline; → inline element : 새로운 줄 시작 안함, 필요한 만큼(요소의 컨텐츠 크기) 너비 가짐
Ex(<a>, <span>, <img>......)
불가능 : width, height, margin-top, margin-bottom
—> display: inline-block 두둥둥좡 으로 해결
- display: inline-block; —> 브라우저에 해당 요소 출력 안함
•
position: static / relative / absolute / fixed ...
- position: static; : 기본값, 좌표 프로퍼티 못 씀
- position: relative; : 상대 위치, 기본적인 위치를 기준으로 좌표 사용
- position: absolute; : 부모나 조상 중 relative, absolute, fixed 가 선언된 곳 기준 좌표 프로퍼티 적용
→ 너비만 인라인처럼 바뀜, 마치 인라인 블럭
- position: fixed; : fixed는 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정
•
z-index : 숫자값이 클수록 전면에 출현 / static 제외한 요소에서 써야 적용됨
•
flexbox : flex container(부모 요소) ← display: flex; / flex item(자식 요소)
flex Container - flex-direction / flex-wrap / justify-content / align-items / align-content
flex item - flex-graw / flex-shrink / flex-basis / flex
** 플렉스 박스는 기본적으로 가로 혹은 세로에 정해둔 방향을 기준으로 프로퍼티를 정렬**
⇒ 웹 레이아웃 만들 수 있음
1.
flex-direction : flex 컨테이너 안의 item들의 방향을 정함, 디폴트 row,
row-reverse / column / column-reverse
2.
flex-wrap : flex 아이템이 flex 컨테이너를 벗어 났을 때 줄을 바꾸는 속성, 디폴트 nowrap
wrap
3.
justify-content : flex-direction으로 정해진 방향을 기준으로 수평으로 item 을 정렬하는 방법
flex-start(디폴트) / center / flex-end / space-around / space-between
4.
align-items : flex-direction으로 정해진 방향을 기준으로 수직으로 item 을 정렬하는 방법
row / column / stretch(디폴트) / flex-start / flex-end / center
** baseline : 안에 있는 글꼴의 기준으로 정렬
5.
align-content : flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬
stretch(디폴트) / flex-start / flex-end / center / space-between / space-around
1.
flex-grow : flex 아이템의 확장과 관련된 속성, 기본 0
2.
flex-shrink : flex 아이템의 축소와 관련된 속성, 기본 1
3.
flex-basis : flex 아이템의 기본 크기를 결정함, 기본 auto (단위 필수)
4.
flex : 1,2,3 축약형
코드 넣기