회사 사이트를 만들기 전에 이 멋진 Bulma CSS 강좌가 필요할 거예요.
https://www.blog.duomly.com/how-to-build-company-website-with-bulma-css/
Bulma CSS로 회사 웹 사이트 구축 방법 소개
오늘 Bulma CSS를 사용하여 회사 웹 사이트를 구축하는 방법을 배울 것입니다.
지난 몇 회 동안 Bootstrap 5를 사용하여 웹 사이트를 구축하는 방법을 학습했습니다.
https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/
또한 Bootstrap 5를 사용하여 관리 템플릿을 구축하는 방법도 학습했습니다.
https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/
이제는 같은 멋진 일을 할 때가 되었다. 아마도 사용자 인터페이스에 있어서 더욱 달콤할 것이다.
Bulma CSS 프레임워크는 매우 유행하고 사용하기 좋은 CSS 프레임워크이자 멋진 CSS 프레임워크로 뛰어난 UI를 구축할 수 있다.
Bulma CSS를 사용하면 예쁜 사이트, 전자상거래, 응용 프로그램, 심지어 판넬을 신속하게 구축할 수 있습니다.
오늘 방송에서 우리는 어떻게 Bulma CSS를 이용하여 회사 사이트를 구축하는지 중점적으로 소개하고 회사 사이트로서 우리는 응답식 웹 개발 기구의 사이트를 구축할 것이다.
우리 시작합시다!
만약 당신이 동영상을 좋아한다면, 여기는 유튜브 버전입니다.
제목을 만드는 방법
첫 번째 단계로서 우리는 프로젝트의 구조를 만들어야 한다.
우리가 해야 할 첫 번째 일은 index라는 파일을 만드는 것입니다.html.다음으로, 우리는 스타일을 만들고, 스타일을 명명해야 한다.css (같은 디렉터리에서), 마지막은'img'라는 디렉터리입니다.
img 디렉터리에서, 우리는 모든 그림을 처리할 것입니다.
따라서 만약 우리가 구조가 있다면, 우리는 색인에 들어갈 수 있다.html 파일을 만들고 간단한 html 템플릿을 만듭니다. 첫 번째 제목 요소를 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Company website with Bulma</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
</head>
<body>
<header class="section has-background-link py-4 has-text-white">
</header>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll('.navbar-burger'),
0
);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>
</html>
제목에 열 및 아이콘을 추가하는 방법
다음 단계에서, 우리는 "header"요소에 부족한 요소를 만들어야 한다.
이를 위해서는 열을 만들고 아이콘이 있는 텍스트를 놓아야 합니다.
다음 예제에서 모양을 볼 수 있습니다.
<header class="section has-background-link py-4 has-text-white">
<div class="container">
<div class="columns">
<div class="column">
<span class="icon">
<i class="far fa-envelope"></i>
</span>
[email protected]
</div>
<div class="column">
<i class="fas fa-phone-volume"></i>
+44-754-443-222
</div>
<div class="column has-text-right-tablet">
<i class="fas fa-headphones-alt"></i>
Support
</div>
</div>
</div>
</header>
섹션 생성 방법
너무 좋아요.우리의 골격은 거의 준비가 다 되었다.
이제 템플릿 구조를 만들 부분과 제목을 모두 추가해야 합니다.
다음 예제를 살펴보겠습니다.
<section class="section" id="hero">
</section>
<section class="section">
</section>
<section class="section" id="contact">
</section>
영웅 부분에서 메뉴를 만드는 방법
다음에 우리가 만들어야 할 것은 영웅 부분의 맨 위 메뉴다.
이를 위해서는 Bulma 사이트에서 전체 메뉴를 복사할 수도 있고, 연습하고 싶으면 다시 입력할 수도 있다.
메뉴는 세 가지 주요 부분을 포함해야 한다.첫 번째는 표지판이니 왼쪽에 놓아야 한다.
다음은 정확한 메뉴입니다. 로고 뒤에 있어야 합니다.
마지막으로 등록/로그인 단추 그룹입니다. 맨 위 메뉴 부분의 오른쪽에 두어야 합니다.
<section class="section" id="hero">
<div class="container">
<nav
class="navbar is-transparent"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
class="navbar-burger burger has-text-white"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-white">
Home
</a>
<a class="navbar-item has-text-white">
Services
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link has-text-white">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider" />
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-info">
<strong>Sign up</strong>
</a>
<a class="button is-warning">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
어떻게 영웅 중에서 열을 창설합니까
우리의 영웅은 점점 좋아지고 있다.
현재 우리는 상단 메뉴 아래에 추가해야 할 두 열을 주목할 수 있지만, 여전히'영웅'부분에 있다.
다음 단계에서 우리는 이 열에 내용을 추가할 것이다.
아래의 예를 봅시다.
<div class="columns pt-6">
<div class="column mt-6">
</div>
<div class="column mt-6">
</div>
</dev>
어떻게 영웅 중 왼쪽 칸 내용을 창설합니까
필요한 내용으로'영웅'칼럼을 완성할 때가 되었다.
이 단계에서 우리는 왼쪽의 일렬을 주목할 것이다.
우리는 몇 가지 요소가 필요하다. 우선 큰 아이콘을 추가해야 한다.
다음은 아래에 h1 크기의 제목과 텍스트를 추가해야 합니다.
마지막 요소로서 노란색 단추를 추가해야 합니다.
다음 코드 예제를 살펴보겠습니다.
<span class="icon has-text-warning">
<i class="far fa-chart-bar fa-lg"></i>
</span>
<h1 class="is-size-1 has-text-white has-text-weight-semibold">
Web design<br />
& App Development
</h1>
<p class="has-text-white">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at
natus dicta tempora? Distinctio vero aut, eveniet perferendis
maiores corporis.
</p>
<button class="button is-warning mt-4">
Learn more
</button>
영웅에 이미지 추가
지금이 마지막 단계입니다. 이것은 매우 쉽습니다. 왜냐하면 우리는 여기에 원소를 추가하기만 하면 되기 때문입니다.
오른쪽 열에서 "img"디렉터리에서 그림을 추가해야 합니다.
우리는 사온 사진을 사용하지만, 당신은 프리픽스 같은 사이트를 방문하거나, 다른 곳에서 무료 사진을 찾을 수 있습니다.
다음 코드 예제를 살펴보겠습니다.
<img src="img/hero-image.png" />
서비스 헤더를 만드는 방법
우리는 지금 다음 절에 들어갈 수 있다. 그곳에서 우리는 우리 기구가 어떤 서비스를 제공할 수 있는지 보여줄 것이다.
서비스 부분의 첫 번째 단계로서 우리는 일부 제목을 추가해야 한다.
이러한 제목을 만들려면 제목과 부제목의 조합만 사용할 수 있습니다.
이를 위해서는 첫 번째 요소에 클래스'title'을 추가하고, 두 번째 요소에 클래스'subtitle'을 추가해야 합니다.
<section class="section" id="services">
<div class="container">
<div class="has-text-centered">
<h2 class="title is-2">Full Service Web Development Agency</h2>
<h6 class="subtitle is-6 has-text-grey">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
</h6>
</div>
</dev>
</section>
카드를 만드는 방법
이제 우리는 서비스에 들어가'카드'라는 요소에 중점을 둘 수 있다.
우선, 우리는 div'columns'를 추가하고, 그 안에 div'column'을 추가해야 한다.
다음은 아이콘, 제목, 내용, 꼬리표가 있는 카드를 만들어야 합니다.
아래의 예를 봅시다.
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-code"></i>
</span>
</div>
<p class="title is-4">
Web development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</dev>
어떻게 서비스를 이용하여 카드를 만듭니까
지금 너는 어떻게 카드를 만드는지 알고 있지만, 한 장은 아직 부족하다.
우리는 8장의 카드가 필요합니다. 각각 다른 아이콘과 제목이 있지만 걱정하지 마세요.
너는 하나하나 쓸 필요가 없다.
우리는 전체 div를 복사해서 아이콘과 제목을 변경할 수 있지만, 두 개의 "columns"div에 관해서는 한 줄에 8장의 카드가 있을 수 없다는 것을 기억하십시오.
다음 코드 예제를 살펴보겠습니다.
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-code"></i>
</span>
</div>
<p class="title is-4">
Web development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-paint-brush"></i>
</span>
</div>
<p class="title is-4">
Web design
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-server"></i>
</span>
</div>
<p class="title is-4">
Web hosting
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-mobile-alt"></i>
</span>
</div>
<p class="title is-4">
Mobile development
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</div>
<div class="columns pt-6">
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="far fa-chart-bar"></i>
</span>
</div>
<p class="title is-4">
SEO Boost
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-ad"></i>
</span>
</div>
<p class="title is-4">
Marketing
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-funnel-dollar"></i>
</span>
</div>
<p class="title is-4">
Sales funnels
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-content">
<div class="has-text-centered">
<span class="icon is-size-1 py-6 my-3">
<i class="fas fa-cog"></i>
</span>
</div>
<p class="title is-4">
Maintenance
</p>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laborum necessitatibus veritatis ullam ratione
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Learn more</a>
</footer>
</div>
</div>
</div>
버튼 그룹 추가 방법
카드 아래에 우리는 두 개의 단추를 추가해야 한다.
첫 번째는 노란색, 두 번째는 파란색일 거예요.
그것들을 한 그룹에 두기 위해서, 우리는 클래스'is grouped'를 사용하고,'style.css'에서 그것들의 스타일을 약간 설정하여 그것들을 가운데에 두어야 한다.
스타일, 다음 단계에 추가할 것입니다. 현재 HTML만 추가합니다.
코드 예제를 살펴보겠습니다.
<div class="field is-grouped mt-6 is-flex service-buttons">
<p class="control">
<button class="button is-warning">
Free consultation
</button>
</p>
<p class="control">
<button class="button is-info">
Request pricing
</button>
</p>
</div>
Bulma CSS에서 구분자를 만드는 방법
불행히도 Bulma CSS에는 제분기 구성 요소가 없습니다.
우리는 npm 패키지를 설치하여 이 점을 실현하거나 스타일에 몇 줄을 추가하여 만들 수 있습니다.
잠시 후에 스타일에 추가할 것입니다. 그러나 다음 코드 예시를 보십시오. 그러면 몇 초 안에 제법기를 만드는 방법을 알 수 있습니다.
.logos:before {
content: '';
position: absolute;
width: 50%;
left: 25%;
top: 0;
border-top: 1px solid #ebebeb;
}
클라이언트 로고 추가 방법
이것은 서비스 부분의 마지막 단계다.축하
이 단계에서, 우리는 그것을 위해 일하는 고객 로고를 추가해야 한다.
이를 위해서는 간단한 격자를 만들고'column'이라는 네 종류의div를 추가하고 그림을 추가하면 됩니다.
<div class="columns mt-6 pt-5 logos is-relative">
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
</div>
<div class="column">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
</div>
</div>
연락처 양식을 만드는 방법
우후!우리는 지금 마지막 절에 들어갑니다. 당신의 웹 개발 기구 사이트는 곧 고객을 위해 준비를 할 것입니다!
첫 번째 단계로, 우리는 마지막 절에서 두 열을 만들어야 한다.
다음은 첫 번째 열(왼쪽)에서 우리는 간단한 카드를 만들어야 한다. 그 주체는 비어 있고 제목은 노란색이다.
다음 단계에서, 우리는 입력이 매우 적은 폼과submit 단추를 추가해야 한다.
다음 예제를 살펴보겠습니다.
<section class="section" id="contact">
<div class="container">
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header has-background-warning">
<p class="card-header-title">
Free Consultation
</p>
</header>
<div class="card-content">
<div class="field">
<label class="label">Name</label>
<p class="control">
<input class="input" type="text" placeholder="Name">
</p>
</div>
<div class="field">
<label class="label">Phone number</label>
<p class="control">
<input class="input" type="text" placeholder="Phone number">
</p>
</div>
<div class="field">
<label class="label">Email</label>
<p class="control">
<input class="input" type="email" placeholder="Email">
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-warning">
Submit
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
추천서 추가 방법
다음 단계에서 우리는 고객이 우리에게 준 평론에 추천서를 추가할 수 있다.
이를 위해 오른쪽 표시줄에 큰 따옴표 아이콘 두 개만 만들 수 있습니다.
다음은 그것들 사이에 흰색 텍스트를 추가해야 합니다.
<div class="column has-text-white pt-6 pl-6">
<span class="icon is-size-1 pb-6 my-3 has-text-grey-lighter">
<i class="fas fa-quote-left"></i>
</span>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime placeat, dolorem, quam expedita deleniti accusantium animi adipisci neque rem nobis at necessitatibus iusto vero exercitationem illum amet hic eligendi sapiente!</p>
<p class="has-text-weight-bold pt-3 is-size-4">John Doe</p>
<span class="icon is-size-1 pt-6 pr-3 my-3 has-text-grey-lighter is-pulled-right">
<i class="fas fa-quote-right"></i>
</span>
</div>
사용자 정의 스타일 추가
이것은 우리 회사 사이트의 마지막 걸음이자 매우 중요한 걸음이다.
이 단계에서 우리는 양식에 들어가야 한다.css와 스타일에는 몇 가지 요소가 있습니다.
기억해라, 너는 자신의 사진을 배경으로 해야 한다.
너는 인터넷에서 무료 사진을 쉽게 찾을 수 있다.
다음 코드 예제에 추가된 스타일을 살펴보겠습니다.
#hero {
background: url('img/hero-bg.png');
height: 1079px;
background-position-x: center;
background-size: cover;
}
#hero .navbar.is-transparent {
background-color: transparent;
}
.service-buttons {
justify-content: center !important;
}
.logos:before {
content: '';
position: absolute;
width: 50%;
left: 25%;
top: 0;
border-top: 1px solid #ebebeb;
}
#contact {
background: url('img/contact-bg.png');
background-size: cover;
}
@media screen and (max-width: 1023px) {
.navbar-menu a.has-text-white {
color: #4a4a4a !important;
}
.navbar-menu a.has-text-white:hover {
color: #3273dc !important;
}
}
Bulma CSS를 사용하여 회사 웹 사이트 구축 방법 요약
축하드립니다. 귀하의 웹 개발 에이전시 사이트는 이미 첫 번째 고객을 위해 준비를 마쳤습니다!
오늘 당신은 Bulma CSS로 회사 사이트를 구축하는 방법을 배웠습니다. 저는 당신이 자신의 온라인 업무에서 한 걸음 더 가까워지기를 바랍니다.
AWS 과정 1과: Cloudflare를 어떻게 사용하여 S3에서 위탁 관리 사이트에서 귀하는 자신의 사이트를 위탁 관리하는 방법에 대한 단계별 강좌를 찾을 수 있기 때문에 사이트를 구축한 후에 계속 위탁 관리 사이트를 만들 수 있습니다.
다음은 AWS 강좌 1과 URL입니다.
https://www.blog.duomly.com/aws-course-lesson-1-how-to-host-website-on-s3-with-cloudflare/
S3에 준비하고 위탁 관리한 후에 우리에게 당신의 사이트를 보여주는 것을 잊지 마세요!
읽어주셔서 감사합니다.
Duomly의 Radek.
Reference
이 문제에 관하여(회사 사이트를 만들기 전에 이 멋진 Bulma CSS 강좌가 필요할 거예요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duomly/you-definitely-need-to-do-this-awesome-bulma-css-tutorial-until-start-building-a-company-website-3m80텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
