프레임 워크를 사용하여 웹 사이트의 프론트 엔드를 구성하면 많은 이점을 얻을 수 있습니다 (그리고 부팅하는 것이 매우 쉽습니다!). 프론트 엔드 프레임 워크가 무엇이고 왜 웹 개발 작업에 통합해야하는지 생각해 봅시다.
프론트 엔드 프레임 워크
"CSS 프레임 워크"라고도하며, 파일과 폴더에 미리 작성되고 표준화 된 코드가 포함 된 패키지입니다. 그들은 최종 설계에 유연성을 부여하면서도 기반을 구축 할 수 있습니다. 일반적으로 프런트 엔드 프레임 워크에는 다음 구성 요소가 포함되어 있습니다.
- 웹 사이트의 디자인 요소를 쉽게 구성 할 수있는 표
- 정의 된 글꼴 스타일과 그 기능에 따라 다른 크기 조정 (표제와 단락에 대한 다른 활판 인쇄 등)
- 사이드 패널, 버튼 및 탐색 막대와 같은 사전 제작 된 웹 사이트 구성 요소
선택한 특정 프레임 워크에 따라 더 많은 기능이 있습니다.
왜 하나를 사용 하는가?
모든 코드를 처음부터 시작하는 대신 프론트 엔드 프레임 워크를 사용하는 데는 많은 이유가 있습니다.
- 시간을 절약! 분명히 혼자 코드 하나 하나를 작성한다면 웹 사이트를 시작하는 데 더 많은 시간이 걸릴 것입니다. 프레임 워크는 기초부터 시작할 수 있도록 도와줍니다.
- 다른 구성 요소가 없을 수도 있습니다. 자신을 위해 별도의 번거 로움을 만들지 않고 다른 버튼 하나 또는 두 버튼을 택할 수있는 옵션이있는 것이 좋습니다.
- 코드가 작동하는지 확인하십시오. 자신의 코드가 작동하지 않는다는 것을 발견하기 위해 많은 시간을 쓰는 대신 (또는 웹 브라우저의 60 %와 호환되지 않음) 미리 테스트 한 기능 코드를 사용하고 있음을 알게됩니다.
계속 진행하기 전에 프런트 엔드 프레임 워크를 사용 하지 않는 방법을 분명히하고 싶습니다. 코드 제작 기술을 대신하는 것으로 그들을 대하는 것은 당신에게 아무런 도움이되지 않습니다. HTML 과 CSS에 익숙해지면 바로 가기를 사용할 수 있습니다. 버팀목이 아닌 조수로 프레임 워크를 다루십시오.
프론트 엔드 프레임 워크의 예
모든 CSS 프레임 워크가 동등하게 만들어지는 것은 아니므로 고유 한 요구 사항에 가장 적합한 CSS 프레임 워크에 대해 조사하십시오. 상위 5 위를 간략히 살펴 보겠습니다.
- 부트 스트랩 : 가장 인기있는 것. Github에는 수많은 별들이 있고 질문에 대한 답을 얻으려는 많은 자료가 있습니다. 사용하기 쉬운 것들 중 하나이지만, 아주 독특한 "부트 스트랩 (Bootstrap)"모양을 가지고 있다고 말하는 사람들도 있습니다.
- Foundation : 많은 유연성과 사용자 정의 가능성을 제공합니다. 프론트 엔드 개발 경험이 있고 많은 창의적인 제어를 유지하면서 기본을 다루는 사람들에게 좋습니다.
- 스타일러스 : 표현적이고 세련된 CSS 언어. 이 프레임 워크는 Node.js 응용 프로그램에서만 사용할 수 있습니다.
- 시맨틱 UI : 간결하고 직관적이며 코드를 쉽고 간단하게 디버깅합니다. 설계의 자유가 많고 필요에 맞게 조정할 수 있습니다.
- UI Kit : iOS 앱 개발에 관심이있는 경우 사용할 수있는 프레임 워크입니다. 자신 만의 사이트 디자인을 쉽게 개발할 수있는 기본 스타일이 있습니다.
결론
프레임 워크는 프론트 엔드 디자인을위한 믿을 수 없을만큼 유용한 도구입니다. 특히 그 부분을 자주 개발하는 직장을 가지고 있다면 더욱 그렇습니다. 이 기능을 사용하면 품질이나 기능을 희생하지 않고도 작업 흐름을 가속화하고 생산성을 높일 수 있으며, 문을 열어 고유 한 사용자 정의 모양을 유지할 수 있습니다. 모서리를 자르는 방법이 아닌 기술을 보완 할 수있는 도구로 그들을 사용하는 것을 잊지 마십시오!