본문으로 건너뛰기
cccskills

'markup' 검색 결과

302건 · 관련도순

Review pages for situations where JavaScript is disabled or unavailable. Check that important content appears in the initial HTML and that noscript elements offer useful alternatives, then suggest changes to keep core content and navigation accessible.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking page content with JavaScript disabled
  • Adding alternatives for JavaScript-dependent features
  • Reviewing initial HTML for important content
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review website JPEGs for progressive encoding, which displays a blurry preview before sharpening. Identify images that could use this format, consider file size and loading behavior together, and explain how to confirm the change in browser developer tools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing how JPEGs appear during loading
  • Checking JPEG fallbacks for WebP or AVIF
  • Reviewing image delivery through a CDN or build process
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Audit website images and guide conversion to WebP and AVIF, formats that reduce image transfer size. Identify affected files, add fallback images, and review dimensions and loading behavior alongside the impact on initially visible content.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Finding JPEG and PNG images to convert
  • Adding WebP and AVIF sources with fallback images
  • Reviewing CSS background image formats
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review page landmarks, the named regions screen reader users navigate between. The skill checks semantic HTML elements, a single main content region, and labels for repeated region types, then identifies markup changes and ways to verify them.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing page structure for screen reader navigation
  • Replacing generic containers with semantic HTML elements
  • Checking labels for multiple navigation regions
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Create and audit meta descriptions, the short page summaries used in search results. Find missing, duplicate, or unsuitable descriptions and write distinct summaries that accurately explain each page’s content and value.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Writing descriptions for new pages
  • Finding missing or duplicate descriptions
  • Reviewing description length and HTML markup
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check the HTML delivered to browsers for broken internal, external, anchor, and email links. Locate errors and unintended redirects, suggest URL updates or replacements, and help introduce automated checks and ongoing monitoring.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking links on documentation or e-commerce sites
  • Reviewing links produced by shared components
  • Adding automated link checks to CI/CD
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review rendered HTML and replace generic div elements with elements that describe their purpose, such as main, nav, and article. Clarify page structure to support screen-reader navigation, search-engine understanding, and code maintenance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing page structure built mostly with div elements
  • Checking HTML output from templates and shared components
  • Improving page structure for screen-reader navigation
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review website images and reduce file sizes while limiting visible quality changes. Check compression, formats, display dimensions, loading behavior, and delivery settings, then recommend suitable tools or build automation and verification in browser DevTools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Find oversized images on web pages
  • Choose compression methods for photos and graphics
  • Automate image compression during builds
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

image-cdn

무료

Review website image delivery and configure an image CDN, a service that optimizes and distributes images. Check file formats, dimensions, loading behavior, and initial screen impact, with guidance on verifying changes in DevTools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking whether website images use a CDN
  • Configuring automatic image resizing and format conversion
  • Reviewing image loading and initial screen impact
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review website images for file format, size, dimensions, and loading behavior. Produce improved HTML with image variants for different screen sizes, suitable compression, and deferred loading where appropriate, while addressing loading speed and layout shifts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing image sizes and formats on slow-loading pages
  • Serving suitable image sizes for mobile and desktop screens
  • Preventing layout shifts while images load
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review form fields to ensure each has a properly connected label. Identify placeholder-only names and missing group headings, then guide markup fixes that help screen readers identify inputs and make labels clickable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing labels in an application form
  • Replacing placeholder-only field names
  • Checking checkbox and radio button groups
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review form validation so users, including people using screen readers, can understand and correct errors. Check field descriptions, required states, and grouped choices in rendered HTML, while accounting for React forms that handle submission in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Make form errors understandable to screen reader users
  • Check how required fields and grouped choices are marked
  • Review validation in React forms
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review JavaScript written directly in HTML and move suitable code into external files. Replace inline event handlers with addEventListener, clarify browser verification steps, and explain how separating code supports maintenance, caching, and security.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Moving JavaScript out of HTML markup
  • Replacing onclick handlers with addEventListener
  • Reviewing script separation for caching and maintenance
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

faq

무료

Add FAQ sections to landing pages or blog posts and generate FAQPage structured data, a format search engines can read. Check required question and answer fields, valid syntax, and consistency with content visitors can see.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding FAQ sections to landing pages or blog posts
  • Generating structured data from existing questions and answers
  • Checking FAQ markup against visible page content
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review external links in articles to identify unsupported factual claims and suggest authoritative sources. Check link attributes used for security and for identifying paid, affiliate, or untrusted links, then guide corrections to citations and markup.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Find factual claims that lack source links
  • Add citations to official or research sources
  • Review external link security attributes
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review file upload interfaces for clear labels, accepted formats, size limits, and accessible progress and error messages. Check that keyboard and screen reader users can complete uploads, including alternatives to drag and drop.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Review labels and instructions on file upload forms
  • Check keyboard alternatives to drag and drop
  • Improve upload progress and error announcements
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review pages for languages written from right to left, including Arabic and Hebrew. Guide HTML direction settings, mixed-direction user content, and layout checks so browsers and screen readers handle text in the intended order.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Review text direction on Arabic or Hebrew pages
  • Handle names and posts with mixed writing directions
  • Check navigation and icon layout mirroring
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

favicons

무료

Check and implement site icons for browser tabs, bookmarks, and mobile home screens. Review icon formats, sizes, HTML declarations, and PWA manifest settings to help the site display appropriate icons across browsers and devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Prepare icons for browser tabs and bookmarks
  • Set up mobile home screen icons
  • Review PWA manifest icon settings
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Investigating content jumps while images load
  • Finding images missing width or height attributes
  • Preserving image proportions in responsive layouts
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review how a web page loads scripts and identify tags that interrupt HTML parsing. Get guidance on choosing defer, async, or type=module, with checks focused on the HTML actually delivered to the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking script tags that delay page rendering
  • Choosing between defer, async, and type=module
  • Reviewing HTML generated by shared components
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check HTML definition lists, which pair terms with descriptions, for structural problems. Identify invalid child elements and unclear relationships, suggest markup fixes, and explain how to verify that screen readers group the information correctly.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing HTML structure in glossaries
  • Checking term and description relationships
  • Fixing definition lists that confuse screen readers
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review image filenames and replace generic names with concise, descriptive names using lowercase letters and hyphens. Update references across HTML, CSS, and JavaScript to support image search visibility and easier asset management.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing product image filenames
  • Standardizing names across an image library
  • Updating references after bulk image renaming
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review how a website behaves when images fail to load and add fallback images or meaningful placeholder content. Check loading behavior, consider loading placeholders, and use error logging and browser developer tools to investigate and verify fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding fallback images for broken image links
  • Reviewing placeholders shown while images load
  • Investigating image loading failures with logs and DevTools
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review rotating slideshows for accessibility and guide fixes to pause controls, keyboard navigation, and screen reader announcements. Check the rendered HTML and ensure the carousel respects users who request reduced motion in their device settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Review pause controls for autoplay slideshows
  • Check carousel navigation using only a keyboard
  • Review screen reader announcements of slide changes
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트