✨
Saltberry
GithubLinkedIn
  • 개요 Overview
  • 📝HTML/CSS
    • 구조 HTML
    • 스타일 CSS
      • z-index
  • 📦개발 Development
    • 개발 Implementation
    • 단어 Glosarry
    • 깃 Git
    • 해시 Hash
    • 노드 패키지 매니저 Node Package Manager
    • 브라우저 랜더링 Browser Rendering Process
    • 교차 출처 리소스 공유 CORS
    • 인터프리터 Interpreter
    • Object-oriented programming(OOP) 객체지향 프로그래밍
  • 💡CS 50
    • Computational Thinking
  • ✨자바스크립트 Javascript
    • 자바스크립트란 What is JavaScript
    • 표현식과 문 Expression Statement
    • 변수 Variable
    • 함수 Function
    • 참과 거짓 값 Truth Falsy
    • 배열 Array
    • Import Export
    • 스택과 큐 Stack Queue
    • 문서객체모델 Document Object Model
      • 개요 Overview
      • 도큐먼트 Document
      • HTMLCollection
      • getMethod
      • NodeList
      • childNodes, children
      • Event
      • live, static
      • Element
      • DOM Token
      • 속성 attribute
      • implementation
      • 노드 Node
      • HTMLElement
    • 브라우저 저장소 Cookie Web Storage
  • 🎁리액트 React
    • 리액트 톧아보기 Overview
    • Intro
      • 상태의 불변성 State Immutability
      • Props and State
      • Hooks
    • Concepts
  • 🚦타입스크립트 Typescript
    • Page 1
  • 🗃️리덕스 Redux
    • 왜 리덕스를 사용할까 Why Redux
    • 플럭스 Flux
  • 📬넥스트 Nextjs
    • Pages
  • ✅면접 Interview
    • Index
    • Implement experiences
    • Best practice for query parameter and fetch
  • 🚀TECH
    • Lists
    • Zustand
  • 🧬Algorithm
    • Types of algorithms
    • 이진수 변환 Binary Number
    • 후위 연산자 Postfix expression
    • 선택 정렬 Selection Sort
    • Find longest substring without repeating characters
    • 올바른 괄호 Valid Parentheses
  • 📔Mathematics
    • 다항식 Polynomial
  • 🗂️Database
    • 데이터베이스 Database
  • 📝Class
    • 자료구조 Data Structure
      • 배열 Array
    • C++ 프로그래밍
      • C++ 기초
    • 소프트웨어 공학 Software engineering
      • 소프트웨어 개요 Software overview
      • 소프트웨어 프로세스 Software process
    • 자바 Java
      • 자바와 객체지향 프로그래밍 Java and OOP(Object-oriented programming)
  • Java
    • 자바가 뭐지?
  • CA EI
    • CA EI
Powered by GitBook
On this page
  1. HTML/CSS

구조 HTML

Hyper Text Markup Language

"Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them." W3C

모든 사용자가 제외되지 않고 웹을 이용할 수 있도록 접근성을 준수해야한다. 스크린 리더를 통해 웹을 읽어나가는 과정에서 각각의 요소를 시맨틱한 태그를 이용해 마크업한다면 접근성을 높일 수 있을 것이다. 또한 브라우저의 호환성을 고려하 UX Writting도 신경쓰도록 한다.

<!-- 의미 있는 텍스트인 경우 -->

<p>검색 결과가 없습니다.</p>
<!-- dl에는 dt, dd가 아닌 요소는 포함될 수 없음 (div, script, template 제외) -->

<dl>
    <div>
        <dt>단어</dt>
        <dd>설명이 들어갑니다.</dd>
    </div>
</dl>
<!-- list -->

<ul>
    <li>
        <a href="#">순서가 없는 링크 1</a>
    </li>
    <li>
        <a href="#">순서가 없는 링크 2 </a>
    </li>
</ul>
<!-- 이미지를 볼 수 없는 경우 -->

<img src={image} alt="이미지를 볼 수 없을 때 나올 설명" title="툴팁에 나올 설명" />
<!-- 최대한 간결하게 -->

<button>확인</button>
<!-- section vs div -->

<section>주로 헤딩 태그를 포함하고 챕터, 검색 결과, represent a standalone, atomic unit</section>
<div>특별한 의미 없는 태그로 레이아웃과 스타일을 주기 위함 또는 정말 사용할 태그가 없을 때 사용해보자</div>

Last updated 2 years ago

📝