Bootstrap4를 사용하여 포트폴리오 사이트를 제작해 보았습니다.

왜 만들려고 생각했는가

웹 백열 교실의 Bootstrap 콘텐츠를 학습하고 이것이라면 쉽게 포트폴리오를 만들 수 있는 것은? 라고 생각했다.

완성된 사이트

h tps://아 tぁしんん. 기주 b. 이오 / 보오 tst 등 p4_포rt 후 리오 1 /
코드

만들 때 조사한 것

Position:fixed를 적응하고 싶다

Bootstrap4에서 fixed를 적용하면 클래스 값에

fixed-top

라고 기입한다. 이 경우 다른 요소와 겹치지 않도록 body

padding-top

넣어야합니다.

중앙 정렬 방법

블록을 중앙으로 옮길 때는

mx-auto //マージン左右をauto

를 입력합니다. 또, 문자의 중앙 정렬 (text-align:center) 의 경우는

text-center

를 입력합니다.

navbar의 버튼을 클릭하면 지정된 콘텐츠로 날아가게 했다.

지정된 콘텐츠의 id 값을 설정하고 버튼의 href에 id 값을 입력했습니다.

가로 가득 사진 위에 문자를 넣을 수있는 블록을 만들고 싶습니다.

부모 요소의 모든 가로 방향을 사용할 수 있습니다 jumbotron-fluid를 사용했습니다.

자기소개란을 만들고 싶다

grid 시스템을 이용해 화면을 축소했을 때에도 소개문이 보이도록 했다.

Bootstrap4의 설명문을 가득 채우지 않게 하고 싶다.

width 에 ％ 를 사용하여 화면을 전환해도 좌우로 일정한 여유가 나오도록 했다.

츠마즈키

・각 컨텐츠로 이동할 때 navbar를 연동해 active로 하고 싶었지만 방법이 이마이치 몰랐다.

・각 컨텐츠로 이동할 때 애니메이션 효과를 붙여 스크롤시키고 싶다고 생각해 Progate로 배운 Scrolltop를 사용해 보았지만 잘 움직이지 않았다. (다른 방법이 있을지도)

・지금 있는 콘텐츠 아래에 무료 템플릿 일람 소개를 만들고 싶었지만 썸네일을 깨끗이 늘어놓지 못하고 소거했다.


참고 : h tps : // b ck 로 ck ぢ 기한 l. 기주 b. 이오 / s rt 보오 tst et p-c reachi / /

・자신의 스킬을 그래프로 표시할 수 있도록 하고 싶었지만 그러한 기능은 Bootstrap에 없었기 때문에 포기했다.

감상

역시 구축 자체를 쉽게 할 수 있다고 해도 프레임워크나 디자인을 배우지 않은 완전한 초보자가 템플릿 없이 0부터 사이트를 만드는 것은 난이도가 높다고 느꼈다. (제작 시간 중 절반은 디자인을 생각하고 있었다) 또 코드 자체도 검색해 나온 코드를 그대로 박아 넣었을 뿐이라고 말하는 부분도 있기 때문에 왜 여기에 이 ​​값이 필요한가 하는 것도 부드럽게 밖에 알지 못하고 아직 지식 부족이라고 통감했다.
다음에 만들 때는 좀 더 학습을 하고 도전하고 싶다.