간단한 한 페이지 포트폴리오 웹사이트, 거대한 회사를 위한 모놀리식 앱, 블로그 또는 포럼을 만들더라도 드롭다운 메뉴가 필요할 가능성이 있습니다.
드롭다운 메뉴는 링크나 작업이 많지만 페이지에 공간이 충분하지 않아 한 번에 모두 표시할 수 없을 때 특히 유용합니다.
일반적으로 드롭다운에는 약간의 JavaScript가 필요합니다.
아직 배우기 시작하지 않았거나 빠른 솔루션을 원하는 경우 Bootstrap이 가장 적합합니다.
부트스트랩이란 무엇입니까?
주변에서 많이 들은 단어일 것입니다. 하지만 부트스트랩이 무엇인가요?
이것은 프론트엔드 CSS(약간의 JavaScript 포함) 프레임워크입니다. 이는 개발 속도를 상당히 높이기 위해 미리 만들어 둔 일종의 발판이라는 의미입니다. 프로그래머는 유지해야 할 표준을 개발하는 데 일정 시간을 투자하고 프레임워크 자체에 필요한 모든 전제 조건 설정을 포함하므로 매번 할 필요가 없습니다.
버튼 요소, 버튼 그룹 및 탐색 모음과 같이 자주 빌드되는 부트스트랩의 특정 구성 요소에는 표준화된 스타일이 적용됩니다. 즉, 여러 줄의 코드를 반복적으로 작성하는 대신 미리 정의된 몇 가지 키워드를 사용하여 모든 스타일을 적용할 수 있습니다.
더 큰 응용 프로그램에서 작업하는 여러 개발자 팀이 동일한 스타일을 적용하는 것에 대해 걱정할 필요가 없기 때문에 일관성을 유지하는 데 많은 도움이 됩니다. 모든 스타일은 프레임워크에서 정의됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
부트스트랩 설정
부트스트랩을 사용하려면 HTML 구조에 몇 줄의 코드를 추가해야 합니다.
가장 빠르고 간단한 설정을 위해 Bootstrap CDN을 사용할 것입니다.
우선 최신 코드 편집기에서 쉽게 수행할 수 있는 적절한 HTML5 템플릿이 필요합니다. VSCode에서 간단히 ! Enter 또는 탭을 눌러 다음과 같은 HTML5 문서 구조를 가져옵니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
이제
태그 내부에서 다른 스타일시트 위에 다음 줄을 붙여넣습니다.<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/> 부트스트랩은 내부의 일부 JavaScript 라이브러리에 의존하므로 닫는 태그 바로 앞에 다음