[HTML] sns 용 META tag

[HTML] details  summary , jquery로 open 제어

<details>

HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/details

Open 추가

$('details').attr('open','');

Opne 제거

$('details').removeAttr('open');

$('.info').on('click', 'details', function () {
    $('details').removeAttr('open');
    $(this).attr('open', '');
});

입력항목 기록 삭제, How to clear history of text input

https://www.w3schools.com/tags/att_input_autocomplete.asp

<input type="email" name="email" autocomplete="off">


<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

속성 autocomplete은 입력 필드에서 자동 완성을 활성화해야 하는지 여부를 지정합니다.

자동 완성을 사용하면 브라우저가 값을 예측할 수 있습니다. 사용자가 필드에 입력하기 시작하면 브라우저는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 합니다.

참고: 속성 autocomplete은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상 입력 유형과 함께 작동합니다.

autofocus

문서가 로드되면 autofocus 속성이 들어간 input 태그에 자동으로 focus가 이뤄집니다.

  <form action="" method="">
    <input type="text" autofocus>
    <input type="text">
    <input type="text">
  </form>

required

회원가입을 할 때 필수항목을 입력하지 않으면 경고 문구가 뜨고 넘어가지 않죠? 원래는 스크립트로 구현해야 하는데 HTML로 쉽게 할 수 있는 방법이 바로 required 속성입니다.

input태그 모두 required속성을 주겠습니다.
그리고 한 칸을 비운채로 submit버튼을 누르면 어떻게 될까요?

  <form action="" method="">
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <button type="submit">다음</button>
  </form>

placeholder  

고객이 회원가입을 할 때 해당 입력창에 뭘 입력해야 하는지 힌트를 주는 속성이 바로 placeholder입니다.
물론 응용해서 회원가입 뿐만 아니라 다양한 용도로 사용할 수도 있겠죠?

  <form action="" method="">
    <input type="text" placeholder="아이디">
    <input type="password" placeholder="비밀번호">
  </form>

readonly  

입력은 받지 않고 읽기와 복사만 가능한 속성입니다.
어디에 사용하는지가 제일 중요하죠?

스크립트를 이용해서 특정 조건을 만족하면 활성화가 되게끔 합니다. 예를 들면 은행 대출을 받을 때 사전 설문조사로 특정 조건을 만족한 고객만 해당 입력창에 입력이 가능하도록 하는 것이죠.

  <form action="" method="">
    <input type="text" readonly value="조건 만족 전 입력 불가">
  </form>

HTML 특수문자

PyScript -  Run Python in Your HTML

https://pyscript.net/

Examples: https://pyscript.net/examples

PyScript

What is PyScript

Summary

PyScript is a Pythonic alternative to Scratch, JSFiddle, and other "easy to use" programming frameworks, with the goal of making the web a friendly, hackable place where anyone can author interesting and interactive applications.

To get started see the getting started tutorial.

For examples see the pyscript folder.

Longer Version

PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files to your html page with:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

You can then use PyScript components in your html page. PyScript currently implements the following elements:

• <py-script>: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
• <py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code

Check out the pyscriptjs/examples folder for more examples on how to use it, all you need to do is open them in Chrome.

How to Contribute

Read the contributing guide to learn about our development process, reporting bugs and improvements, creating issues and asking questions.

Resources

• Discussion board
• Home Page
• Blog Post

https://github.com/pyscript/pyscript

Anaconda Engineering Blog

[python] How to write to an HTML file in Python

https://www.kite.com/python/answers/how-to-write-to-an-html-file-in-python

USE open() AND file.write() TO WRITE TO AN HTML FILE

Use open(file, mode) with mode as "w" to create a new HTML file file or write to an existing one. Use file.write(data) to write data to the file. Use file.close() to close the file after writing.

text = '''

<html>

    <body>

        <h1>Heading</h1>

    </body>

</html>

'''

file = open("sample.html","w")

file.write(text)

file.close()

<html>
    <body>
        <h1>Heading</h1>
    </body>
</html>

How TO - Sort a Table

html 테이블 정렬

.