? 돌아온 것을 환영합니다! 1부를 못 보셨나요? 걱정하지 마세요. 처음부터 시작하거나 여기에서 뛰어들 수도 있습니다!

소개: PictureFrame 구성 요소

이 튜토리얼의 작업은 웹 앱에서 사진 스타일링을 위한 사진 프레임 구성 요소를 만드는 것입니다. 지난번에는 아래와 같은 스니펫으로 마무리했습니다. 그러나 이 튜토리얼에서는 아래 캡션과 함께 하마의 분홍색/연어 "사진 프레임"을 표시하도록 "템플릿"을 변경했습니다. 이 튜토리얼을 시작하려면 다음을 복사하여 새 파일에 붙여넣고 브라우저에서 엽니다.

<template Modulo>
    <Component name="PictureFrame">
        <Template>
            <div style="display: inline-block; border: 10px inset salmon; padding: 10px; margin: 10px; width: 100px; background: pink;">
                <img
                    style="width: 50px;"
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
                />
                <p>Photograph: <em>The Return of the Hippo</em></p>
            </div>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PictureFrame></x-PictureFrame>

2부 소개

이 튜토리얼에서는 Modulo 프레임워크의 첫 번째 핵심 개념인 구성 요소 부분에 대한 논의와 함께 일반 HTML 구성 요소에 스타일을 추가한 후 마지막으로 더 중요한 구성 요소 부분을 살펴보겠습니다. : 소품.

먼저 위 코드에서 뭔가 지저분한 점을 발견할 수 있습니다. 모든 스타일은 style= 속성에 포함됩니다! CSS를 코딩할 때 모든 스타일을 inline style= 속성에 배치하는 것은 종종 유지 관리하기 어렵습니다. Modulo는 CSS 코드를 보다 자연스럽게 작성할 수 있도록 "스타일" 구성 요소 부분을 지원합니다. 구성 부품이란 무엇입니까? 글쎄, 우리는 그것에 대해서도 알아볼 것입니다. 먼저 스타일리시하자!

1단계: 스타일 구성 요소 부분 생성

<Template>
    <div class="salmon-frame">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" />
        <p>Photograph: <em>The Return of the Hippo</em></p>
    </div>
</Template>
<Style>
    img {
        width: 50px;
    }
    .salmon-frame {
        display: inline-block;
        border: 10px inset salmon;
        padding: 10px;
        margin: 10px;
        width: 100px;
        background: pink;
    }
</Style>

훨씬 나아졌어요! 이는 HTML의 "스타일" 태그와 매우 유사하게 보이고 작동하므로 원하는 대로 클래스와 선택기를 만들 수 있습니다.

2단계: 호스트 구성요소 자체 스타일 지정

웹 구성 요소 자체의 스타일을 지정하려는 경우가 많습니다(이 경우 태그). 이를 위해 특별한 :host 선택기를 사용할 수 있습니다:

<Style>
    :host {
        text-align: center;
    }
    /* ... etc ... */
</Style>

구성 부품 소개

Modulo의 핵심 개념은 Component Parts입니다. 모든 구성 요소 정의는 몇 가지 구성 요소 부분으로 구성됩니다. 따라서 구성 요소 정의는 실제로 구성 요소 부분 정의의 모음일 뿐입니다. 구성 요소의 "내부"에서 각 구성 요소 부분은 구성 요소의 기능에 기여하는 서로 다른 역할을 갖습니다.

우리는 이미 가장 기본적인 구성 요소 두 가지를 배웠습니다.

1. 템플릿 - <템플릿> - 템플릿은 구성 요소에 포함할 임의의 HTML 코드를 넣는 곳입니다. 지금은 변경되지 않는 일부 HTML만 포함하겠습니다. 다음 튜토리얼에서는 "템플릿 언어"를 사용하여 어떤 상황에서 어떤 HTML이 생성되는지 제어하는 ​​방법을 배우겠습니다.

2. 스타일 - <스타일> -

   Learn Modulo.js: Part 2

   Style and Props

   <x-PictureFrame image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" caption="Hippopotamus out of water" photographer="Lee R. Berger" ></x-PictureFrame>
   로그인 후 복사