text의 길이가 특정 범위를 넘어가는 경우에 뒷 글자들이 잘려 없어지고 ...이 붙은 경우를 본 적 있을 것이다. CSS를 이용해서 이런 말 줄임표를 만들 수 있다. 페이지를 만들다 보면 은근히 자주 말 줄임표가 필요한 상황들이 생긴다. 여러 줄로 줄이는 경우 h1 { width: 300px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } width : 300px : text가 차지할 영역을 정해줘야한다. width는 부모 엘리먼트나 대상 엘리먼트에 적용한다. overflow: hidden : 영역을 넘어가는 text를 보이지 않게 한다. display: -webkit-box : ..

flexbox는 행 또는 열을 기준으로 항목들을 1차원 공간에 배치하는 메소드이다. 항목들은 공간의 크기에 따라 변형된다. flexbox는 항목들을 담는 공간인 flex-container와 각 항목들을 나타내는 flex-item으로 구성된다. 각각 다른 속성을 적용시킬 수 있다. flexbox에는 중심축(main axis)과 교차축(cross axis)이 존재한다. 아이템이 정렬되는 기준이 되는 축이 중심축이고 그와 반대되는 축이 교차축이다. 예를들어 아이템이 수평으로 정렬되고 있다면 중심축은 row, 교차축은 column이 된다. container 속성 display: flex; container 역할을 할 곳에 display 속성의 값을 flex로 입력해서 flexbox를 만들어준다. flex-dir..