본문내용으로 건너띄기
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
공지사항 이용후기
스크롤 진행상태

이용약관

시행일 2026.11.03

과거 시행일 문서를 선택할 수 있습니다.

제1조 (목적)

본 약관은 UXKM(이하 '서비스')이 제공하는 웹 기술 학습 콘텐츠 및 관련 서비스의 이용 조건과 이용자 및 운영자의 권리·의무, 책임사항을 규정하는 것을 목적으로 합니다.

제2조 (서비스의 내용)

  1. UXKM은 웹 기술 학습을 위한 정보를 제공하는 비영리 목적의 개인 운영 사이트입니다.
  2. 서비스는 다음 기능을 제공합니다.
    1. HTML, CSS, SCSS, JavaScript, 웹 접근성, Gulp 등 웹 기술 교육 콘텐츠
    2. 코드 예제, 학습 문서 및 참고 자료
    3. 회원의 댓글·답글 및 이용후기 작성과 관련 상호작용
    4. 사이트 검색
    5. 기타 운영자가 제공하는 관련 기능
  3. 학습 콘텐츠는 회원가입 없이 열람할 수 있으며, 댓글·이용후기 작성 등 일부 기능은 로그인이 필요할 수 있습니다.
  4. 현재 서비스는 학습 콘텐츠를 무료로 제공합니다.

제3조 (약관의 효력 및 변경)

  1. 본 약관은 서비스에 게시하여 이용자가 확인할 수 있도록 제공하며, 명시된 시행일부터 적용됩니다.
  2. UXKM은 관계 법령에 위배되지 않는 범위에서 약관을 개정할 수 있습니다.
  3. 일반적인 약관 변경은 시행일 7일 전까지 주요 변경 내용과 시행일을 홈페이지에 안내하는 것을 원칙으로 합니다.
  4. 회원에게 불리하거나 권리·의무에 중대한 영향을 미치는 변경은 시행일 30일 전까지 안내하며, 법령에 따라 별도 동의가 필요한 경우 해당 절차를 진행합니다.
  5. 개정된 약관은 시행일별로 관리하며, 이전 약관도 열람할 수 있도록 제공합니다.
  6. 이용자의 동의가 법적으로 필요한 사항에 대해서는 단순히 이의를 제기하지 않았다는 이유만으로 동의한 것으로 간주하지 않습니다.

제4조 (회원가입 및 계정 관리)

  1. 회원가입과 로그인은 Google 계정 인증을 통해 제공됩니다.
  2. 회원은 타인의 계정을 무단으로 이용하거나 자신의 계정을 부정하게 사용해서는 안 됩니다.
  3. 회원은 계정이 무단으로 이용된 사실을 알게 된 경우 운영자에게 알릴 수 있습니다.
  4. 회원정보의 수집, 이용 및 삭제에 관한 사항은 개인정보처리방침에 따릅니다.

제5조 (이용자의 의무)

이용자는 다음 행위를 해서는 안 됩니다.

  1. 타인의 개인정보, 명예, 저작권 등 권리를 침해하는 행위
  2. 욕설, 음란물, 불법 정보 등 관련 법령 또는 서비스 운영정책에 위반되는 내용의 등록
  3. 반복적 스팸, 무단 광고 또는 서비스 운영을 방해하는 행위
  4. 시스템의 취약점을 악용하거나 비정상적인 방법으로 서비스에 접근하는 행위
  5. 다른 사람을 사칭하거나 허위 신고 등 기능을 악용하는 행위
  6. 그 밖에 관계 법령에 위배되는 행위

제6조 (댓글 및 게시물 운영)

  1. 회원은 제공된 기능을 통해 댓글과 답글을 작성하고, 좋아요·공감 및 신고 기능을 이용할 수 있습니다.
  2. 운영자는 관련 법령 및 서비스 운영정책에 따라 부적절한 게시물을 숨김 처리하거나 삭제하고, 필요한 경우 이용을 제한할 수 있습니다.
  3. 스팸 방지, 게시물 길이 제한, 금칙어 필터 및 신고 처리 등 세부 운영 기준은 서비스에서 안내하는 정책과 실제 제공 기능에 따릅니다.
  4. 운영자는 신고 내용과 게시물의 맥락을 고려하여 필요한 조치를 할 수 있습니다.
  5. 게시물의 운영상 숨김·삭제 처리와 개인정보 보호를 위한 본문 삭제는 별도의 절차로 운영할 수 있습니다.
  6. 이용자는 자신이 작성한 게시물에 대해 관계 법령에 따른 책임을 부담하며, 타인의 권리를 침해하지 않도록 주의해야 합니다.
  7. 회원은 서비스 이용 경험에 대한 이용후기와 별점(1~5점)을 작성할 수 있으며, 회원당 하나의 활성 이용후기만 등록할 수 있습니다.
  8. 이용후기는 최초 작성 시각부터 7일 이내에만 수정할 수 있습니다. 수정 시 수정 가능 기간은 연장되지 않으며, 삭제 후에는 새로운 이용후기를 작성할 수 있습니다.
  9. 이용후기에는 답글·좋아요·공감·신고 기능을 제공하지 않습니다. 운영자는 제2항에 따라 부적절한 이용후기를 숨김 처리하거나 삭제할 수 있으며, 서비스 운영 기준에 따라 이용후기를 추천할 수 있습니다.

