Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

웹 개발

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

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

3명 이 수강하고 있어요.

이런 걸 배울 수 있어요

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

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

웹표준 제대로 배우기 (기초) - 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)

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

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

안녕하세요
입니다.

8,256,009

수강생

6,086

수강평

4.6

강의 평점

244

강의

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

커리큘럼

전체

29개 ∙ (11시간 14분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

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

얼리버드 할인 중 (1일 남음)

월 ₩16,632

5개월 할부 시

30%

₩118,800

₩83,160

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

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

비슷한 강의

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