container query / Logical Props

CSS container query

참고사이트: https://codepen.io/tutsplus/pen/LYLyYdQ

🙾  

 

---

CSS Logical Props

direction ltr (기본값)

horizontal-tb (기본값)

inline (= 글씨가 채워지는 방향)

 

ltr = left to right

tb = top to bottom

writing-mode

vertical-lr

vertical-rl

 

▏ Physical(물리적) VS Logical(논리적)

🙾  phycial property(물리적 속성들): margin-left, padding-left, border-top

direction: rtl;

margin-left: 4rem;

 

🙾  논리적 속성들: writing-mode direction

direction: rtl;

margin-inline-end: 4em;

 

▏ CSS 우선 순위

🙾 레이어의 순서를 결정

- @layer reset, layout, section;

 

🙾 @import 그룹화

- @import url(reset.css) layer(reset);

- @import url(layout.css) layer(layout);

 

🙾 @layer 스타일 추가

- @layer reset { }

- @layer reset {  }

- @layer section{  }

 

---

CSS MULTI- COLUMNS

.container {
	width: 75%;
	margin:0 auto;
/* 	column-count: 3;
	column-width: 10rem; */
	columns : 10rem 3;
}

@media and (min-height:400px){
	.container{
		columns:3;
	}
}