낭고의 개발노트

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 dire..

Grid Fraction - 총 합에서 차지하는 비율(ex. 1fr) - repeat 속성으로 줄여 쓰기 .container { display: grid; /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(3,100px); */ grid-template: repeat (3,100px)/repeat(2,1fr); /* 앞은 열/뒤는 줄 */ grid-gap: 10px; } Positioning .container { display: grid; grid-gap: 3px; grid-template-columns:repeat(12,1fr); grid-te..

❑ 가로배치 ⇨ 부모한테 display:flex 속성을 주면 무조건 가로배치 ⇨ 자식 요소한테 width값을 주면 밑으로 안 흘러 넘치게 딱 그 넓이만큼 지정됨 ❑ Flex 속성 플렉스 박스 플렉스 요소 display order flex-direction align-self justify-content flex align-items flex-wrap flow-flow align-content # 플렉스 아이템 배치 방향 설정 (= 주축 변경) 속성명 : 속성값 설명 flex-direction:row(기본값) - 기본값으로 주축의 방향을 가로로 설정 - 요소를 주축의 시작점에서 끝점 방향으로 배치 flex-direction:row-reverse - 요소를 주축의 끝점에서 시작점 방향으로 배..

❑ shape-outside를 사용할 수 있는 조건 ⇨ float ⇨ 크기 속성 ❑ shape-outside: 모양(값); ⇨ 모양: circle, ellipse(타원형), inset(안쪽), polygon(다각형) shape-outside: circle(원크기 at 중심점 좌표(x축 y축)); shape-outside: circle(50% at 50% 50%); body { font-family: sans-serif; font-size: 18px; } .megaphone { float: left; margin-right: 10px; shape-outside: circle(50%); } .desktop { float: left; https://assets.codepen.i..