늦은 프로그래밍 이야기
221104 TIL (Modal 만들어 보기) 본문
Modal
1. Body
<body style="overflow: auto;">
<div class="modal">
<div class="modal_body">
내용
</div>
</div>
<button type="button" id="btn-open-popup" class="btn btn-dark">Modal</button>
</body>먼저 html을 사용하여 Modal과 내용물이 위치할 Modal_body, 작동시킬 button을 작성한다.
버튼에 id값 혹은 class값을 부여한다.
2. CSS
<style>
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}
.modal.show {
display: block;
}
.modal_body {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 600px;
padding: 40px;
background-color: rgba(255, 255, 255);
border-radius: 10px;
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
transform: translateX(-50%) translateY(-50%);
}
</style>.modal : modal이 전체화면을 차지할 수 있도록 해준다.
.modal_body : 모달의 내용물의 위치를 정렬한다.
* transform : https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
developer.mozilla.org
3. Javascript
<script>
const body = document.querySelector('body');
const modal = document.querySelector('.modal');
const btnOpenPopup = document.querySelector('#btn-open-popup');
const btnClosePopup = document.querySelector('#btn-close-popup');
btnOpenPopup.addEventListener('click', () => { // 열기 버튼 클릭 시
modal.classList.toggle('show'); // modal을 띄운다.
if (modal.classList.contains('show')) { // modal이 떠있는 동안
body.style.overflow = 'hidden'; // body의 스크롤이 움직이지 않는다.
}
});
btnClosePopup.addEventListener('click', () => { // 닫기 버튼 클릭 시
modal.classList.toggle('show'); // modal을 닫는다.
});
modal.addEventListener('click', (event) => { // modal 클릭 시
if (event.target ===modal) {
modal.classList.toggle('show'); // modal을 닫는다.
if (!modal.classList.contains('show')) { // modal을 닫으면
body.style.overflow = 'auto'; // body의 스크롤이 움직인다.
}
}
});
</script>body 태그 사이 modal 버튼 아래에 작성해야 한다.
객체지향 vs 함수형
1. 객체지향 프로그래밍
- 프로그래밍하려는 대상을 하나의 객체(사물)로 정의하는 설계 방법.
- 객체의 관점에서 구조를 만들고 사용하는 방법.
- 단순한 자료구조(변수)를 넘어서 기능(메서드)을 포함한 형태로 객체를 사용.
2. 함수형 프로그래밍
- 프로그래밍하려는 문제를 함수들의 정의와 조합을 통해서 해결하는 방법.
- 함수의 개념을 최우선적으로 사용해서 모든 문제를 해결.
- 언제든 결과가 동일한 함수를 사용할 수 있고 그 함수를 이용해 조합성을 높일 수 있다.
TIL
미니프로젝트 발표를 하였다
우리 팀의 프로젝트 발표도 하고 여러 다른 팀들의 프로젝트를 보았다.
프로젝트를 직접 만들어 보는 것도 실력을 기르는데 당연히 도움이 되었지만
다른 팀들의 프로젝트를 보는 것도 실력을 기르는데 많은 도움이 된 것 같았다.
우리 팀이 구현하지 못한 기능들을 구현한 팀들도 있었고
내가 구현하지 못했던 Modal 기능을 구현한 팀도 있었다.
다양한 프론트엔드의 기능들을 보면서 많은 도움이 되었다.
백엔드 개발자를 목표로 공부하고 있지만 프론트엔드도 어느정도 아는게 좋다고 들었고
이번 기회에 많은 것을 해보고 정보를 볼 수 있어서 참 좋았다.
부트스트랩의 오류로 구현하지 못했던 Modal 이나 Hover 기능의 코드를 찾아보고
코드를 이해하려고 노력해보았다.
발표는 끝났지만 주말이나 다음에 기회가 된다면 만들어 둔 개인 페이지에 추가로 적용해보고 싶다.
이번 미니프로젝트에서 아쉬웠던 점은 팀원들 간에 소통이 적었다는 점과
그로 인해서 피드백으로 지적 받은 템플릿의 일원화를 하지 못한점,
조금 더 완성된 방명록을 구현하지 못한 점 등이 아쉬웠다.
다음에는 아쉬움이 남지 않도록 최대한 프로젝트 전에 와이어프레임이라든가 API 설계 등
사전에 준비를 많이하고 프로젝트에 임하도록 해야겠다.
'내일배움캠프 > TIL, WIL' 카테고리의 다른 글
| 221107 TIL (Java 기초) (0) | 2022.11.07 |
|---|---|
| 1주차 WIL (0) | 2022.11.06 |
| 221103 TIL (미니프로젝트) (0) | 2022.11.03 |
| 221102 TIL (API, 개인페이지) (0) | 2022.11.02 |
| 221101 TIL (터미널 명령어) (0) | 2022.11.01 |
