Bootstrap

부트스트랩을 이용하면 손쉽게 반응형 웹페이지를 만들 수 있다. 저번 포스팅에서는 간단한 그리드형태를 만들어 봤었는데, 추가로 html element 들의 위치를 지정하는 방법을 정리해본다. 클래스이름은 position-*** 으로 시작하며, 여러가지 기능이 있지만, position-relative, position-absolute 만 주로 다룰 예정이다.

부트스트랩 아이콘은 2,000개 이상의 아이콘이 있는 무료 고품질 오픈 소스 아이콘 라이브러리이며, SVG, SVG 스프라이트 또는 웹 글꼴 등 원하는 대로 포함가능하다. 아이콘을 적당히 잘쓰면 깔끔한 디자인의 웹페이지를 만들 수 있다. Bootstrap Icons 을 hugo 프로젝트에 연동하는 법을 정리해본다.

반응형 웹사이트 구축하는데 Bootstrap 로 주로 공부하며 사용하고 있다. 웹페이지에 가끔 인스타그램, 트위터 같은 아이콘이 필요할 때가 있다. 이미지로 할 수도 있지만, 아이콘으로도 추가할 수 있다. Bootstrap 에서는 아이콘도 무료로 배포하여 사용할 수 있게 되어 있다.

Bootstrap 을 이용해서 웹사이트를 만드는 편인데, 거기서 제공하는 validation 기능을 사용하고 있다. 그대로 Svelte 에서 사용할 수 있으면 좋겠지만, 그게 그렇게 되질 않았다. SvelteKit 을 사용하여 각페이지들을 Route 하기위해 페이지를 컴포넌트처럼 나누어 개발하고 합치기 때문인데, 알아보는 시간은 꽤나 오래걸렸지만 그래도 비슷하게 구현을 했다.

웹사이트를 만들면서 반응형 웹사이트(responsive site)는 꼭 고려해야할 사항이다. 웹사이트는 브라우저만 있으면 접속할 수 있는 서비스이기 때문에, 폰, 태블릿, pc 등 다양한 기기의 각기다른 해상도에서 유동적으로 레이아웃이 변동되면서 가독성 있는 레이아웃으로 표현되어야 한다. 이런 반응형 웹을 만들기위해 부트스트랩(bootstrap) 프레임워크를 사용하고 있다. 아주 간단한 예시로 정리해볼까 한다. 아래 예제들은 여기 사이트 에서 직접 확인 가능하다.