조적조(Masonry) 형식의 레이아웃은 핀터레스트(Pinterest)형식으로 폭이 같지만 높이가 다른 여러 객체를 쌓아나가는 형태의 레이아웃입니다. Masonry라는 자바스크립트 라이브러리를 사용해서 레이아웃을 정렬하는 방법을 많이 사용합니다. 여기서는 라이브러리를 사용하지 않고 직접 스크립트를 작성합니다. 기본 원리 작업을 시작하기 전에 배치할 리스트의 컨테이너와 아이템의 전제를 살펴봅니다. 상대적인 위치를 가진 컨테이너에 배치할 아이템은 절대 좌표를 사용합니다. 각 아이템은 폰트와 이미지를 모두 로드한 뒤에는 높이가 변하지 않습니다. 아이템 배치는 컨테이너의 너비를 벗어나면 안됩니다. 뷰포트의 크기가 변하면 아이템의 너비가 바뀔 수 있습니다. 나중에 스타일을 스크립트로 추가할 수도 있지만 스타일시트..
[TypeScript/JavaScript] 직접 벽돌쌓기 형식의 리스트 레이아웃 만들기
다른 라이브러리의 도움 없이 순수 자바스크립트로 만든 자동목차 생성 기능입니다. 방식 본문 내용이 article-wrap클래스 안에 있다는 가정을 두고 본문에 있는 표제(heading)를 h1, h2, h3의 3단계까지 찾아서 각각의 id를 만들고, 목차에 항목을 추가하는 작업을 합니다. 중복을 피하고자 내부링크는 태그이름과 내용의 조합으로 만들었지만 같은 단계의 같은 제목인 경우 오작동을 피할 수 없습니다. 만든 목차는 ul리스트이며, toc-wrap 클래스를 가지고 있는 컨테이너 안에 들어가게 됩니다. 스킨편집등을 통해 별도로 제작해야 합니다. 소스코드 타입스크립트 // 본문 컨테이너와 목차 컨테이너 선택 var article_wrapper = document.querySelector(".articl..
순수 JavaScript로 만드는 자동 목차 기능
End of content
No more pages to load