Fire UI를 사용하여 처음부터 프로필 페이지 만들기

41082 단어 portfolio html css tutorial

0에서 HTML, CSS, 자바스크립트를 포함하는 사이트를 어떻게 만드는지 알고 싶습니까?
그럼 잘 왔네.이 강좌에서 우리는 정적 사이트 - 프로필 페이지를 어떻게 만드는지 배울 것이다. 당신은 공백 페이지, 정성스럽게 디자인하고 최적화된 사이트를 볼 수 있을 것이다.

For a live demo, you can visit here : https://fire-ui.github.io/Profile-Page-Template/

Google 강좌를 시작하기 전에 Fire UI 프레임워크(https://github.com/fire-ui/fire-ui)를 지원하여 별을 선물할 수 있습니다.

개술

본 강좌에서 우리는 Fire-UI, 무료, 사용자 친화적인 CSS 프레임워크를 사용할 것이다.
Fire UI에 대한 자세한 내용은 아래 블로그를 참조하십시오.

Fire UI: 사용자 친화적이고 신뢰할 수 있는 CSS 프레임워크

스탠리 오로엔・ 20년 12월 19일・ 1분 읽기

#css #javascript #opensource

카탈로그

필요한 모든 리소스 수집

Fire UI 다운로드 및 설정

탐색 모음 만들기

당신의 콘텐츠 디자인

완성

1. 우리가 필요로 하는 모든 자원을 수집한다

기본 웹 사이트를 만드는 데 필요한 사항은 다음과 같습니다.

텍스트 편집기(승화 텍스트 또는 Visual Studio 코드 권장)

검색엔진(Chrome, 구글, Mozilla 등 모두 가능)

이것은 매우 간단하다, 그렇지?이제 헤어지자!

2. Fire UI 다운로드 및 설정

좋습니다. 코드를 작성하기 전에 Fire UI CSS Framework를 다운로드해야 합니다. 이것은 CSS 라이브러리로 더욱 간단하고 표준에 부합되는 웹 디자인을 허용합니다.

Note : To download the file, you need to go online / connected to the Internet

Fire UI Framework를 다운로드하는 3가지 방법은 다음과 같습니다.
1. unpkg을 통해 다운로드(추천)
Fire UI는 오프라인 상태에서는 사용할 수 없으므로 이 방법을 사용하는 것이 좋습니다.
먼저 파일 편집기를 열고 파일을 만듭니다.그런 다음 이름 index.html을 다운로드 프레임의 폴더에 저장합니다.
그런 다음 코드를 index.html 파일로 복사하면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/[email protected]/FireUI.css">
    <!-- Fire UI Javascript -->
    <script src="https://unpkg.com/@fire-ui/[email protected]/FireUI.js"></script>
    <title>Hello, world!</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Note: If you are using method 1, you are all done! You can just simply just to the next part, which is Create a Navigation Bar

2. NPM을 통해 다운로드
Fire UI는 NPM에서도 사용할 수 있습니다.다운로드하려면 다음 절차를 따르십시오.

명령 프롬프트 열기(Windows 사용자는 Win+R을 누르고 cmd를 입력할 수 있음)

디렉토리를

으로 인코딩할 대상 폴더로 변경

다음 명령을 입력합니다.

npm install @fire-ui/fire-ui

For Fire-UI Documentation, you can visit here : https://fire-ui.github.io/

3. GitHub을 통해 다운로드

You can visit the following link to download it through GitHub: https://github.com/fire-ui/fire-ui

링크를 클릭하면 외관이 위와 같습니다.그런 다음 코드 > 를 클릭하여 ZIP를 다운로드합니다.그리고 그걸 추출해야 해.
이제 Fire UI 프레임워크를 성공적으로 구성했습니다. 코드를 작성하기 전에 박수 부탁드립니다.👏👏👏.
이제 인코딩할 때가 됐어요!!!
먼저 파일 편집기를 열고 파일을 만듭니다.그런 다음 이름 index.html을 다운로드 프레임의 폴더에 저장합니다.
메서드 2 또는 메서드 3을 사용하는 경우 디렉토리가 적어도 다음과 같은지 확인합니다.

fire-ui/
├── Fire-UI.js
├── Fire-UI.css
├── index.html (The file you created)
├── src/
|   ├── fonts/
|       ├── Noto/
|           ├── NotoSans-Regular.ttf
|       ├── Roboto
|           ├── Roboto-Regular.ttf
|       ├── Work
|           ├── WorkSans-Medium.ttf

그리고 기본적인 HTML을 추가해야 합니다.다음은 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Profile Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

그런 다음 다음 다음 코드를 추가하여 Fire UI 에 연결합니다.

<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="FireUI.css">
<!-- Fire UI Javascript -->
<script src="FireUI.js"></script>

현재 index.html의 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/FireUI.css">
    <script src="FireUI.js"></script>
    <title>Profile Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

다음 그림과 같이 파일 관리자에서 index.html 파일을 두 번 클릭하여 기본 브라우저에서 다시 저장하고 실행합니다.

이것이 구성의 전부입니다.😆. 다음 파트로 넘어갑시다!

3. 탐색 모음(탐색 모음) 만들기

Before we continue further, note that you can access the full code on GitHub : https://github.com/fire-ui/Profile-Page-Template

현재 우리는 내비게이션 표시줄 (일반적으로 내비게이션 표시줄) 을 만들 것이다.그 전에 body의 내용을 삭제해야 합니다.그런 다음 body 섹션에서 다음 코드를 복사하여 붙여넣습니다.

<div class="topnav topnav-shadow">
    <span class="topnav-brand">My Name</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" href="">Home</a>
        <a class="topnav-item" href="#achievement">Achievements</a>
        <a class="topnav-item" href="#contact">Contact</a>
    </div>
</div>

Tadaaa!!우리는 이미 내비게이션 표시줄을 완성했다.

4. 콘텐츠 디자인

이 섹션에서는 다음을 작성합니다.

나에 대해서

건 및

건

연락처

먼저 탐색 바코드 다음에 다음 코드를 추가합니다.

<div class="container mt-5"></div>

웹 사이트의 완벽한 운영을 확보하기 위해 style.css 파일을 만들어야 합니다.다음 코드를 복사하여 style.css에 붙여넣습니다.

img{
    width: 100% !important;
}

.intro-title{
    font-size: 3rem;
}

.intro-text{
    text-align: justify;
}

1. 나에 대해

"나에 대한"부분에서, 우리는 격자를 사용하여 간단한 페이지를 만들 것이다.

If you didn't understand what is grid, you can visit here : https://fire-ui.github.io/Layout/grid.html

본 강좌에서 우리는 다음과 같은 프로필 그림을 사용할 것이다. https://github.com/fire-ui/Profile-Page-Template/blob/master/profile-picture.png?raw=true
이제 다음 코드를 <div class="container mt-5"></div>에 복사하여 붙여넣습니다.

<div class="row">
    <div class="col-6">
        <img src="profile-picture.png" alt="My profile picture">
    </div>
    <div class="col-6">
        <div class="p-3">
            <h1 class="intro-title">Hello world!</h1>
            <p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            <a href="#achievement" class="btn theme-reverse">My achievement</a>
            <a href="#contact" class="btn theme-adjust">Contact me</a>
        </div>
    </div>
</div>

Note that you can just change the value inside <p class="intro-text">.

2.성취

성취 부분에서 우리는 아래 링크의 그림을 다운로드해야 한다. https://github.com/fire-ui/Profile-Page-Template/blob/master/achievements.jpg?raw=true
다운로드한 경우 내 정보 섹션에서 다음 코드를 복사합니다.

<div class="my-5" id="achievement">
    <h1 class="heading-title">Achievements</h1>
    <div class="row">
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">First achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">Second achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
        <div class="col-4">
            <div class="box m-2">
                <img src="achievements.jpg" alt="My achievement">
                <h2 class="box-title">Third achievement</h2>
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
            </div>
        </div>
    </div>
</div>

현재 귀하의 성취 부분은 다음과 같습니다.

3. 연락처

이 절에서 우리는 form과 input을 표의 기초로 사용할 것이다.[성취] 섹션에 다음 코드를 입력하고 <div class="container mt-5"> 내에 있는지 확인합니다.

<div class="my-5" id="contact">
    <form action="#" class="box p-3 box-shadow theme-adjust">
        <div class="form-group">
            <h1 class="heading-title">Contact</h1>
        </div>
        <div class="form-group">
            <p class="form-label">Email:</p>
            <input type="email" class="form-control">
        </div>
        <div class="form-group">
            <p class="form-label">Message:</p>
            <textarea class="form-control"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" value="Submit" class="btn theme-reverse form-control">
        </div>
    </form>
</div>

현재 당신의 연락처는 다음과 같습니다.

축하합니다!이 강좌는 곧 끝납니다!

완성

마지막으로 어두운 모드를 추가할 것입니다. (선택 가능)먼저 코드가 body 부분으로 위로 스크롤되고 theme="dark" 부분에 body 값을 추가합니다. 현재 코드의 주체 부분은 다음과 같습니다.

<body theme="dark">

나중에 탐색 모음 섹션을 다음과 같이 변경합니다.

<div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">My Name</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" href="">Home</a>
        <a class="topnav-item" href="#achievement">Achievements</a>
        <a class="topnav-item" href="#contact">Contact</a>
        <p class="topnav-item" switch-theme>Switch theme</p>
    </div>
</div>

현재 index.html은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="FireUI.min.css">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Fire UI Javascript -->
    <script src="FireUI.min.js"></script>
    <link rel="shortcut icon" href="profile-picture.png" type="image/x-icon">
    <title>Hello, world!</title>
</head>
<body theme="dark">
    <div class="topnav theme-reverse topnav-shadow">
        <span class="topnav-brand">My Name</span>
        <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
        <div class="topnav-right" id="myTopnav">
            <a class="topnav-item" href="">Home</a>
            <a class="topnav-item" href="#achievement">Achievements</a>
            <a class="topnav-item" href="#contact">Contact</a>
            <p class="topnav-item" switch-theme>Switch theme</p>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-6">
                <img src="profile-picture.png" alt="My profile picture">
            </div>
            <div class="col-6">
                <div class="p-3">
                    <h1 class="intro-title">Hello world!</h1>
                    <p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    <a href="#achievement" class="btn theme-reverse">My achievement</a>
                    <a href="#contact" class="btn theme-adjust">Contact me</a>
                </div>
            </div>
        </div>
        <div class="my-5" id="achievement">
            <h1 class="heading-title">Achievements</h1>
            <div class="row">
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">First achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">Second achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box m-2">
                        <img src="achievements.jpg" alt="My achievement">
                        <h2 class="box-title">Third achievement</h2>
                        <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu volutpat lorem. Morbi in nibh interdum, rutrum enim quis, eleifend eros. Phasellus a massa vitae turpis dictum pretium eget a tortor. Curabitur ac ultrices quam, eu ultricies purus. Morbi fringilla nibh ut libero tincidunt, ut pharetra orci maximus. Sed lacinia erat suscipit vehicula consectetur. Quisque mauris nulla, aliquam at orci sit amet, ultrices ullamcorper odio. Suspendisse potenti.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-5" id="contact">
            <form action="#" class="box p-3 box-shadow theme-adjust">
                <div class="form-group">
                    <h1 class="heading-title">Contact</h1>
                </div>
                <div class="form-group">
                    <p class="form-label">Email:</p>
                    <input type="email" class="form-control">
                </div>
                <div class="form-group">
                    <p class="form-label">Message:</p>
                    <textarea class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit" class="btn theme-reverse form-control">
                </div>
            </form>
        </div>
    </div>
</body>
</html>

브라우저를 새로 고치려고 하면 Switch Theme 버튼이 표시됩니다.
잘하다👏👏👏~ 너는 방금Fire UI로 너의 사이트를 만들었다.
만약 네가 좋아한다면 https://github.com/fire-ui/fire-ui의 별을 주는 것을 잊지 마라.
즐거운 코딩!

Reference

이 문제에 관하여(Fire UI를 사용하여 처음부터 프로필 페이지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/stanleyowen/create-your-profile-page-from-scratch-with-fire-ui-35cn

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

제14장 - 유형 정보(1)

파이썬을 통해 Qita 태그를 시각화하는 네트워크

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다