당신은 쉽게 효율적인 사이트를 만들 수 있는 개발자를 어떻게 부릅니까?전문가처럼 수시로 랜딩 페이지 제작을 준비하는 개발자나 어떤 멋진 프레임워크도 사용하지 않지만 세계적인 제품을 수출할 수 있는 개발자?
'가장 가치 있는 개발자(MVD)'라고 할 수 있다.
그러나 새로운 개발자가 오면 코드의 의미에 최대한 관심을 기울이지 않고 코드를 구축하는 데 최선을 다하고 MVD보다 더 잘하면 어떨까?
너는 절대로 그들을'가장 가치 있는 프로 선수(MVP)'라고 불러야 한다.

MVP를 존중해야 돼요.
이 모든 것은 무엇 때문입니까?MVP와 개발자는 어떤 관계입니까?어디 보자.

클래스도, 프레임도, 의미 HTML만 있으면 완성!

이것은 나의 약속이 아니다. 이것이 바로 MVP의 약속이다.css 이렇게 하겠다고 약속합니다!

MVP라니요?css？

It is a minimalist stylesheet for HTML elements.

기대 기능?다음은 다음과 같습니다.

기존의 CSS 스타일.

배울 클래스나 프레임이 없습니다.

의미 HTML을 사용합니다.

간단한 HTML로 다른 내용이 없습니다.

기본 응답

나는 이전에 비슷한 라이브러리를 시도해 봤는데, HTML만 있으면, 너는 외관이 좋은 웹 페이지를 가질 수 있다.

바닐라 HTML로 다음 블로그를 디자인하세요.CSS가 없습니다.😵

비바프 쿠르베・ 6월 12일 20일・ 6 분 읽기

#beginners #html #css #tutorial

그러나 이것은 일부 특정한 라벨이 있는데, 나는 더욱 복잡한 방법을 위해서라고 생각한다.자, MVP.css는 더 간단한 방식으로 일을 간소화하려고 합니다.
내가 보기에, 만약 당신이 다음 전자책, 제품, 또는 아주 좋은 개발 라이브러리를 만들 수 있는 빠른 입문 템플릿이 필요하다면, 이것은 틀림없이 도움이 될 것이다.이 과정은 매우 빠르다. 당신이 얻은 웹 페이지는 경량급이며, 또한 의미 규칙을 따른다.

우리 뭐 할 거야?

이것은 다음과 같습니다.

우리는 설계에 그다지 관심이 없고 전체 건축 과정에 더욱 관심이 있다.
생각해 보자. 'Ideanator' 는 허구적인 서비스 제공자로서 온라인 제품을 만드는 것이 목표이다.다음은 이 영웅 부분의 몇 가지 일이다.
(드롭다운 메뉴 포함) 탐색

배너 판매.

제목, 부제목 및 영업 활용 방안 버튼.

증언.

물론 기본적이지만 어떻게 하는지 봅시다.

➡️ 첫 번째 단계: 웹 페이지에 MVP 추가

실제로, 너는 제로 설정이 있어야만 시작할 수 있다.npm install 또는 복잡한 SDK 통합이 필요하지 않습니다.핵심 mvp만 불러옵니다.css 파일을 색인에 추가합니다.html 파일:

<link rel="stylesheet" href="https://unpkg.com/mvp.css">

➡️ 2단계: 구조 만들기 시작!

MVP의 게임은 모두 의미에 관한 것이다.HTML이 무슨 뜻인지 확실하지 않으면 this MDN documentation를 보십시오.
이러한 주장에 따르면 HTML 요소는 다음과 같은 100가지 의미로 구성됩니다.

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

물론 이 요소들은 지원되지만, 일을 재미있게 할 수 있는 요소도 있다.

<blockquote>

<code>

<form>

<pre>

<samp>

<small>

<sup>

<table>

그런 대담한 것들은 우리가 이용할 수 있다.<header>부터 시작합시다.이것은 우리의 <nav>와 <ul>/<li> 목록과 제목을 포함한다.드롭다운 목록은 다음과 같습니다.

그림과 같이 목록 세트를 <ul>에 추가하면 됩니다.

<li><a href="#">Learn more</a>
    <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Get help</a></li>
    </ul>
</li>

다음은 판매 표어다.나는 이것이 <article> 라벨이 예상한 결과를 실현하는 좋은 용례라고 생각한다.따라서, 그 안에 우리의 <aside> 와 필요한 텍스트가 있을 것이다.현재 우리는 유명한 CSS 기교text-align를 사용하여 텍스트를 가운데에 놓을 수 있지만, 우리는 특정한 MVP이기 때문에 HTML의 원생 <center> 표시를 사용할 것이다.😎
그 괴상한'...로 만든 거'.❤️ '내 뒷마당에서'는 상투적으로 보일 수도 있지만, 기술을 잘 활용해 보여줄 수 있다! 이것은 <sup>tag.Sup!의 도움으로 완성된 것이다? 이것은 보통 상표가 표시되지만, MVP.css는 그것을 멋있게 보인다!
제목은 단지 <h1> 라벨일 뿐이고 흔치 않은 라벨과 code 라벨을 가지고 있다.
CTA 버튼은 일반 탭<button>을 전혀 사용하지 않습니다.좋은 방법은 <p> 와 <a> 닻 표시를 사용하여 링크를 추가하는 것이다.MVP가 나머지 일을 맡는다.

<h1>Where ideas <mark>thrive</mark> with <code>code</code>.</h1>
<p>We are world's <b>#1</b> idea building company 💡 
coding all night long 👨🏻‍💻 </p>

<br>

<!-- CTA BUTTONS -->
<p><a href="#"><i>Get Quote</i></a><a href="#"><b>
Get Started &rarr;</b></a></p>

다음은 내용 부분으로 의미상<main> 구역을 가리킨다.영웅 섹션이 뷰포트보다 길거나 길어지지 않도록 권장 사항을 추가합니다.
실제 인용과 인용자의 이름으로 추천하는 것보다 <blockquote> 더 좋은 방법이 어디 있겠는가.이 안에 인용 부호 문장을 쓸 수 있고 <i> 표시로 그것을 사체로 만들 수 있다.이름<footer>은 우리에게 충분하다.그것은 우리에게 필요한 완벽한 스타일을 제공했다.

<main>
    <blockquote>
        <i>"One of the best services you can get in the year 2020."</i>
        <footer>- <b>PEETER LOO</b>, COO, Kingley Products Inc</footer>
    </blockquote>   
</main>

번영!우리 끝났어.🙊
하, 두 걸음으로 들어가면 믿을 만한 로그인 페이지가 생길 거야!만약 네가 나에게 물었다면, 그것은 정말 너무 빨랐을 것이다.⚡️
다음은 위의 예제에서 시도할 수 있는 코드 펜입니다.

추가 리소스🤩

우수한 MVP가 되어 인터넷에서 다음과 같은 내용을 주목하여 더욱 잘 이해하도록 하겠습니다.

MVP.css on NPM

Live demo of a landing page made with MVP.css

MPV.css GitHub repo

읽어주셔서 감사합니다.고마워요!오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

This week's Dev Humour. 😂 👇 pic.twitter.com/369TOve9FP

— Microsoft Developer UK (@msdevUK)

📫 매주 개발자 통신 구독📫

PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.만약 누군가가 나의 글을 보고 싶다면 here 이것은 나의 매체 자료이다.