본문 바로가기

HTML17

사이트와 앱 디버깅 최적화 및 취약점 분석에 React Developer Tools 활용 React Developer Tools는 React로 빌드된 웹 사이트와 모바일 앱을 디버깅하고 최적화하는 데 필수적인 도구입니다. 이 도구를 사용하면 개발자는 React 컴포넌트의 계층 구조를 시각적으로 검사하고, 각 컴포넌트의 props와 state를 실시간으로 편집하며, 성능 문제를 식별할 수 있습니다. 다음은 React Developer Tools를 설치하고 사용하는 방법에 대한 기본적인 내용입니다. React Developer Tools 설치 방법 브라우저 확장 프로그램 Chrome, Firefox, Edge: 이러한 브라우저에서는 React Developer Tools를 브라우저 확장 프로그램으로 직접 설치할 수 있습니다. 설치 후, React로 빌드된 웹 사이트를 방문하면 도구가 자동으로 활.. 2024. 3. 5.
Jinja2 템플릿 언어 동작원리 이해와 간단한 웹 화면 구성 우선 Jinja2에 대해 간단하게 설명하겠습니다. 1. Jinja2는 무엇인가요? Jinja2는 Python에서 사용되는 템플릿 엔진 중 하나입니다. 템플릿 엔진은 정적인 부분과 동적인 데이터를 결합하여 동적인 결과물을 생성하는 도구입니다. 2. 어떤 역할을 하는 건가요? Jinja2의 주된 역할은 HTML과 같은 문서를 만들 때, 문서의 일부를 동적으로 변환하는 데 있습니다. 정적인 부분은 그대로 두고, 특정 부분을 변경하거나 반복되는 패턴을 생성할 수 있도록 도와줍니다. 3. 어떻게 동작하나요? Jinja2는 템플릿 안에 삽입된 특별한 문법을 해석하여 동적인 부분을 채워넣습니다. 중괄호({{ }}) 안에 변수를 넣으면 해당 변수의 값으로 치환되고, 중괄호와 퍼센트({% %}) 사이에는 제어 구조(반복.. 2023. 12. 19.
HTML 코드에서 데이터 추출하여 JSON 형식 변환 HTML 코드에서 데이터를 추출하여 JSON 형식으로 변환하는 작업을 수행합니다. 이를 간소화하려면 정규 표현식을 사용하는 대신 더 구조화된 방법을 사용하는 것이 좋습니다. 다음은 Python을 사용하여 같은 작업을 수행하는 방법입니다. Python은 정규 표현식 대신 BeautifulSoup과 같은 라이브러리를 사용하여 HTML 파싱을 더 쉽게 할 수 있습니다. from bs4 import BeautifulSoup import re import json html = """ 여기에 HTML 코드를 입력하세요 """ soup = BeautifulSoup(html, 'html.parser') data = [] for row in soup.find_all('tr'): # 'tr' 태그를 포함하는 모든 행을 찾.. 2023. 9. 23.
HTML 엔티티(Entities) 대표적인 유형 표시 글자 엔티티 숫자 엔티티 이름 설명 space > > greater than & & & ampersand ' ' ' (IE에서 안됨) apostrophe " " " quotation mark ‘ ‘ ‘ left single quotation mark ’ ’ ’ right single quotation mark “ “ “ left double quotation mark ” ” ” right double quotation mark ° ° ° degree · · · middle dot × × × multiplication ÷ ÷ ÷ division ? − − minus ∞ ∞ ∞ infinity ∼ ∼ ∼ simular to ≠ ≠ ≠ not equal ≤ ≤ ≤ less or equal.. 2023. 3. 24.
[html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-align 속성을 씁니다. text-align은 block 요소 안에 있는 inline 요소를 정렬합니다. inline 과 block 요소 차이는 다음을 참고 inline 요소 : 줄 속에 끼워 넣는 요소로 예 :, , , 태그 등 block 요소 : 해당 요소가 속한 줄은 가로 화면 전체100%를 차지하며 앞뒤로 줄 바꿈이 됨 예 : , , , , 등 1. block 요소에만 text-align 속성을 적용할 수 있다 2. 정렬되는 것은 block 요소 안에 있는 inline 요소만 가.. 2021. 4. 14.