본문내용으로 건너띄기
UXKM
global menu
  • Publishing
    • HTML
    • CSS
    • SCSS
  • A11Y
    • A11Y
    • WAI-ARIA
    • A11y Creation Tech
  • Gulp
  • Updates
UXKM Search
UXKM Site map
  • Publishing
    • HTML
      • HTML 시작
        • HTML이란?
        • HTML 기본 구조
        • HTML 요소
      • 블록 요소 vs 인라인 요소
        • 블록 요소
        • 대표적인 블록 요소 - div
        • 인라인 요소
        • 대표적인 인라인 요소 - span
        • 요소 중첩
        • 단일 요소 또는 빈 요소
      • 섹션 콘텐츠(Section content)
        • header element HTML5에서 새롭게 추가
        • heading(h1~h6) element
        • section element HTML5에서 새롭게 추가
        • nav element HTML5에서 새롭게 추가
        • article element HTML5에서 새롭게 추가
        • footer element HTML5에서 새롭게 추가
        • aside element HTML5에서 새롭게 추가
        • hgroup element HTML5에서 새롭게 추가
      • 콘텐츠 그룹화(Grouping content)
        • main element HTML5에서 새롭게 추가
        • p element
        • ol element
        • ul element
        • li element
        • dl element
        • dt element
        • dd element
        • address element HTML5에서 새롭게 추가
        • figure element HTML5에서 새롭게 추가
        • figcaption element HTML5에서 새롭게 추가
        • pre element
        • blockquote element
      • 문자 콘텐츠(Text-level semantics)
        • a element
        • em element
        • i element
        • strong element
        • b element
        • br element
        • small element
        • s element
        • cite element
        • sub element
        • sup element
        • mark element
        • q element
        • code element
        • var element
        • abbr element
        • data element HTML5에서 새롭게 추가
        • time element HTML5에서 새롭게 추가
        • samp element
        • kbd element
        • bdi element HTML5에서 새롭게 추가
        • bdo element
        • wbr element HTML5에서 새롭게 추가
        • ruby element HTML5에서 새롭게 추가
      • 내장 콘텐츠(Embedded content)
        • iframe element
        • img element
        • map element
        • area element
        • video element HTML5에서 새롭게 추가
        • audio element HTML5에서 새롭게 추가
        • track element HTML5에서 새롭게 추가
        • picture element HTML5에서 새롭게 추가
        • source element HTML5에서 새롭게 추가
        • svg element
        • embed element
        • object element
        • param element
      • 수정 콘텐츠(Edits content)
        • del(Deleted Text) element
        • ins(insert) element
      • 표 데이터(Tabular data)
        • table element
        • caption element
        • colgroup element
        • col element
        • thead element
        • tbody element
        • tfoot element
        • tr element
        • th element
        • td element
      • 폼 콘텐츠(Forms content)
        • form element
        • label element
        • input element

          주요 역할 및 특징

          기본 입력 필드

          선택 및 조작 요소

          숫자 및 범위

          날짜 및 시간

        • button element
        • select element
        • optgroup element
        • option element
        • datalist element HTML5에서 새롭게 추가
        • textarea element
        • output element HTML5에서 새롭게 추가
        • progress element HTML5에서 새롭게 추가
        • meter element HTML5에서 새롭게 추가
        • fieldset element
        • legend element
      • HTML 문서구조
        • HTML4에서의 문서 구조
        • HTML5에서의 문서 구조
        • HTML4 vs HTML5
        • 프레임셋 문서 구조
      • 콘텐츠 모델(Content models)
        • 콘텐츠 모델
        • details, summary element HTML5에서 새롭게 추가
      • HTML 참조 사이트
    • CSS
      • CSS 시작
        • CSS란?
        • CSS의 문법
        • CSS 선언방식
        • CSS 상속과 캐스케이딩
      • CSS 초급
        • CSS 단위

          part1

          part2

        • CSS 선택자 level 1, 2

          part1

          part2

        • Color 속성
        • Font 속성
        • Text 속성
        • Background 속성
        • List 속성
        • Table 속성
        • 박스 모델 속성

          part1

          part2

        • 시각적인 속성
        • 위치 속성
        • 사용자 인터페이스 속성
      • CSS 중급
        • CSS 선택자 level 3

          part1

          part2

        • 가상 요소
        • CSS 카운터
        • 접두어
        • IR 기법
        • CSS3 Module

          part1

          part2

        • @규칙(At-Rule)
        • @font-face
        • @media

          part1

          part2

        • CSS 속성 선언 순서
        • CSS 선택자 level 4
      • CSS 고급
        • Transform

          2D

          3D

        • Transition
        • Animation
        • 플렉서블 레이아웃

          소개 및 요약

          부모 속성 part1

          부모 속성 part2

          자식 속성 및 데모

        • 그리드 레이아웃

          요약, 함수, 단위

          명시적, 암시적

          부모 속성 part1

          부모 속성 part2

          자식 속성

          가이드, 데모

        • 멀티 컬럼 레이아웃
      • CSS 참조 사이트
    • SCSS
      • SCSS 시작
        • SCSS란?
        • CSS와 SCSS의 차이
        • SCSS가 퍼블리셔에게 중요한 이유
      • SCSS 개발 환경 이해하기
        • SCSS 파일 구조와 확장자 이해
        • SCSS 컴파일 개념
        • VS Code / WebStorm에서 SCSS 사용하기
      • SCSS 기본 문법
        • 중첩(Nesting) 문법 이해하기
        • 부모 선택자 &의 역할과 사용법
        • 주석 처리 방식 (//, /* */)
        • SCSS 문법을 사용할 때 주의할 점
      • 변수(Variables)로 스타일 관리하기
        • 변수의 개념과 필요성
        • 색상, 폰트, 여백 변수 만들기
        • 변수 네이밍 규칙
        • 실무에서 자주 사용하는 변수 구성 예시
        • CSS 변수와 SCSS 변수의 차이
      • 연산과 함수 기초
        • SCSS에서 가능한 연산 (+, -, *, /)
        • 단위 연산 시 주의사항
        • SCSS의 기본 내장 함수
        • 연산과 함수를 활용한 스타일 관리 예제
      • 믹스인(Mixin) 이해하기
        • 믹스인의 개념과 역할
        • @mixin과 @include 기본 문법
        • 파라미터가 있는 믹스인
        • 반복되는 스타일을 믹스인으로 정리하기
        • 믹스인 실무 예제
      • 상속과 확장 (@extend)
        • @extend의 개념
        • 믹스인과의 차이점
        • @extend 사용 시 주의사항
        • @extend 사용이 필요한 상황
      • 조건문과 반복문 기초
        • @if, @else 조건문 이해하기
        • @for 반복문의 기본 구조
        • @each 반복문 사용법
        • 반복문을 활용한 클래스 자동 생성
        • 초급자가 이해하기 쉬운 예제 중심 설명
      • 파일 분리와 SCSS 구조 설계
        • SCSS 파일을 분리하는 이유
        • _partial.scss 개념
        • @use, @forward 기본 이해
        • 기본적인 SCSS 폴더 구조 예시
        • 소규모 프로젝트에서의 SCSS 구조 설계
      • 실무 예제로 SCSS 마무리
        • 디자인 토큰과 기본 스타일
        • 레이아웃 시스템과 반응형 구조
        • 핵심 UI 컴포넌트
        • 폼과 인터랙티브 컴포넌트
        • 테마 시스템 (Light / Dark)
        • 디자인 시스템 SCSS 구조
        • Vue / React 컴포넌트 스타일 구조
        • 퍼블리싱 가이드 구성 및 마무리
  • A11Y
    • A11Y
      • 접근성이란?
      • 장애인차별금지법 관련 지침
      • 접근성 인증 마크
      • 접근성 가이드라인
        • 웹 콘텐츠 접근성
        • 한국형 웹 콘텐츠 접근성
        • 모바일 앱 접근성
        • 무인정보단말기 접근성

          설계 원칙

          주변 환경

          요구사항

          개인정보/지원 서비스

      • 접근성 항목별 준수 가이드
        • 웹 콘텐츠 접근성

          인식의 용이성

          운용의 용이성

          이해의 용이성

          견고성

        • 모바일 앱 접근성

          인식의 용이성

          운용의 용이성

          이해의 용이성

          견고성

        • 무인정보 단말기 접근성
      • 접근성 체크리스트
        • 웹 콘텐츠 접근성

          인식의 용이성

          운용의 용이성

          이해의 용이성

          견고성

        • 모바일 앱 접근성

          인식의 용이성

          운용의 용이성

          이해의 용이성

          견고성

        • 무인정보 단말기 접근성

          원칙별 체크리스트

          필수 체크리스트

      • 접근성 관련 도구 및 플러그인
      • 접근성 참조
    • WAI-ARIA
      • WAI-ARIA란?
      • WAI-ARIA 역할(Role)
        • 추상적 역할
        • 위젯 역할

          독립형 위젯 역할

          복합형 위젯 역할

        • 문서 구조 역할

          part1

          part2

          part3

        • 랜드마크 역할
        • 라이브 영역 역할
        • 윈도우 역할
      • WAI-ARIA 상태 및 속성
        • 위젯 속성

          part1

          part2

        • 라이브 영역 속성
        • 드래그 앤 드롭 속성
        • 관계 속성
    • A11y Creation Tech
      • 웹 접근성 제작 기법

        인식의 용이성(Perceivable)
        • 대체 텍스트 제공
        • 자막 제공
        • 표의 구성
        • 콘텐츠의 선형구조
        • 명확한 지시사항 제공
        • 색에 무관한 콘텐츠 인식
        • 자동 재생 금지
        • 텍스트 콘텐츠의 명도 대비
        • 콘텐츠 간의 구분
      • 웹 접근성 제작 기법

        운용의 용이성(Operable)
        • 키보드 사용 보장
        • 초점 이동과 표시
        • 조작 가능
        • 문자 단축키
        • 응답시간 조절
        • 정지 기능 제공
        • 깜빡임과 번쩍임 사용 제한
        • 반복 영역 건너뛰기
        • 제목 제공
        • 적절한 링크 텍스트
        • 고정된 참조 위치 정보
        • 단일 포인터 입력 지원
        • 포인터 입력 취소
        • 레이블과 네임
        • 동작기반 작동
      • 웹 접근성 제작 기법

        이해의 용이성(Understandable)
        • 기본 언어 표시
        • 사용자 요구에 따른 실행
        • 찾기 쉬운 도움 정보
        • 오류 정정
        • 레이블 제공
        • 접근 가능한 인증
        • 반복 입력 정보
      • 웹 접근성 제작 기법

        견고성(Robust)
        • 마크업 오류 방지
        • 웹 애플리케이션 접근성 준수
      • 모바일 접근성 제작 기법

        인식의 용이성(Perceivable)
        • 텍스트 아닌 콘텐츠
        • 자막 또는 수어
        • 화면해설
        • 표의 구성
        • 콘텐츠의 선형구조
        • 다양한 감각 지원
        • 방향 설정
        • 입력 목적 식별
        • 색에 무관한 콘텐츠
        • 소리 자동 재생
        • 콘텐츠의 명도대비
        • 콘텐츠 간의 구분
        • 텍스트 크기 조정
        • 이미지 텍스트
        • 리플로우
        • 텍스트 간격
      • 모바일 접근성 제작 기법

        운용의 용이성(Operable)
        • 초점 이동과 표시
        • 조작 가능한 크기
        • 단일 문자 단축키
        • 응답시간 조절
        • 움직임 제어
        • 깜빡임과 번쩍임
        • 제목
        • 링크 텍스트
        • 다양한 탐색 방법
        • 단일 포인터 입력
        • 포인터 입력 취소
        • 네임 안의 레이블
        • 동작기반 작동
      • 모바일 접근성 제작 기법

        이해의 용이성(Understandable)
        • 기본 언어 표시
        • 부분 언어 표시
        • 사용자 요구에 따른 실행
        • 사용자 인터페이스 컴포넌트의 일관성
        • 도움 정보
        • 오류 정정
        • 레이블
        • 오류 방지
        • 반복 입력 정보
        • 접근 가능한 인증
      • 모바일 접근성 제작 기법

        견고성(Robust)
        • 사용자 인터페이스 컴포넌트
        • 상태 메시지
      • 무인정보 단말기 접근성 제작 기법
  • Gulp
    • Gulp
      • Gulp 시작
        • 걸프(Gulp)란?
        • UXKM의 Gulp
      • Gulp 기본 설정
        • 폴더 생성 및 터미널 활용
        • Node.js와 NPM
        • package.json 생성
        • Gulp 기초 세팅
        • Gulp + Babel
      • Gulp 기본 API
        • Gulp 기본 API
      • HTML 편집 (Gulp NJK)
        • Gulp NJK 세팅
        • Gulp NJK 문법
      • Web Server & Watching Files
        • Web Server
        • Watching Files
      • Assets 세팅
        • SCSS 컴파일
        • JS - Babel Support
        • image 최적화
      • 배포(Deploying)
        • 원격 저장소 생성과 Push
        • Github에 배포
  • Updates
    • Updates info
공지사항 이용후기
스크롤 진행상태
소식 · 후기
  • 공지사항
  • 이용후기

공지사항 - by. UXKM

사이트 이용·커리큘럼·약관과 관련된 소식을 확인합니다.

전체 13건

  • 서비스 안내 더 나은 학습 환경을 위한 UXKM 시스템 리뉴얼 안내 UXKM을 Gulp 4 기반으로 재구축했습니다. 검색엔진이 학습 콘텐츠를 더 잘 찾을 수 있도록 개선하고, 사이트 운영과 유지보수의 안정성을 높였습니다. 2022.07.14
  • 서비스 안내 앞으로의 학습 과정을 소개합니다 — Updates 페이지 오픈 앞으로 추가될 접근성, SCSS, JavaScript·jQuery, Gulp 커리큘럼을 미리 살펴볼 수 있는 Updates 페이지를 공개합니다. 2022.02.04
  • 서비스 안내 HTML·CSS 학습 공간, UXKM 오픈 안내 UXKM을 정식 오픈합니다. 회원가입 없이 HTML·CSS 커리큘럼을 자유롭게 학습해 보세요. 2021.11.22
총 13 2 / 2
1 2
  • Publishing
  • A11Y
  • Gulp
  • Updates
  • HTML
  • CSS
  • SCSS
uxkm
Creator :
추교성(Chu Kyo-sung),
김대민(Kim Dae-min)
Email : uxkm.io@gmail.com
  • UXKM 이용약관
  • 개인정보처리방침
  • 공지사항
  • 이용후기

© 2019 All Right Reserved. By UXKM.

내 활동 Admin