콘텐츠
- 01. 시작하기
- 02. Bulma 설치
- 03. 페이지 구축
- 04. 최고의 영웅 바 만들기
- 05. 제목 및 부제 추가
- 06. 스플래시 색상 추가
- 07. 콘텐츠를 열로 분할
- 08. 반응 형 이미지 만들기
- 09. 버튼으로 작업 제안
- 10. 박스형 콘텐츠 만들기
- 11. 상징적 인 상자 사용
- 12. 대담하게
- 13. 레벨 변경
- 14. 양식 추가 및 제어
- 15. 사용자 피드백 제공
- 16. 바닥 글 추가
- 17. 변수 사용자 지정
Bulma 사용을 시작 하시겠습니까? 당신은 바로 이곳에 있습니다. Bulma는 간단한 flexbox 그리드 시스템이있는 인기있는 CSS 프레임 워크입니다. 자바 스크립트를 포함하지 않고 더 가벼운 접근 방식을 취한다는 점에서 다른 프레임 워크와 다릅니다.이 결정은 전적으로 개발자에게 맡겨집니다 (다른 옵션을 탐색하려면 최고의 CSS 프레임 워크 선택 참조).
이 튜토리얼에서는 Bulma를 설치하는 방법과 다양한 클래스로 웹 사이트를 구축하는 방법을 보여줍니다. Bulma에서 클래스가 얼마나 다재다능한 지 증명하기 위해 전체 튜토리얼 페이지는 CSS를 한 줄도 작성하지 않고 작성되었습니다. 다른 옵션을 원하십니까? 훌륭한 웹 사이트 빌더를 사용해보십시오. 또한 사이트가 최상의 상태로 실행되도록하려면 올바른 웹 호스팅 서비스를 선택하십시오.
- 튜토리얼 파일을 다운로드하려면 클릭하십시오.
CSS 생성은 마을에서 가장 인기있는 웹 이벤트입니다. 9 월 20 일부터 22 일까지 코드를 사용하여 반값에 티켓을 수령 할 수 있습니다.FLASHSALE5. 자세한 내용을 보려면 이미지를 클릭하십시오.
01. 시작하기
새 디렉토리를 만들고 그 안에 index.html 파일. 코드 편집기에서이 파일을 열고 DOCTYPE html 및 반응 형 뷰포트 태그가있는 간단한 시작 HTML 문서를 만듭니다.
! DOCTYPE html> html> head> meta name = "viewport"content = "width = device-width, initial-scale = 1"> title> 페이지 제목 / 제목> / head> 본문> / body> / html>
02. Bulma 설치
Bulma를 사용하는 것은 단일 CSS 파일을 추가하는 것만 큼 빠릅니다. CDN을 사용하여 HTML에 링크를 추가하십시오. 변수를 변경하고 프레임 워크를 더 많이 제어해야하는 경우 npm 설치 Bulma 사용할 수 있습니다 (전체 문서 참조). 완전한 경험을 위해 font awesome 5도 포함되어야합니다.
link rel = "stylesheet"href =”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css "> script defer src ="https : //use.fontawesome .com / releases / v5.3.1 / js / all.js "> / script>
03. 페이지 구축
body 태그 안에 섹션 요소와 클래스가있는 div를 만듭니다. 컨테이너. 컨테이너 내에서 클래스로 h1을 만듭니다. 표제 그런 다음 수업과 함께 단락 부제. 지금은 제목에 'hello world'를 입력하고 단락에 텍스트를 입력합니다. 이제 Bulma의 기본 시작 템플릿이 있습니다.
section> div> h1> Hello World / h1> p> 이것은 Bulma / p> / div> / section>의 기본 시작 템플릿입니다.
04. 최고의 영웅 바 만들기
수업 대신 이전 섹션 위에 새 섹션을 만듭니다. 부분, 수업을 줘 영웅. hero 클래스를 사용하면 높이를 제어하는 다양한 옵션을 사용하여 전체 너비 배너를 만들 수 있습니다. 이 새 섹션 내에서 클래스로 div를 만듭니다. 영웅 몸 그리고 컨테이너 콘텐츠가 보관됩니다.
섹션> div> div> ... / div> / div> / div>
05. 제목 및 부제 추가
컨테이너 div 내부에 클래스와 함께 h1 및 h2 태그를 추가합니다. 표제 과 부제. 콘텐츠의 크기를 늘리는 타이포그래피 클래스입니다. Bulma는 제목과 부제목이 결합 된시기를 아는 것이 현명하며이를 더 가깝게 만듭니다.
06. 스플래시 색상 추가
수업 추가 is-primary 영웅 섹션에. 이렇게하면 배경에 기본 색상이 적용되고 텍스트가 더 밝은 변형으로 변경됩니다. 대신에 일 순위, 정보, 성공, 경고, 위험, 빛 과 어두운 또한 선택할 수 있습니다
07. 콘텐츠를 열로 분할
웹 사이트의 첫 번째 콘텐츠 영역은 두 개의 열로 나뉩니다. 클래스 섹션으로 새 섹션을 만들고 컨테이너를 추가합니다. 열을 설정하기 위해 div가 추가됩니다. 열 수업. 각 열은 상위 컨테이너 내에 추가됩니다. 열은 지정하지 않는 한 사이에 작은 간격을두고 사용 가능한 공간에서 동일한 간격을 유지합니다.
많은 콘텐츠가있는 경우 안정적인 클라우드 저장소에 자산을 백업해야합니다.
섹션> div> div> div> ... / div> div> ... / div> / div> / div> / section>
08. 반응 형 이미지 만들기
두 번째 열에는 이미지가 포함됩니다. 그림 요소에 이미지를 래핑하고 가능하면 그림에 이미지 종횡비 클래스를 지정합니다. 예에서 16by9 사용되었습니다 (사용 가능한 비율의 전체 목록 참조).
div> 그림> img src = "img / dog.webp"> / figure> / div>
09. 버튼으로 작업 제안
버튼 클래스는 다채로운 버튼을 만들고 적용 할 수 있습니다. a> 요소 또는 버튼> 두 개의 버튼을 첫 번째 열에 추가하고 색상 수정자를 적용합니다. 둘 이상의 버튼을 사용하는 경우 클래스와 함께 div로 래핑합니다. 버튼, 격차를 수정하고 클래스를 그룹으로 적용 할 수 있습니다.
div> a> 자세히 알아보기 / a> a> 지금 구매 / a> / div>
10. 박스형 콘텐츠 만들기
페이지 하단에 세 개의 열이있는 새 섹션을 추가합니다. 열 내에 상자 요소가 추가됩니다. 상자 요소는 페이지 배경과 구분되는 테두리가있는 간단한 컨테이너입니다.
11. 상징적 인 상자 사용
Bulma는 Font Awesome 5와 통합되지만 모든 글꼴 라이브러리와 호환되며 대부분의 사용 가능한 아이콘을 호출하는 클래스가 있습니다. 각 상자 안에 콘텐츠 컨테이너를 추가하고 그 뒤에 클래스가있는 범위 요소를 추가합니다. 상. 범위 내에서 i> 원하는 아이콘에 필요한 클래스를 호출하는 요소입니다. 아이콘은 텍스트와 같은 방식으로 색상이 지정됩니다.
div> span> i> / i> / span> div> ... / div> div> ... / div> / div>
12. 대담하게
페이지 하단에 새로운 2 열 히어로 섹션을 만들어 is-info 섹션에 클래스. 흥미로운 효과를 얻으려면 대담하다 미묘한 그라디언트를 위해이 섹션에 클래스. 이 수정자는 7 가지 주요 색상 모두에서 작동합니다.
13. 레벨 변경
레벨은 요소가 행에서 수직으로 중앙에 배치되도록하는 좋은 방법입니다. 페이지 하단의 새 섹션 내에서 수준 클래스가있는 div를 추가하고 4 개의 수준 항목 안에 중첩합니다. 레벨 항목 내에 추가 된 모든 콘텐츠는 수직으로 정렬됩니다.
div> div> ... / div> div> ... / div> / div>
14. 양식 추가 및 제어
페이지 하단에 양식을 추가하려면 다음을 사용하여 새로운 2 열 히어로 섹션을 만듭니다. is-primary. 두 개의 열로 분할하고 오른쪽 열에서 들 수업. 필드 클래스는 여러 양식 입력을 함께 그룹화하여 적절한 간격을 유지하는 데 사용됩니다. 모든 입력은 개별적으로 래핑되어야합니다. .제어 수업.
div> div> input type = "email"placeholder = "Your Email"> span> i> / i> / span> / div> / div>
15. 사용자 피드백 제공
양식이 제출되면 사용자에게 메시지를 반환하여 다음에 어떤 일이 발생하는지 알 수 있습니다. Bulma는이 메시지가 표시되는시기를 제어 할 수 없지만 프런트 엔드는 메시지 클래스로 빌드 할 수 있습니다.
article> div> p> 감사합니다! / p> / div> div> ... / div> / article>
16. 바닥 글 추가
유연한 바닥 글 클래스를 사용하면 페이지 하단에 모든 요소를 추가 할 수 있으며, 저작권 정보 및 하단 탐색을위한 공간을 제공하고 웹 사이트를 마무리 할 수 있습니다.
바닥 글> div> p> ... / p> / div> / footer>
17. 변수 사용자 지정
프로토 타입을 넘어서 대부분의 프로젝트는 브랜드 가이드 라인과 색상에 따라 작업해야합니다. 마찬가지로 디자이너가 Bulma의 글꼴, 색상 또는 기타 측면을 변경해야한다고 가정하는 것이 안전합니다. Bulma의 주요 부분은 사용자 정의가 가능하고 모듈 식이라는 것입니다. 모듈을 선택적으로 가져올 수있을뿐만 아니라 프레임 워크 내에서 최대 415 개의 Sass 변수를 변경할 수 있습니다.
변수를 사용한다는 것은 새 색상을 기본으로 설정하면 해당 프로젝트의 전체 Bulma 프레임 워크에서 해당 색상이 변경됨을 의미합니다. 이 설정은 처음에는 까다로울 수 있지만 설명서에는 세 가지 방법을 사용하여 가이드가 제공되었습니다.
이 기사는 원래 크리에이티브 웹 디자인 잡지 289 호에 게재되었습니다. 웹 디자이너. 289 호 구매 또는 여기에서 구독하세요.
