웹표준타입셋팅 배우기

먼저 웹표준타입셋팅은 우리가 흔히 알고 있는 웹표준HTML/CSS라는 점을 말씀드립니다. 그럼에도여기서 만큼은 웹표준타입셋팅라는 용어를 쓰고 싶은 저의 생각을 이해해주시면 감사하겠습니다.

어떤 분야이든 배우는 사람들이 할 수 있는 공통적인 질문중에 하나가 어떻게 공부하면 되냐는 질문일것입니다. 저만의 생각인지는 모르겠지만 이렇게 물어 보실 때마다 교과서 처럼 자신있게 추천해 드릴만한 책이나 가이드가 없었습니다.

HTML/CSS자체는 누구나 쉽게 사용할 수 있도록 하자는 보편성을 철학으로 만들어 졌음에도 누구나 배울수 있도록 차근차근 가이드 해주는 뭔가가 필요한 실정이라는 생각이 많이 들었습니다. 지금까지 혼자서 공부하시는 분들의 대부분은 블로그의 글이나 이책 저책을 뒤저가며 공부할 수 있는 실정이었습니다. 물론 이렇게 하는것도 배워지는 과정이며 값지고 중요한 노력의 댓가라고 할 수 있지만, 조금더 불필요한 시행착오를 줄이고 깊은 이해를 통해 개념을 잡아갈 수 있다면, 먼 걸음을 꾸준히 배워가는데 필요한 좋은 일이 될 것이라고 생각하였습니다. 그래서 관심있는 초보자가 처음부터 차근차근 공부할 수 있도록 직접 커리를 만들고 자료를 준비해 보기로 했습니다. 아래에 있는 커리와 만들어질 자료는 한번에 만든 결과물 이라기 보다는 2년정도 관련 강의를 진행하면서 배우는 분들과 함께 실험 되어지는 피드백들을 중심으로 다듬어진 결과라고 할 수 있겠습니다.

웹표준을 강의하고 있는 저에게 있어서 교실은 실험실과 같다는 생각이듭니다. 어떻게 하면 좀 더 원리를 쉽게 있해 시킬수 있을까? 어떤 부분을 덜어내야 실패감을 줄일 수 있을까? 이렇게 교실 속에서 필요한 자료를 만들고 피드백을 받아 진행하고 있기때문에 계속해서 다듬어 질것입니다. 그래서 슬라이드별로 버전을 표시해서 피드백을 반영할 예정입니다.

Basic편의 촛점은 HTML/CSS를 배워나가는 데 있어서 튼튼한 뿌리가 될 수 있도록 하는 것이며, 여기서 못다한 내용과 오히려 알아서 더 복잡하게 만드는 내용이나 속성들은 Advanced편을 통해서 소개할 계획입니다.

내용은 ie7~모던브라우져까지를 기준으로 하였고, HTML5/CSS3에 대한 내용은 넣지 않았습니다. 단, class네임을 html5에서 새로 만들어진 태그 이름(예:<div>class=”section”</div>)을 사용하여 새로운 태그의 의미가 익숙해 지도록 만들예정입니다. HTML5/CSS3 내용을 넣지 않은 큰 이유중에 하나는 처음 HTML/CSS를 배우는 입장에서 집중해야 할 부분이 아니라고 생각하였기 때문입니다. 먼저 이해와 원리를 충분히 이해하고 나서 추가되는 개념과 속성들은 기본기 위에 추가해 나가면 되기 때문입니다.

또한 쉽게 점진적으로 알아 나아가길 바랬기 때문에 목차의 순서를 조정하는데 고민도 많았고 시간도 많이 걸렸습니다. 순서대로 보시는것이 가장 좋지만, 부득이 하게도 끝까지 완성되기 전까지는 올리는 순서대로 보셔야 할것 같습니다. 가장 어렵고 중요한 부분부터 만들어 나아가야 설명하는 방식이 정해질 수 있기 때문에 오픈하는 시점은 의도한 공부 순서에 맞출 수 가 없게 되었으니 양해를 구합니다.

한 챕터의 슬라이드가 완성되면 해당하는 세부적인 목차를 소개하고 파일과 함께 링크를 걸어두고 챕터 제목으로 하나의 포스팅을 만들겠습니다. 제목별 포스팅에 덧글로 어려운설명이거나 틀린 부분들을 피드백 주시면 업데이트해 나가겠습니다.  완료되는 시점에 세부 목차가 소개되는 이유는 쉽게 이해 되어지도록 계속해서 오락가락하면서 다듬어지기 때문에 완료될 때 쯤에야 소개될 수 있겠다 싶었습니다.

