/*초소형 스마트폰 0 ~ 359px*/@media screen and (max-width: 359px) {}/*일반 스마트폰 360px ~ 575px*/@media screen and (min-width: 360px) and (max-width: 575px ) {}/*태블릿 576px ~ 991px*/@media screen and (min-width: 576px) and (max-width: 991px) {}/*노트북 992px ~ 1199px*/@media screen and (min-width: 992px) and (max-width: 1199px) {}/*데스크탑 1200px 이상*/@media screen and (min-width: 1200px) {}
💻 Front/CSS
z-index는 우선순위를 주는 속성으로, 웹페이지에서 요소들이 서로 겹칠 때 어떤 요소가 앞에 보일지 정할 수 있다.단, position 속성을 부여해야 한다. 도움된 https://velog.io/@seeun9618/CSS-z-index-%EC%A0%81%EC%9A%A9%EC%9D%B4-%EC%95%88%EB%90%A0-%EB%95%8C
line-height은 텍스트의 라인 높이를 지정하는 속성이다. 주로 줄 간격을 지정할 때 사용한다. 숫자 * 폰트 사이즈px, em은 그자체로 높이설정percent * 폰트 사이즈 / 100normal 브라우저에서 지정된 값으로 할당
box-sizing는 박스 모델의 크기를 계산 방식을 설정하는 속성이다.기본값은 content-box이다. 박스 크기를 내부의 컨텐츠 크기만 계산한다.border-box는 박스 크기를 컨텐츠 크기, 테두리, 패딩까지 포함하여 계산한다. 도움된 글https://velog.io/@nalsae/%EB%82%B4%EB%B3%B4%EC%A0%95CSS-%EB%AA%A8%EB%A5%B4%EB%A9%B4-%EA%B3%A4%EB%9E%80%ED%95%9C-box-sizing
/* -- 모바일 / 1199 이하 -- */@media screen and (max-width: 1199px) {/* -- 컴퓨터 / 1200px 이상 -- */@media screen and (min-width: 1200px) {
최하단에 부트스트랩 Js 추가 ✔ 부트스트랩 주소https://getbootstrap.com/docs/5.3/getting-started/introduction/ 반응형 웹을 만들 때 container와 grid를 사용하면 수월하게 가능하다.
