퍼블리싱에서 종종 사용되는 기호 HTML

[python] html table을 Markdown으로 변경하기. 

htmltabletomdhtml 테이블을 마크다운으로 변환하기 위한 것입니다. 또한, 테이블 셀 내부의 내용은 HTML이 포함되어 있는 경우 마크다운으로 변환할 수 있으며, 이를 위해 라이브러리를 사용합니다 htmltomarkdown.

pip install htmltabletomd

https://pypi.org/project/htmltabletomd/

from bs4 import BeautifulSoup
from markdownify import markdownify as md
import os

def convert_html_table_to_md(html_file_path, output_md_file_path):
    # HTML 파일 읽기
    with open(html_file_path, 'r', encoding='utf-8') as file:
        html_content = file.read()

    # BeautifulSoup을 사용하여 HTML 파싱
    soup = BeautifulSoup(html_content, 'html.parser')

    # HTML을 Markdown으로 변환
    markdown_content = md(str(soup))

    # 결과를 Markdown 파일로 저장
    with open(output_md_file_path, 'w', encoding='utf-8') as file:
        file.write(markdown_content)
    
    print(f"Converted HTML table to Markdown and saved as: {output_md_file_path}")

# 사용 예시
#html_file_path = 'path_to_your_html_file.html'  # 변환할 HTML 파일 경로
html_file_path = 'test_001.html'  # 변환할 HTML 파일 경로
output_md_file_path = 'output_markdown_file.md'  # 저장할 Markdown 파일 경로

convert_html_table_to_md(html_file_path, output_md_file_path)

[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>