- 오늘의 학습 키워드
부트 스트랩 ,js, 웹페이지
- 공부한 내용 내말로 풀어 정리해 보기
오늘은 자기소개를 위한 웹페이지 만들기라는 미니프로젝트에서 나의 소개페이지를 만들기 위해Bootstrap이라는 동적인 웹 사이트 및 웹 응용 개발을 위한 프런트엔드 프레임워크로, 입력 창, 버튼, 내비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.
한마디로 좀 더 편리하게 웹페이지를 만들기 위한 툴들을 무료로 배포해 주는 것이다.
사전 교육에서는 부트 스트랩을 사용하기 위해서는 <head> </head> 헤드 부분에 부트스트랩 css와 js를 링크를 해주어야 한다.
//아래부분 부트스트랩 스타일 시트
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
//아래 부분이 부트스트랩 자바스크립트
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
사전교육 강의에서는 부트캠프의 스타일 시트만 링크하는 것을 알려주어서
애니메이션이 있는 Modal이라는 디자인 템플릿과 Accordian이라는 디자인 템플릿을 스타일 시트만 적용하여 왜? 안되지 하면서 계속해서 삽질을 하고 있었던 것이었다.
이것을 알아낸 후에 나는 자기소개페이지에 자기소개프로필을 추가 입력하기 위한 모달 레이아웃을 적용시킬 수 있었다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
자기소개 추가 입력하기
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">자기소개 입력</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="image" class="form-label">프로필사진</label>
<input type="text" class="form-control" id="image" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="name" class="form-label">이름</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="blogadd" class="form-label">블로그 주소</label>
<input type="text" class="form-control" id="blogadd">
</div>
<div class="mb-3">
<label for="mbti" class="form-label">MBTI</label>
<input type="text" class="form-control" id="mbti">
</div>
<div class="mb-3">
<label for="favcolor" class="form-label">좋아하는 색</label>
<input type="text" class="form-control" id="favcolor">
</div>
<div class="mb-3">
<label for="exercise" class="form-label">좋아하는 운동</label>
<input type="text" class="form-control" id="exercise">
</div>
<div class="mb-3">
<label for="book" class="form-label">좋아하는 책</label>
<input type="text" class="form-control" id="book">
</div>
<div class="mb-3">
<label for="tea" class="form-label">좋아하는 차</label>
<input type="text" class="form-control" id="tea">
</div>
<div class="mb-3">
<label for="postivepoint" class="form-label">객관적으로 살펴본 자신의 장점</label>
<input type="text" class="form-control" id="postivepoint">
</div>
<div class="mb-3">
<label for="collastyle" class="form-label">자신의 스타일 협업 스타일 소개</label>
<input type="text" class="form-control" id="collastyle">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">뒤로가기</button>
<button id="postingbtn" type="button" class="btn btn-primary">적용하기</button>
</div>
</div>
</div>
</div>
버튼을 누르면 Modal이 작동하여 팝업으로 자기소개 페이지가 열리는 형식이다.
- 오늘의 회고
첫날에는 이 자기소개 홈페이지를 어떻게 ? 사전교육도 한번 밖에 안돌려본 내가 만들어 낼까 했을 때 앞길이 막막하기만 했는데 자고 일어나서 생각을 정리하고 한 부분 한 부분 만들어가고 있다는거에 뭔가 좀 진짜 조금의 성취감이 쥐꼬리 만하게 생겨나는 것 같은데 현 페이지 상태를 봤을 때는 디자인 적 으로도 좀 스타일을 꾸며야겠구나 라고 생각이 든다. 아직은 시간이 많으니 천천히 한부분씩 쪼개가면서 해결해 나가면 나중에는 덜 구린 자기소개 웹페이지 정도는 만들어가야지 라고 다짐한다.