HTML5

HTML에는 많은 사람들이 매일 사용하는 <div>, <p>, <a>와 같은 태그들이 많이 있습니다. 그러나 종종 눈에 띄지 않는 몇 가지 숨겨진 보석들도 있습니다. 이러한 태그들은 웹사이트를 더 매력적이고 접근성이 높고 의미 있는 것으로 만드는 데 많은 노력이 필요하지 않습니다. 이 기사에서는 웹 페이지를 향상시킬 수 있는 독특한 HTML 요소 그룹에 대해 논의하겠습니다. 이들은 텍스트 서식 지정, 가독성 향상, 상호 작용 기능 추가를 위한 특정 기능을 제공합니다. 목차 <q> 태그: 짧은 인라인 인용구 <s> 태그: 텍스트 가로줄 <mark> 태그: 강조된 텍스트 <ruby>…

HTML, CSS, 그리고 JavaScript로 自己的 인터렉티브 도구를 만들고 싶었나요? 이 글에서는 가볍고 straightforwardな 项目을 만들어 봅시다: 색상 피커 도구를 만들어 봅시다. 이 conveniently little 도구는 사용자가 좋아하는 모든 색상을 선택하고 그것의 HEX와 RGB 값을 即시적으로 볼 수 있게 해줍니다. 그리고 가장 좋아하는 코드 에디터를 꺼내서 시작해 봅시다! Step 1: 프로젝트 세팅 새 폴더 생성: 이 프로젝트를 위해 컴퓨터에 새로운 폴더를 생성합니다. color-picker-tool라고 이름을 줄 수 있습니다. 파일 생성: 폴더 안에 세 개의 파일을 생성합니다: index.html styles.css script.js Step 2: HTML…

_PROJECT BUILDING_는 코딩 배우는 것에 매우 중요합니다. 프로젝트를 만들면 포트폴리오를 확장하고 기술을 새로운 상황에 어떻게 적용하는지 배웁니다. 우리는 _freeCodeCamp.org Spanish YouTube channel_에 2시간의 코스를 공개했는데, HTML, CSS, JavaScript로 3개의 프로젝트를 만드는 것을 단계별로 안내합니다. 반응형 네비게이션 바와 드롭다운 메뉴, 슬라이더, 커스텀 모달을 갖춘 랜딩 페이지를 만드는 과정에서 기술을 연습할 수 있습니다. 스페인어를話하는 친구들이 있다면 이 기사의 스페인어 버전을 공유해주시기 바랍니다. 이 강의를 주는 Jordan Alexander Cruz Garcia는 웹 개발자로, 지식을 공유하고 CSS의 놀라운 세계에 대해 다른 사람들을 가르치는 것을 사랑합니다.…

HTML5 Canvas와 SVG는 모두 놀라운 그래픽과 시각적 경험을 만들 수 있는 표준 기반 HTML5 기술입니다. 이 기사에서 질문하고자 하는 것은 다음과 같습니다: 프로젝트에서 어느 것을 사용해야 하는지 중요합니까? 다시 말해, HTML5 Canvas를 SVG보다 선호하는 어떤 사용 사례가 있습니까? 먼저 HTML5 Canvas와 SVG에 대해 몇 가지 소개하겠습니다. HTML5 Canvas란? 다음은 WHATWG 사양이 canvas 요소를 소개하는 방식입니다: canvas 요소는 스크립트에 해상도에 따른 비트맵 캔버스를 제공하며, 이를 사용하여 그래프, 게임 그래픽, 예술 또는 기타 시각적 이미지를 실시간으로 렌더링할 수 있습니다. 다시 말해, <canvas>…

이 튜토리얼에서는 덜 사용되는 HTML5 <datalist> 요소에 대해 깊이 있는 살펴보겠습니다. 이 요소를 사용하면 자바스크립트 없이 가볍고, 접근 가능하며, 브라우저 간 호환성을 지원하는 자동완성 폼 컨트롤을 구현할 수 있습니다. <select>는 어떤 문제가 있나요? HTML5 <select> 컨트롤은 사용자가 적은 범위의 옵션 중에서 선택할 때 이상적입니다. 다음과 같은 경우에는 덜 실용적입니다: 많은 옵션이 있는 경우, 예를 들어 국가나 직함 사용자가 목록에 없는 자신의 옵션을 입력하고 싶은 경우 명백한 해결책은 자동완성 컨트롤입니다. 이를 사용하면 사용자가 몇 글자를 입력함으로써 더 빠른 선택을 위해 사용…

이 글에서는 HTML <details> 요소를 스타일링하는 몇 가지 간단한 방법을 살펴볼 것입니다. 이 요소는 웹 페이지에서 콘텐츠의 일부를 보여주고 숨기는 데 매우 유용합니다. 자바스크립트 없이 간단한 공개 요소를 HTML에 가지고 있는 것은 편리합니다. 하지만 <details> 요소의 기본 스타일링은 어떤 사람에게는 마음에 들지 않을 수 있습니다. 다행히도 이 요소의 스타일링을 변경하는 것은 매우 쉽습니다. 아래의 목차는 <details> 요소를 사용한 예입니다. 우리는 간단한 테두리와 약간의 패딩을 추가했습니다. Table of Contents details 요소 소개 배경색, 테두리 및 패딩 테두리 추가하기 배경색 추가하기 마커…

이 글에서는 HTML 폼 필드와 HTML5가 제공하는 유효성 검사 옵션을 살펴보고, CSS와 JavaScript를 사용하여 이를 어떻게 강화할 수 있는지 알아볼 것입니다. 제약 유효성 검사란 무엇인가? 모든 폼 필드에는 목적이 있습니다. 그리고 이러한 목적은 종종 제약에 의해 관리됩니다. — 즉, 각 폼 필드에 어떤 것을 입력해야 하고 어떤 것을 입력하지 말아야 하는지에 대한 규칙입니다. 예를 들어, 이메일 필드는 유효한 이메일 주소를 요구할 수 있고; 비밀번호 필드는 특정 유형의 문자를 요구하거나 필수 문자 수를 정할 수 있으며; 텍스트 필드는 입력할 수 있는…

한동안 저는 CSS로 이런 3D 씬을 만들어 놀았습니다 — 보통 제 생방송에서 만들죠. 3D CSS 반응형 스턴트 비행기! 🛩️ 루프와 롤을 도는 것이 가능합니다! 😎 마우스 움직임에 반응합니다 🐭 👉 https://t.co/A1zNmfEzzi via @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 각 데모는 CSS로 다른 일을 시도하거나 일을 수행하는 방법을 연구할 수 있는 기회입니다. 저는 종종 스트림에서 무엇을 시도해 볼지 제안을 받습니다. 최근 제안 중 하나는 “3D”로 인쇄하는 프린터였습니다. 그리고 제가 만든 것이 바로 이것입니다! 📢 CSS…