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

DOM이란? DOM(문서 객체 모델)은 The Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 HTML, XML 의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕는다. HTML 문서가 브라우저에 로드되면 브라우저는 문서 내용을 파싱하여 브라우저가 이해할 수 있는 객체 모델로 변환한다. 이렇게 변환된 객체 모델을 DOM이라고 하는 것이다. DOM은 HTML 문서의 각 요소를 객체로 나타내며, 이 객체들은 상호 연관된 계층 구조를 갖는다. 이런 DOM 객체들은 JS와 같은 클라이언트 사이드 스크립트 언어를 통해 동적으로 조작할 수 있다. 예를들어 DOM을 이용하여 HTML 문..

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