이런 저의 의도와 노력이 슬라이드에 잘 반영되었는지는 모르겠지만 자료를 만들면서  많은 바램들과 아이디어들중  저에게 있어 몇가지 원칙을 말씀드립니다.

첫째. 최대한 쉽게 설명할 것.
둘째. 점진적으로 향상되는 재미가 있을것.
셋째. 최대한 일반인이 생각할 수 있는 표현으로 기술적 원리를 설명할것.
네째. 폭넓은 이해를 경험하도록 할 것.
다섯. 실제 작업과 괴리감이 없을 것.

웹표준타입셋팅-basic (2013년 10월 완료 예정)

  1. 개념과 준비v1.0 (완료)
  2. 시멘틱 마크업v1.0 (완료)
  3. 기초 스타일링(일부 완료)
    • 스타일 시작하기 (완료)
    • 이름짓고 선택하기 (완료)
    • 우선순위 (완료)
    • 폰트 스타일링 (작업중)
    • 텍스트 스타일링 (작업중_
  4. 박스다루기 v1.1 (완료)
    • 박스로 생각하기
    • 박스타입
    • 넓이와높이
    • 여백과 간격
    • 선긋기
    • 배경색과 배경이미지
    • 박스의 용도 지정하기
  5. 배치하기v1.0 (완료)
    • 일반적인 흐름(normal flow)에서의 배치
    • 떠있는 상태(float)에서의 배치
    • 절대적인 위치(absolute)에서의 배치
  6. 표와 입력양식v1.0 (완료)
    • 입력양식

웹표준타입셋팅-advanced (2014년 상반기 완료 예정)

목차 미정

뭔가 한 분야를 배운다는것은 당장의 문제를 해결하기위해 단편적이고 끊어진 정보를 머리속에 넣는 과정이 아니며, 폭넓은 이해와 깊이를 가지고 꾸준히 발전시켜나가는 무언가라고 생각했습니다.
너무 급하지 않지만 스스로에게 충분하고 분명한 시간을 주고 즐겁게 배워나갈 수 있도록 하는 것이 중요하다고 생각합니다.

가장 큰 바램이 있다면 최신기술이나 팁 위주로 만들어지기 보다는, 기본적이고 중요한 원리가 누구에게나 이해 될 수 있도록 교육 과정 전체가 디자인 되는 것입니다. 내용들을 설명하고 공유해 나가면서, 중-고생이나 일반인등 누구나 배울수 있는  쉽고 알찬 자료로 다듬어지길 바랍니다. 설명이 어려운부분이 있다면, 해당 블로그 포스팅에 덧글을 통해 알려주시면 감사하겠습니다.

웹표준타입셋팅 배우기”에 대한 13개의 생각

  1. ㅎㅎ 후후훗. 선생님, 멋지십니다.
    두달동안 단과 과정으로 좀 아쉬웠지만 넓은 시야로 접근해야한다는 새로운 생각을 갖게 해준 강좌였슴다.
    그리고 전 웹표준 안끊었습니다. ㅋㅋㅋ 운좋게 작은 사이트를 웹표준으로 만들어 볼 기회가 있어서 많은 도움이 되고 있구요. (엄청난 부담과 압박으로 해나가고 있습니다만… ㅋ)
    귀한 정보들 정~말 감사합니다.
    이놈의 게으름병을 이기고….카페 스터디에서 뵙고싶네요. -_-;;;

    • 네 안녕하세요^^ 웹표준 안끊으셨다니 다행입니다!
      게다가 엄청난 시도를 업무중에 하시는 군요.ㅋㅋ
      여튼 기왕 시작한 공부니 앞으로도 좋은 시간들이 되시길 바랍니다.
      카페 스터디에도 합류하시구요~

  2. 선생님 수업 정말 재밌고 유익했는데 이렇게 또 만나게 뵈서 반갑습니다!
    언제나 선생님 열정과 노력에 응원을 드리며!
    틈틈히 시간내서 연습하도록 하겠습니다. 감사합니다^^

    • 네^^ 감사합니다! 더 좋은 강의를 했어야 하는데… 하고 항상 후회가 됩니다.
      뭐 이렇게라도 계속 자료를 통해서 도움이 되셨으면 좋겠어요^^

댓글 남기기

이메일은 공개되지 않습니다.