개인 서비스 UI 개선 Bootstrap 입문 2일 후의 Before/After

개요

미션

자작 서비스 (위도 경도 단위를 변환하는 사이트)의 UI를 마토모로 만들기

이 기사에서 쓰기

CSS를 한 줄도 쓴 적이 없는 초보자가 Bootstrap에서 어떻게 UI를 개선할 수 있었는지의 결과(실작 2일)

즉, 지금부터 Bootstrap을 사용해 보려고 하는 사람에 대한 비용효과의 소개.

이 기사에서 쓰지 않는 것

Bootstrap에 대한 기술 세부 사항

필자의 스킬

Javascript : 약 2 개월 전에 다음 사이트를 만들기 위해 js를 조금 공부했습니다. 아마추어 레벨.

CSS : HTML의 외형에 관한 DSL이라는 것은 알고 있지만 스스로 쓴 적은 없다.

Vue, Typescript, Webpack, Babel 등 여러가지 : 아직 무엇이 무엇인지 모르겠다.

필자는 평상시는 임베디드 소프트웨어의 일을 하고 있어 Web계는 초보자입니다.

만든 것

Before

위도 경도 단위를 변환하는 계산 사이트입니다. 하단의 "Oops!"는 사실 Google Map이 표시됩니다.


After

Bootstrap에서 화장 후.
아이콘류는 FontAwesome . 실제 동작 페이지는 여기.

동기 부여

과거 게시물 에도 기재했습니다만, 이 위도 경도의 변환 사이트를 작성한 동기는 절반은 자신의 본업용입니다.

이 종류의 사이트는 이미 여러 가지가 있지만 다음 조건을 충족하는 것이 의외로 없었습니다.
- 자주 사용되는 모든 단위(십진수/도분/도분초/NMEA)를 망라
- 일일이 "변환"버튼을 누를 필요가 없습니다.
- 해당 위치를 지도에서 확인 가능

단지 그때, 스스로 Web서비스를 만드는 공부를 해 보고 싶다고 생각해, 소재로서 이것을 선택했습니다.

UI 작성에 관한 고민

프론트 엔드가 너무 많아서 잘 모르겠지만 조사하는 동안 여러 가지가 있음을 알았습니다.

React 라든지 Vue 같은 사람은 역시 힘들 것 같아

단순히 외모 (CSS)를 그렇게하는 것만으로는 Bootstrap을 잘 다루면 좋을 것

→GW로 집중적으로 Bootstrap 해본다

샀던 책

Bootstrap4 퍼스트 가이드

그리드 시스템은 무엇입니까? 에서 설명되어 초보자에게는 좋았습니다.
1일 다방에 앉아 7할 정도 읽을 수 있었습니다.
이하 3개만 이해해 버리면, 우선 여러가지 놀 수 있게 됩니다.

그리드 시스템 개요

<header></header>에서 Bootstrap을 CDN으로로드

Bootstrap의 class 속성을 설정하면, 실제로 변화가 보인다→다음은 여러가지 시험한다

결과

위의 Before/After 사진이 전부입니다만, 실제로 Bootstrap을 사용해 보고 이하 인상.

사용법은 정말 간단합니다. (추구하면 여러가지 있다고 생각하지만, 조금 변화를 일으킬 뿐이라면, 학습 비용은 1일)

반응형 디자인(화면 크기에 따라 적응적으로 레이아웃을 바꾼다)을 간단하게 할 수 있는 것은 조금 감동.

Bootstrap 자체는 CDN으로 읽을 수 있기 때문에, 쉬운 설치 등도 불필요.

웹 페이지를 만들 수 있다는 것은 사람에게 자신의 생각이나 작품을 보여주는 장소를 만들 수 있다는 것입니다.
쉽게 웹 페이지를 세련되게 할 수 있기 때문에 어떤 종류의 엔지니어라도 기억할 가치가 있다고 느꼈습니다.

P.S. 더 이런 편이 좋다는 의견 환영입니다.