한 눈에 끝내는 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이란?
    default

    본격적으로 HTML과 CSS에 대해 학습하기에 앞서, HTML과 CSS가 어떠한 의미를 가지며 어떠한 목적으로 사용해야 하는지 알 필요가 있습니다. HTML은 Hyper Text Markup Language의 약자입니다. 각 단어의 뜻을 순서대로 살펴보며 HTML의 의미와 목적에 대해 알아보겠습니다.


    하이퍼 텍스트


    하이퍼 텍스트(Hypertext)는 하이퍼 링크를 이용해 독자가 원하는 순서에 따라 기존 문서에서 다른 문서로 접근할 수 있는 텍스트입니다. 즉, 하이퍼 텍스트는 책처럼 한 장 한 장 차례대로 내용을 읽는 전통적인 텍스트 접근 방식이 아닌, 링크라는 통로를 통해 원하는 페이지로 바로 도착하는 접근 방식을 가지고 있습니다. 우리의 일상에서 쉽게 볼 수 있는 웹사이트를 예시로 좀 더 쉽게 설명해보겠습니다.

    인터넷에서 검색을 시도해보신 분이라면 '위키 백과'를 통해 정보를 얻은 경험이 있을 겁니다. 다음 사진은 HTML에 관한 위키 백과입니다. 일반 도서와 다른 점이 보이시나요?

    default
    '위키 백과'의 목차는 하이퍼 링크로 이루어져 있기 때문에 목차를 클릭하면 해당 내용으로 바로 이동합니다. 이렇게 하이퍼 텍스트는 서로 다른 텍스트들이 다중으로 연결되어 있어, 정보에 꼭 순차적으로 접근할 필요 없이 바로 사용자가 원하는 정보에 접근할 수 있습니다.

    마크업 언어


    마크업(Mark Up)이란 어떠한 표시를 뜻하며, 마크업 언어(Markup Language)태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭합니다. 표시를 하여 문서를 구조화한다는 말이 와닿지 않을 수 있지만, 이는 우리 주변에서 꽤 흔히 쓰이는 방법입니다. 한 가지 예시를 들어볼까요? 구름으로 택배를 보내려고 합니다. 택배를 보내기 위해 필요한 정보를 아래 두 방식으로 정보를 기록하였는데, 과연 어떤 정보가 더 보기 편할까요?
    html
    html
    대부분의 사람들이 아래 방식처럼 각 정보가 어떠한 의미를 가지는지 표시한 것을 더 선호할 겁니다. 좀 더 직관적이고 정보를 파악하기 편하기 때문이죠. 여기서 주소, 수령인, 연락처 같은 표시가 바로 마크업에 해당합니다. 이렇게 마크업 언어는 문서나 데이터의 구조를 표현합니다.
    이제까지의 설명을 종합해보면 HTML은 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어입니다. 아래의 코드를 살펴보면 좀 더 잘 이해되실 겁니다.
    html

    홑화살괄호인 '<>' 안에 각 텍스트가 무엇을 의미하는지 '마크업'되어 있습니다. 물론 HTML에서 한글 태그가 그대로 쓰이지는 않지만 HTML 작성방법과 그 의미를 파악하는데 충분하실 겁니다.

    질문하기