Bootstrap
- 프론트엔드 component를 모아놓은 라이브러리
- https://getbootstrap.com/
- 4.x버전을 선택하여 Starter template 복사해서 사용하도록 함
- CDN 방식으로 빠르게 Bootstrap을 설치하는 방법
모달창 만들기
- 팝업 느낌을 주는 UI
UI 만드는 가장 기초적인 방법
- HTML/CSS로 미리 디자인해놓기
- 평소엔 안보이게 숨기기
- 버튼을 눌렀을 때 보여주기
👉 모달창같이 모든 요소를 투과하여 맨 앞에 존재하는 요소는 HTML은 <body>태그 바로 다음에 오는것이 좋다.
- 요소를 화면위에 띄우기 위해서는 아래와 같은 스타일 속성을 사용한다.
.black-background {
background: rgba(0,0,0,0.5);
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
}- position :
fixed라는 속성을 이용하시면 브라우저 화면에 딱 달라붙는 요소를 만들어낼 수 있습니다. - z-index는 position 속성이 들어간 요소들에 쓸 수 있는 속성이며 값이 클 수록 맨 앞으로 가져온다.
어제의 나보단 나은 오늘의 내가 되기를