기존 시스템의 HTML mock 만들기

8119 단어 HTMLmockupidea
인수인계한 견본서는 엑셀 체크 용지다.
시대도 있으니까 그건 별거 아니지만, 나 혼자 엑셀 체크지에 쓰고 싶지 않아서 어떡하지 생각했어요.
자체 개발이 아닌 설명서를 작성해 고객과 합의한 뒤 개발자에게 의뢰했기 때문에 변경하려는 것은 외관뿐이다.

와이어 프레임 공구를 넣어봤어요.


결론적으로 엑셀 사각지였기 때문에 어떤 와이어프레임 도구를 사용하든 1부터 써야 한다.그것은 효율이 너무 낮다.CSS도 완전히 달라서 살짝 해봤는데 안 될 것 같아요.나는 전선틀의 공구를 0부터 시스템을 제작할 때 다시 한번 시험해 보고 싶다.

그냥 HTML로 쓰면 되잖아요.


HTML은 어느 정도 쓸 수 있기 때문에, 아예 HTML을 직접 변경하는 것은 매우 빠르지 않습니까?
HTML 모듈이죠?
예를 들어 이것은 구글의 원천이지만, 현지에서도 구글 화면을 표시할 수 없는 해리포터를 복제한다.
<!doctype html>
<html dir="ltr" lang="ja">
  <head>
    <meta charset="utf-8">
    <title>新しいタブ</title>
  </head>
  <body>
    <div id="oneGoogleBar"></div>
    <iframe id="backgroundImage"
        src="chrome-untrusted://new-tab-page/custom_background_image?url=https%3A%2F%2Flh5.googleusercontent.com%2Fproxy%2FoxUbE3Qn-c1CLtnPTEtvTl6ccUFz1pPakdmOuojrH53_8cWEYGoyaUIMT5IBCr8j0IZQUqb49gXHd4bDA7wdhsWDw8_MNOeOqCcSWJfcbfR6%3Dw3840-h2160-p-k-no-nd-mv">
    </iframe>
    <ntp-app></ntp-app>
    <script type="module" src="new_tab_page.js"></script>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <link rel="stylesheet" href="shared_vars.css">
    <div id="oneGoogleBarEndOfBody"></div>
  </body>
</html>

HTML 복사하여 붙여넣으려면


  • Chrome을 통해 웹 사이트를 표시하고 F12에 표시된 Elements의 내용을 오른쪽 단추로 누르면 다음 그림과 같이 Copy&Copy outerHTML로 복사합니다.


  • 새 텍스트 파일을 만듭니다.확장자가 > 또는 htm으로 변경되었습니다.

  • VS 코드를 사용하여 붙여넣기를 엽니다.(없을 때 마우스 오른쪽 버튼으로 > 편집 또는 메모장에 열기)

  • VS 코드를 열고 단축키로 성형합니다.Shift ＋ Alt ＋　F이렇게 하면 스타일시트가 없어서 예전에 수첩으로 만든 화면이 나올 것 같아.

  • 정식 공연 환경에서 css를 가져오다.

    • 이러면 화면 해리포터 돼.

    HTML로 한 게 맞는지 모르겠어요.


    이 방법이 좋은지는 모르겠지만 방법을 모르면 논의할 수 없으니 일단 방법을 알았으면 좋겠다.
    [초보자용] welnownPort의 뜻과 자주 사용하는 포트 번호 일람.
    MetaWhere 및 비 MetaWhere 해싱 조건을 혼합하면 SQL이 손상됨

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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