한 눈에 끝내는 HTML5/CSS3
    • 01
      시작하기에 앞서
    • 강의의 방향
      프로그래밍이란?
      HTML이란?
      CSS란?
      HTML 맛보기
      CSS 맛보기
    • 02
      개발 환경 설정
    • 구름IDE
      Visual Studio Code
      Atom
      Brackets
      Sublime Text
    • 03
      HTML 기초
    • 강의 목표
      HTML의 기본 구성
      기본적인 HTML 문서 구조
      Head와 Body
      기본적인 레이아웃
      정리
    • 04
      제목, 내용 관련 태그
    • 강의 목표
      제목과 본문 태그
      나누기 위한 태그
      글자와 관련된 태그
      정리
    • 05
      링크 태그
    • 강의 목표
      링크 태그란
      링크 태그의 속성
      웹사이트의 경로와 주소
      정리
    • 06
      멀티미디어 관련 태그
    • 강의 목표
      이미지 태그
      오디오와 비디오 태그
      유튜브 영상 삽입
      정리
    • 07
      입력 양식 태그
    • 강의 목표
      입력 양식(form)
      form 태그
      input 태그
      select 태그
      textarea 태그
      button 태그
      정리
    • 08
      테이블과 리스트
    • 강의 목표
      표(Table)
      목록(List)
      목록 태그의 속성
      정리
    • 09
      CSS 기초
    • 강의 목표
      CSS의 의미와 구성 요소
      선택자(Selector)에 대하여
      CSS의 기본 단위
      CSS의 색상
      정리
    • 10
      선택자(Selector)
    • 강의 목표
      단순 선택자
      복합 선택자
      가상 클래스 선택자
      정리
    • 11
      Box 모델
    • 강의 목표
      박스(Box)모델
      content
      border
      padding과 margin
      정리
    • 12
      글자(Text) 관련 스타일
    • 강의 목표
      폰트 종류와 웹 폰트
      폰트의 크기와 형태
      텍스트 정렬
      정리
    • 13
      위치 정렬
    • 강의 목표
      block과 inline
      inline-block
      position
      float
      정리
    • 14
      위치 정렬 - flexbox
    • 강의 목표
      flexbox에 관하여
      flex container: 방향과 흐름
      flex container: 정렬1
      flex container: 정렬2
      flex container: 정렬3
      flex item
      정리
    • 15
      위치 정렬 - grid 1
    • 강의 목표
      grid layout 기본
      grid container: template
      grid container: gap
      grid container: auto
      grid container: grid
      grid container: align & justify
      정리
    • 16
      위치 정렬 - grid 2
    • 강의 목표
      grid item: row, column
      grid item: area
      grid item: self
      정리
    • 17
      상속과 우선순위
    • 강의 목표
      상속
      우선순위
      정리
    • 18
      종합 예제 - 회원가입 페이지 만들기
    • 강의 목표
      레이아웃 구성
      회원가입 폼 만들기1
      회원가입 폼 만들기2
      회원가입 폼 만들기3
      하단 메뉴 만들기
      강의를 마치며
    HTML 맛보기
    배우기
    01 시작하기에 앞서
    HTML 맛보기

    <h1> 태그로 제목을 마크업합니다. 자, 실습 화면에서 제목 태그 안의 내용을 마음껏 수정한 뒤 실행 버튼을 클릭합니다.

    default

    그 다음, 웹 페이지의 오른쪽에서 'WEB'을 클릭하여 어떻게 표시되는지 확인해봅시다.

    default

    이와 비슷하게 <p> 태그도 한 번 고쳐본 뒤, 두 태그가 어떻게 다른지 한 번 확인해봅시다.

    실습 내용

    HTML에 대해 간단한 예제로 이해해 봅시다.

    질문하기