한 눈에 끝내는 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
      하단 메뉴 만들기
      강의를 마치며
    프로그래밍이란?
    01 시작하기에 앞서
    프로그래밍이란?
    default

    이미 다른 언어를 배운 적이 있으시거나 컴퓨터 과학/공학에 대해 배운 적 있는 분은 넘어가셔도 좋습니다.

    프로그램이라는 단어를 정말 많이 들어보셨을 겁니다. 프로그램이란 특정 목적을 위해 컴퓨터에 내리는 명령의 집합입니다. 에어컨의 온도 조절 프로그램, 채팅 프로그램의 단체 채팅 기능 등 그 종류는 프로그램의 목적에 따라 매우 다양하여 현재 우리 일상에서 프로그램이 없는 곳은 찾아보기 힘들 정도입니다. 이러한 프로그램을 만드는 행위를 프로그래밍, 또는 간단히 개발이라고 이야기합니다. 그렇다면 프로그래머는 프로그래밍하는, 즉 프로그램을 만드는 사람을 지칭하겠죠? 본래 컴퓨터공학은 프로그래머라 불리우는 전문가 집단의 전유물이었지만 점점 다양한 스마트 디바이스의 발전과 더불어 그 디바이스와 함께 사용할 수 있는 여러가지 프로그램이 등장했고, 모든 것이 프로그램화되는 시대가 오면서 프로그래밍에 대한 관심이 일반인에게까지 전파되었습니다. 최근 들어 전공자가 아니더라도 프로그래밍 학습의 중요성이 대두되며 초등, 중등에서 코딩 교육이 의무화되었고 일반인도 쉽게 다양한 코딩 교육 활동을 접할 수 있게 되었습니다.

    그러면 왜 프로그래밍 교육보다 코딩 교육이라는 말을 사용할까요? 코딩은 컴퓨터 언어로 작성하는 논리적인 글인 '코드'를 작성하는 과정을 의미합니다. 프로그램을 사용하는 것은 사람이지만 프로그램에 대해 이해하고 실행하는 주체는 기계(주로 컴퓨터)이기 때문에 기계가 이해하기 쉬운 컴퓨터 언어로 작성해야 합니다. 그러기 위해서는 컴퓨터 언어에 대한 이해와 기계의 사고 방식(처리 방식)에 대한 이해가 필수이기에, 수 많은 기계를 다루며 살아가야 할 사람들이 코딩을 배워야 한다고 이야기합니다. (미국에서 생활할 때 영어를 할 줄 알면 훨씬 편한 것처럼!) 즉, 덧붙여 정리하면 코딩교육은 '컴퓨터의 논리를 이해하고 대화하는 방법을 배우는 교육'이라면 프로그래밍교육은 '컴퓨터의 논리를 이해하며 대화함을 넘어 좀 더 효율적인 논리체계, 대화방법을 찾고 발전시키기 위한 교육'으로 나눌 수 있습니다. 외국어 교육에 비유하자면 단순한 알파벳, 영문법 및 영어회화 교육과 영어 스피치 교육의 차이 정도로 생각하시면 됩니다.

    컴퓨터 언어는 그 종류가 매우 다양합니다. 그 중에서도 HTML/CSS는 프로그래밍 언어가 아닌 마크업 언어로 따로 분류됩니다. 위에서 프로그램이랑 컴퓨터에 내리는 명령의 집합이라고 말씀드렸는데요, HTML과 CSS는 데이터의 구조를 표현하는데 사용되는 언어입니다. 자세한 내용은 추후에 설명드리겠습니다.

    질문하기