OX퀴즈 웹페이지 만들기 – 1. 마크업
오늘은 OX퀴즈 웹페이지를 만드는 과정을 단계별로 따라해 볼 수 있도록 준비했습니다. OX퀴즈 웹페이지는 사용자들에게 문제를 제시하고 O 또는 X로 답변할 수 있는 간단한 퀴즈로 진행이 되는데요. 이번 시간에는 마크업을 진행해 …
마크다운(Markdown) 마크업을 지원하는 플랫폼 종류와 특징
마크다운(Markdown)은 간결하면서 가독성이 좋은 문서를 작성하는 데 널리 사용되는 경량 마크업 언어입니다. 이것은 웹 개발자, 블로거, 작가 및 다른 많은 사람들에게 인기가 있으며, 이러한 이유로 많은 플랫폼과 서비스에서 마크다운 마크업을 …
![[시멘틱 마크업] details 팝업창](https://ljj.kr/wp-content/uploads/2023/09/2023-09-07-01-300x150.png)
[시멘틱 마크업] details활용 팝업창
웹 개발에서 팝업창은 사용자에게 추가 정보를 제공하거나 상호 작용할 수 있는 기회를 제공합니다. 이러한 팝업창을 마크업할 때 시멘틱한 요소인 <details>와 <summary>를 활용하면 웹 접근성과 사용자 경험을 개선할 수 있습니다. 시멘틱 …
[시멘틱 마크업] dialog활용 팝업창
팝업창은 웹사이트에서 중요한 정보나 메시지를 강조하고 사용자와 상호 작용할 수 있는 효과적인 수단입니다. 그러나 팝업창을 마크업할 때 웹 접근성과 사용자 경험을 고려해야 합니다. 이 글에서는 시멘틱 마크업을 기반으로 한 팝업창 …
[JS] 객체(Object)의 정의와 기본활용
자바스크립트(JS)는 웹 개발에서 핵심적인 역할을 하는 프로그래밍 언어 중 하나입니다. 이 언어를 이해하고 활용하는데 있어서 객체(Object)는 중요한 역할을 합니다. 본 글에서는 객체의 정의와 기본활용을 다루는데 설명을 하고 있습니다. 1. 객체란 …
[jQuery] html 요소의 추가
jQuery를 사용하여 HTML 요소를 동적으로 추가하는 방법과 관련된 주요 내용을 설명해 보겠습니다. 본 글에서는 jQuery를 활용하여 HTML 요소를 추가하는 다양한 방법과 비교하는 예제를 제공합니다. HTML 요소를 동적으로 추가하는 것은 웹 …
insertAdjacentHTML와 insertAdjacentElement 차이점
웹 개발에서 돔(DOM) 조작은 필수적인 스킬 중 하나입니다. 돔을 조작할 때 사용되는 여러 메서드 중 insertAdjacentHTML와 insertAdjacentElement는 비슷한 이름을 가지고 있지만, 다른 용도와 동작 방식을 가지고 있습니다. 이 두 메서드의 …
[JS] HTML에 내용을 추가하는 여러가지 방법:돔요소 추가
자바스크립트(JavaScript)는 웹 개발에서 돔(DOM) 요소를 동적으로 추가하고 조작하는 데 필수적인 언어입니다. 이 글에서는 돔 요소를 추가하는 여러 가지 방법을 알아보고, 어떤 방식을 선택해야 하는지, 그리고 보안과 최적화에 대해 알아보겠습니다. 1. …
인라인 vs 블록 요소: 차이점과 올바른 사용법
웹 페이지를 구성하는 데 있어서 인라인 요소와 블록 요소는 각각 다른 역할과 의미를 가지고 있습니다. 인라인 요소는 문장 내에서 사용되며, 텍스트와 함께 콘텐츠를 배치하는 데 주로 활용됩니다. 인라인 요소와 블록요소의 …
[JS] 스크롤 내리면 콘텐츠 보여주기
1. 소개 스크롤 내리면 콘텐츠 보여주기는 웹 페이지에서 사용자가 스크롤을 내리면 특정 위치에 도달했을 때 추가 콘텐츠가 자동으로 표시되는 기능입니다. 이 기능은 사용자 경험을 향상시키고 콘텐츠의 전달력을 강화하는데 도움을 줍니다. …