채널톡 아이콘

웹표준 제대로 배우기 (기초) - 2025

본 과정은 웹 표준 코딩을 배우고 활용할 수 있는 기초적인 지식을 제공합니다. 학습자는 웹 코딩의 기본 원칙을 이해하고, 이를 바탕으로 웹 프로그램을 배우는 데 필요한 기초를 쌓을 수 있습니다. 또한, 웹 표준 코딩을 통해 자격증 취득도 가능하도록 구성되었습니다.

6명 이 수강하고 있어요.

난이도 입문

수강기한 12개월

날개 달린 동전

강의 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

마케팅 파트너스

강의 추천하고 성장과 수익을 만들어 보세요!

수강 후 이런걸 얻을 수 있어요

  • 웹 표준 코딩에 대한 기초 지식을 익혀서 웹디자인과 웹 퍼블리셔로서의 취업 능력을 배양할 수 있습니다

  • 웹 표준 코딩에 대한 기능을 익혀서 자격증을 취득할 수 있습니다

웹표준 제대로 배우기 (기초) - 2025

본 과정은 웹 표준 코딩을 배우고 활용할 수 있는 기초적인 지식을 제공합니다. 학습자는 웹 코딩의 기본 원칙을 이해하고, 이를 바탕으로 웹 프로그램을 배우는 데 필요한 기초를 쌓을 수 있습니다. 또한, 웹 표준 코딩을 통해 자격증 취득도 가능하도록 구성되었습니다.

강의 내용

웹표준 제대로 배우기 (기초) - 2025 Part.1

  • HTML 시작: HTML 문서 작성법과 구조 학습

    • HTML 파일 생성과 기본 문서 작성 절차

    • HTML이 웹 브라우저에서 해석되는 방식 이해

  • HTML 문서 구조: HTML 기본 구성 요소 이해

    • <html>, <head>, <body> 등 기본 태그 역할 설명

    • 문서 제목, 메타데이터, 본문 영역 구분

  • 폼 입력 태그: 다양한 입력 태그 사용법

    • <input>, <textarea>, <select> 등 다양한 입력 태그 작성

    • 텍스트, 비밀번호, 체크박스, 라디오 버튼, 드롭다운 등의 활용

  • 그 밖의 출력 태그: 텍스트, 이미지, 링크 출력 방법

    • <p>, <h1>~<h6> 등 텍스트 출력 태그

    • <img>를 이용한 이미지 삽입

    • <a>를 사용한 링크 연결 방법

  • CSS 시작: CSS 기본 문법과 적용법

    • 선택자와 속성-값 구조 이해

    • HTML에 CSS를 적용하는 3가지 방식(인라인, 내부, 외부 스타일시트)

  • CSS 기본 스타일: 텍스트, 색상, 배경 스타일 설정

    • 글꼴 크기·굵기, 글자색, 줄 간격 조정

    • 배경색, 배경 이미지 지정

  • Reset CSS: 기본 스타일 초기화

    • 브라우저 기본 스타일의 차이 제거

    • Reset CSS 또는 Normalize.css 사용 방법

  • Display CSS: 요소 표시 방식 이해

    • block, inline, inline-block, none 속성의 차이

    • 요소 배치에 따른 레이아웃 변화

  • Position CSS: 위치 지정 방법

    • static, relative, absolute, fixed, sticky의 특성과 사용 예시

    • 요소의 좌표 지정(top, right, bottom, left)

  • Flex Layout: Flexbox 기본과 반응형 레이아웃 구현

    • Flex 컨테이너와 아이템의 기본 속성 이해

    • 가로·세로 정렬, 공간 분배, 반응형 레이아웃 구성

웹표준 제대로 배우기 (기초) - 2025 Part.2

  • 웹 표준 헤더: 웹 표준에 맞는 헤더 구성법

    • HTML5 시맨틱 태그(<header>, <nav> 등)를 활용한 구조 설계

    • 웹 표준 규칙을 준수한 마크업 작성

  • 웹 접근성 헤더: 접근성 개선을 위한 헤더 구성

    • 스크린 리더 지원을 위한 대체 텍스트, ARIA 속성 적용

    • 키보드 탐색 가능성과 명확한 시각적 포커스 제공

  • 디바이스별 컨테이너: 다양한 화면 크기에 맞는 컨테이너 설계

    • 고정형, 유동형, 반응형 컨테이너 설계 방식

    • 미디어 쿼리를 활용한 화면 크기별 레이아웃 조정

  • 웹 표준 GNB (유형 1, 2, 3): 다양한 내비게이션 바 디자인 실습

    • 가로형, 세로형, 드롭다운형 내비게이션 구현

    • CSS와 JavaScript를 활용한 스타일 및 동작 추가

  • 폰트 아이콘 작성: 폰트 아이콘을 활용한 웹 디자인

    • Font Awesome 등 폰트 아이콘 라이브러리 사용법

    • SVG와 폰트 아이콘 비교 및 적용 사례

  • 테이블 스타일링: 기본 및 활용적인 테이블 스타일링

    • 표의 가독성을 높이는 기본 스타일 지정

    • 행/열 구분, 마우스 오버 효과, 반응형 테이블 구현

  • 폼 스타일링: 폼 디자인 기본 및 활용 예제

    • 입력 필드, 버튼, 선택 박스 등의 디자인 개선

    • 상태별 스타일(포커스, 비활성화 등) 적용

  • 반응형 디자인: 다양한 디바이스에 맞춘 반응형 디자인 실습

    • 모바일 퍼스트(Mobile-First) 설계 원칙

    • 미디어 쿼리를 활용한 화면 크기별 UI 최적화

수강 전 참고 사항

이 강의는 지식공유자의 질문/답변을 제공하지 않습니다.

학습 자료

part 1 - 강의 활용 파일(step1 html, step2 css)

part 2 - 강의 활용 파일(step1 html, step2 css)

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 처음으로 웹 코딩을 배워보려는 회원 누구나

  • 그래픽 프로그램 만을 다루는 회원 누구나

  • 자격증을 취득하고자 하는 회원 누구나

안녕하세요
유용한IT학습입니다.

8,278,846

수강생

6,391

수강평

4.6

강의 평점

309

강의

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

유용한IT학습님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

월 ₩23,760

5개월 할부 시

₩118,800