조적조(Masonry) 형식의 레이아웃은 핀터레스트(Pinterest)형식으로 폭이 같지만 높이가 다른 여러 객체를 쌓아나가는 형태의 레이아웃입니다. Masonry라는 자바스크립트 라이브러리를 사용해서 레이아웃을 정렬하는 방법을 많이 사용합니다. 여기서는 라이브러리를 사용하지 않고 직접 스크립트를 작성합니다. 기본 원리 작업을 시작하기 전에 배치할 리스트의 컨테이너와 아이템의 전제를 살펴봅니다. 상대적인 위치를 가진 컨테이너에 배치할 아이템은 절대 좌표를 사용합니다. 각 아이템은 폰트와 이미지를 모두 로드한 뒤에는 높이가 변하지 않습니다. 아이템 배치는 컨테이너의 너비를 벗어나면 안됩니다. 뷰포트의 크기가 변하면 아이템의 너비가 바뀔 수 있습니다. 나중에 스타일을 스크립트로 추가할 수도 있지만 스타일시트..
[TypeScript/JavaScript] 직접 벽돌쌓기 형식의 리스트 레이아웃 만들기
사이트맵은 검색엔진 등이 색인할 웹페이지 목록을 알려줍니다. 이전에 다뤘던 템플릿에 Jekyll SEO Tag 사용하기과 함께 검색엔진 친화를 통해 내 포트폴리오에 검색엔진을 통한 방문이 더욱 수월해지도록 하는 역할을 합니다. 깃허브 페이지가 제공하는 Jekyll Sitemap Generator 플러그인은 자동으로 sitemap.xml을 생성하여 일일히 페이지를 추가하거나 제거할때마다 편집하지 않아도 검색엔진이 최신 목록을 받아올 수 있도록 합니다. 사이트맵 모듈 사용 지킬 설정파일인 _config.yml에 다음 내용을 추가합니다. url: "페이지의 URL" plugins: - jekyll-sitemap 지킬 변환 엔진을 재실행 한 뒤 _site 디렉토리 내부에 robots.txt와 sitemap.xm..
포트폴리오를 위한 깃허브 페이지: 사이트맵과 SASS 사용
깃허브 페이지가 지공하는 플러그인 목록에는 jekyll-seo-tag이 있습니다. 이 플러그인은 검색엔진들이 쉡게 정보를 알아내어 검색결과에 반영할 수 있도록 {{ content }} {{ content }}는 마크다운 문서 등으로 제작한 페이지의 내용으로 변환하는 태그입니다. SEO 플러그인의 설정 지킬 설정 파일인 _config.yml에 플러그인 설정을 추가하면 지원하는 SEO 태그를 추가할 수 있습니다. 지원하는 설정은 플러그인의 기본 사용법과 [고급 사용법] 문서를 참고해서 착성할 수 있습니다. _config.yml을 수정하면 지킬 변환엔진을 재실행해야 페이지에 적용됩니다. title: soma0sd 깃허브 페이지 author: soma0sd email: soma0sd@gmail.com # jek..
포트폴리오를 위한 깃허브 페이지: 템플릿에 Jekyll SEO Tag 사용하기
이번에는 비주얼 스튜디오 코드(Visual Studio Code; VSCode)로 깃허브 페이지(GitHub Pages)를 개발하기 위한 기본 설정을 수행합니다. 최소실행에 필요한 파일을 몇 개 작성하고, 개발에 유용한 VSCode 확장을 설치합니다. 또한 간단한 단축키로 테스트를 수행할 수 있도록 테스크를 작성합니다. VSCode를 포함한 개발도구가 이미 설치되어 있다고 가정하고 시작합니다. 아직 준비가 되지 않았다면 로컬 테스트 환경 구정 포스트를 참고하여 도구를 설치한 뒤 진행합니다. 기본파일 생성 깃허브 페이지는 웹페이지 생성기로 지킬(Jekyll)을 사용합니다. 정적 웹 페이지를 생성하는 최소한의 파일은 _config.yml, index.md입니다. 이 파일들은 깃 명령으로 복제한 로컬 저장소 ..
포트폴리오를 위한 깃허브 페이지: VSCode 개발 설정
이 과정은 우분투 리눅스를 기준으로 작성되었습니다. 윈도우 환경에서 리눅스를 사용하려는 경우에는 아래 포스트를 참고하세요. 윈도우에서 로컬 테스트 환경을 구성하는 것은 상당히 귀찮고 불편합니다. 포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성 깃허브 페이지(GitHub Pages)는 몇 가지 플러그인을 포함한 지킬(Jekyll)을 사용하여 정적 웹페이지를 구성할 수 있습니다. 이 지킬은 루비(Ruby) 언어로 짜여진 템플릿 엔진이며, 템플릿을 구성하는 파일은 기존의 문서에 리퀴드(Liquid) 라는 템플릿 언어를 혼합하여 작성합니다. 환경 구성과정에서 설치한 모든 것을 다룰줄 알아야 할 필요는 없습니다. 특히 루비는 깃허브 페이지를 작성하면서 쓰이는 일이 없습니다. 우분투 업데이트 & 업그레이드..
포트폴리오를 위한 깃허브 페이지: 로컬 테스트 환경 구성
코스코드를 수정한 이력을 추적하고 관리하는 버전관리 시스템인 깃(git)의 저장소를 제공하는 깃허브(GitHub)는 저장소를 온라인으로 관리하고 저장소별로 커뮤니티 기능이나 문서화 기능을 제공하기도 합니다. 이번에 보유한 깃허브 저장소를 정리해서 외부에 공개해야 할 일이 생겼습니다. 깃허브는 깃허브 페이지(GitHub Pages)서비스를 무료로 제공합니다. 계정의 웹페이지나 공개저장소를 위한 웹페이지를 작성할 수 있습니다. 다만 데이터베이스를 사용할 수 없기 때문에 외부 서비스를 사용하지 않으면 로그인이나 댓글, 게시판, 추천 기능 같은 것은 구현할 수는 없습니다. WSL 설치하기 저는 윈도우 11 환경에서 비주얼 스튜디오 코드(VSCode)로 소스코드를 작성하고 있습니다. 그러나 이 환경 그대로 깃허브..
포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성
CSS의 @media속성인 prefers-color-scheme을 소개하고 CSS의 변수를 활용하여 색상표를 만드는 방법을 알아봅니다. 추가 정보가 필요하다면 모질라재단의 prefers-color-scheme 속성에 대한 설명을 참고하세요. 컴퓨터나 스마트폰을 사용할 때 다른 앱은 어두운 테마를 사용하는데 웹페이지가 밝거나 하면 번갈아서 볼 때 눈이 피로해질겁니다. 웹페이지도 다른 앱들과 같은 테마를 사용하고자 할 때 쓸 수 있는 방법이 미디어 속성 prefers-color-scheme 입니다. 라이트 / 다크 모드의 기준 윈도우 11의 경우에는 개인설정 > 색 항목에서 모드를 변경할 수 있습니다. 안드로이드는 기종마다 차이가 있지만 일단은 설정 메뉴 어딘가에서 변경할 수 있는 모양입니다. 기본적인 사용..
[CSS] 페이지를 OS의 설정에 따라 다크/라이트 모드로 보여주기
티스토리 API를 사용하여 사이트맵 API를 제작합니다. 자동으로 읽기 전용의 엑세스 코드를 받아 공개한 포스트 목록을 읽어들입니다. 엑세스 코드가 만료될 때와 더이상 수집할 포스트가 없을 때에 수집이 종료됩니다. 방법을 찾아내어 개선해보도록 하겠습니다. 사용법 아래의 블로그 아이디에 사이트맵을 작성할 블로그를 입력합니다. 아래의 소스코드 박스에서 사이트맵 생성 결과를 보고 정상적으로 공개한 포스트들이 입력되었는지 확인한 후 다운로드 항목의 sitemap.xml을 클릭하여 사이트맵을 다운로드 받으면 됩니다. 이후, 포스트를 하나 작성한 후 비공개합니다. 비공개한 포스트의 ID를 찾습니다. ID는 포스트 주소가 숫자일 때, 포스트 링크의 끝 숫자입니다. https://{블로그ID}.tistory.com/a..
티스토리 API를 이용한 사이트맵 생성기
다른 라이브러리의 도움 없이 순수 자바스크립트로 만든 자동목차 생성 기능입니다. 방식 본문 내용이 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