제7조 (회원 탈퇴 및 게시물 처리)

  1. 회원은 서비스에서 제공하는 절차에 따라 회원 탈퇴를 요청할 수 있습니다.
  2. 탈퇴 시 회원의 인증 계정 및 프로필 정보는 개인정보처리방침에 따라 삭제합니다.
  3. 기존 댓글과 답글은 대화의 연속성을 위해 유지될 수 있으며, 탈퇴 회원의 작성자 정보는 '탈퇴한 사용자'로 표시하고 프로필 이미지는 표시하지 않습니다.
  4. 회원 탈퇴 후에도 작성한 이용후기의 본문과 별점은 서비스에 유지될 수 있으며, 작성자명은 '탈퇴한 사용자'로 표시하고 프로필 이미지는 표시하지 않습니다.
  5. 탈퇴 후에도 댓글·답글 본문에 남은 개인정보는 별도로 삭제를 요청할 수 있습니다. 이용후기에 포함된 개인정보에 대해 삭제가 필요한 경우의 처리 기준은 개인정보처리방침에 따릅니다.
  6. 회원 탈퇴 및 개인정보 삭제의 구체적인 처리 기준은 개인정보처리방침에 따릅니다.

제8조 (콘텐츠의 저작권 및 이용)

  1. UXKM에서 제공하는 교육 문서, 이미지, 디자인 및 기타 콘텐츠의 저작권은 해당 저작권자에게 귀속됩니다.
  2. UXKM에서 제공하는 HTML, CSS, SCSS, JavaScript, Accessibility, Gulp 등의 예제 코드는 개인 학습, 교육, 연구, 업무 및 상업적 목적을 포함하여 자유롭게 사용, 수정, 응용, 복제 및 재배포할 수 있습니다.
  3. 이용자는 예제 코드를 회사 업무, 외주 개발, 웹사이트, 애플리케이션, 상업적 서비스 및 기타 프로젝트에 제한 없이 활용할 수 있으며, 해당 결과물을 자유롭게 제작하고 배포할 수 있습니다.
  4. 다만 UXKM 웹페이지 전체 또는 사이트 전체를 그대로 복제하거나 실질적으로 동일한 형태로 재구성하여 별도의 웹사이트 또는 서비스로 재배포하는 행위는 운영자의 사전 허락 없이 할 수 없습니다.
  5. 제②항 및 제③항의 예제 코드 이용 허용에는 별도의 출처 표시 의무를 부과하지 않습니다.
  6. 외부 저작물 또는 별도 라이선스가 명시된 자료는 해당 저작권자의 권리와 라이선스 조건을 우선 적용합니다.
  7. 저작권법 등 관계 법령에서 허용하는 정당한 이용은 제한하지 않습니다.

제9조 (서비스의 변경 및 중단)

  1. 운영자는 서비스 개선, 점검, 보안, 기술적 장애 등 필요한 사유가 있는 경우 서비스의 전부 또는 일부를 변경하거나 일시적으로 중단할 수 있습니다.
  2. 이용자에게 중요한 영향을 미치는 변경이나 중단이 예상되는 경우 가능한 범위에서 사전에 안내합니다.
  3. 서비스 변경 및 중단과 관련한 책임은 관련 법령에 따릅니다.

제10조 (책임 및 면책)

  1. UXKM의 콘텐츠는 학습 및 정보 제공을 목적으로 합니다.
  2. 운영자는 정보의 정확성과 최신성을 유지하기 위해 노력하나, 콘텐츠 활용에 따른 특정한 결과나 이용자의 사용 환경과의 완전한 호환성을 보장하지는 않습니다.
  3. 이용자는 예제 코드 및 학습 내용을 자신의 환경에서 검토하고 적용할 책임이 있습니다.
  4. 본 약관은 운영자의 고의 또는 과실에 따른 법적 책임이나 관련 법령상 면제할 수 없는 책임을 배제하지 않습니다.
  5. 이용자 상호 간 또는 이용자와 제3자 사이에서 발생한 분쟁은 원칙적으로 해당 당사자가 해결해야 합니다. 다만 운영자는 관계 법령 및 서비스 운영정책에 따라 필요한 조치를 취할 수 있으며, 운영자에게 법적 책임이 인정되는 경우에는 관련 법령에 따릅니다.

제11조 (개인정보 보호 및 문의)

  1. 서비스는 개인정보를 관련 법령 및 별도의 개인정보처리방침에 따라 처리합니다.
  2. 개인정보 보호 및 서비스 관련 문의는 다음 이메일로 접수할 수 있습니다.
    uxkm.io@gmail.com

제12조 (준거법 및 분쟁 해결)

  1. 본 약관은 대한민국 법령을 기준으로 해석합니다.
  2. 서비스 이용과 관련하여 분쟁이 발생하는 경우 당사자는 원만한 해결을 위해 노력합니다.
  3. 협의로 해결되지 않는 분쟁은 관련 법령에서 정한 절차와 관할에 따릅니다.

부칙

본 약관은 2026년 11월 3일부터 적용합니다.

  • 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