📚 Flex Flex는 레이아웃 배치를 위해 고안된 기능이다. 때문에 float나 inline-block보다 더 편리하고 강력한 속성들을 사용할 수 있다. 기본적으로 레이아웃 배치에 사용되는 속성들은 대부분 컨테이너에 적용하고, 아이템들은 적용된 속성에 따라 배치된다. 따라서 flex를 사용하기 위해서는 아래와 같은 container와 item 구조가 필요하다. flex box !!! 여기서 container는 Flex container, item은 Flex item이라고 부른다. Flex 속성은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성, 두 가지로 나눌 수 있다. 📌 컨테이너에 적용하는 속성 💜 display: flex; flex를 사용하기 위해선 display를 flex로 지정해줘야 한다. ..

📚 -webkit-line-clamp .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } -webkit-line-clamp에 지정한 수까지만 라인이 표시된다. 넘치는 text를 자동으로 숨겨주진 않기 때문에 overflow를 hidden으로 설정해야 한다.

📚 절대적인 유닛 & 상대적인 유닛 Absolute Relative px em rem vw vh % 🧡 em /* 브라우저의 font-size 기본값: 16px */ .parent { font-size: 5em; /* 80px */ } .child { font-size: 0.5em; /* 40px */ } 부모 요소의 값을 기준으로 계산한다. 💛 rem /* 브라우저의 font-size 기본값: 16px */ .parent { font-size: 5em; /* 80px */ } .child { font-size: 0.5em; /* 8px */ } 루트의 값을 기준으로 계산한다. 💚 vw /* viewport width: 500px */ .box { width: 0.5vw; /* 250px */ heigh..

📌 margin: auto block level의 요소는 한 줄을 차지하기 때문에 브라우저에서 자동적으로 요소의 오른쪽에 margin을 넣어준다. margin: auto를 사용하면 브라우저에서 해당 margin을 좌우에 자동적으로 분배해준다. 따라서 수평 정렬만 가능하고, 수직 정렬은 불가하다. 📌 text-align: center text를 정렬하는 속성이지만, inline요소도 center에 정렬할 수 있다. 가운데 정렬하고 싶은 요소의 부모에 적용해야 한다. 📌 position & translate transform: translate(50%, 50%)는 자기 자신의 width, height에서 50%만큼 이동한다. 따라서 가운데 정렬하고 싶은 요소를 부모의 50%만큼 이동한 후 translate로..