'웹표준 코딩'에 해당되는 글 2건

  1. 2013.05.02 웹표준 코딩(HTML+CSS) 배우기위한 준비 by S (7)
  2. 2013.04.26 웹표준 코딩을 배우기 시작하다 by S (12)

 

 

 

지난주부터 새롭게 배우기 시작한 웹표준 html4.01과 css수업.

 

현재 내가 배우는 html4.01버전 다음에 xhtml1.0 이 나왔는데 그건 너무 어려워 사용자수가 줄면서

대중성이 떨어져 제작자가 html5로 다시 회귀했다고 한다.

html5와 css3는 브라우저의 많은 진보를 이루었지만 익스플로러 10부터 구현되기 때문에 아직 우리나라에서

보편적으로 쓰이긴 어려운 관계로 나중에 추가로 배우더라도 일단 기초부터 탄탄히 하자는 마음에 시작했다.

 

뭐 입문자들을 위한 기초부터 개념을 정확히 잡아주는 단기과정이라고나 할까...

 

현재는 디자이너가 직접 포토샵으로 작업한 후 코딩으로 옮기지만

나중엔 html과 css를 사용하면서 바로 웹페이지를 디자인하는 시대가 올거라한다.
사실 지금의 나로선 상상하기가 어렵지만 외국은 이미 그런 디자이너들이 있다고...

 

근데 그럼 외국처럼 사이트처럼 엄청 간결해질거 같은데...
우리나라 홈페이지들이 현재 쓸데없이 플래시도 많이 들어가고 복잡하지만 트렌드는 꾸준히 변화하니

앞으로 바뀔지도 모르겠다.
아니 스마트폰 시대가 열리면서 모바일웹을 보면 이미 바뀌고 있는건가...

 

 

 


어쨌든 첫 날 끊임없이 강조한 시멘틱(semantic)웹.
코딩할때 컴퓨터가 자동으로 정보를 처리할 수 있게, 이해하고 해석할 수 있는 형태로 정보를 입력하라는거

같은데 사실 아직까지 정확한 의미는 잘 모르겠다. 음;;

 

 


1.참고사이트

 

웹표준을 만들고 지정하는 w2c 국제협회
http://www.w3.org/

 

이곳에 웹사이트의 마크업 유효성을 검사할 수 있는 validation service가 있다.
http://validator.kldp.org/

 

 

여기에 네이버 주소를 써 넣었더니 22개의 에러와 32개의 경고가 나오면서 어떤게 웹표준에 맞지 않았다고

알려준다.

코딩을 하면서 여기서 꾸준히 마크업하여 css는 몰라도 최소한 html 에러가 0이 될때까지 해보려고 시도하는게 좋을 듯 하다.

 


html5와 css3, 자바스크립트를 활용한 효과를 체험할 수 있는데 익스플로러 낮은버전에서는 안 열리므로 파이어폭스에서 확인할 수 있다.

www.apple.com/html5

http://dribbble.com/
http://skinnyties.com/

 

 

 


2.추천하는 참고서적


초보용: 실용예제로 배우는 웹표준, HEAD FIRST HTML
중급용: CSS 완벽가이드

 

 


3.준비과정

 

파이어폭스 브라우저의 설치
http://software.naver.com/software/summary.nhn?softwareId=MFS_100038

 


파이어폭스 메뉴에서 도구>부가기능>fire bug검색>fire bug 설치

 

 

 

 


애벌래모양의 버튼을 누르고 검사를 클릭해 코드를 알고싶은 부분에 마우스를 가져가면 하단에 html코딩과

스타일이 어떻게 쓰였는지를 알 수 있다.

 

 

 


파이어폭스 부가기능에서 web developer도 설치한다.

 

 


 

에디트플러스 설치


<30일 평가판 다운로드>
http://download.cnet.com/EditPlus/3000-2352_4-10018241.html?part=dl-&subj=dl&tag=button

 

 

새 문서를 연다. (단축키:Ctrl+Shift+N)

 

 

 

 

 

 

하단 ANSI를 더블클릭해 -> UTF-8로 바꾼다

 


 

 

열때마다 지정하지 않아도 되도록

도구>기본설정을 아래와 같이 바꿔준다.

 

 

 

 

<meta charset="utf-8"/> 추가

모든 브라우저에서 한글 폰트가 깨지지 않도록...

 

 

 

 

독타입(Doctype)선언


독타입은 모든 웹문서의 시작이로 첫줄에 위치하며 문서의 타입을 지정해준다.
html버전을 브라우저한테 알려주는것.

 

html4.01 버전
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


html5 버전
<!DOCTYPE html>

 

 

 


 

 

그러니까 html4.01 코딩을 처음 시작할때 페이지를 열어 아래와 같이 하면 된다.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="utf-8"/>
    <title> 상단 탭에나오는 타이틀 지정 </title>

  </head>
  
  <body>
     이 사이에 내용 입력

  </body>
</html>

 

 

 

 

 
 
 
 

 

Posted by Y&S

댓글을 달아 주세요

  1. vbdream

    좋은 강좌 잘 보았습니다.
    그런데 <META charset="utf-8" /> 에서 charset 속성은 HTML 5에서 새로 추가된 속성으로 알고 있습니다.
    HTML 4.x 에서는 아래와 같이 하셔야 합니다.

    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />

    2013.07.24 14:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 아..그런가요?
      저 배울때 강사님이 저렇게 하라고 하셔서 ㅎㅎ
      제가 졸았나봐영~ㅋ

      정보 감사드려요^^

      2013.07.24 15:05 신고 [ ADDR : EDIT/ DEL ]
  2. 요요

    너무 감사히 잘봤습니다. 근데 마지막부분글의 예를 사진으로 보여주셨으면 더 이해가 쉬웠을 것 같아 아쉽네요 ㅜ..
    어떻게 적용하는지는 알겠는데 그렇게 적용하면 어떻게 나타나는지 모르겠어서 이해가 어렵네요 ㅠㅠ..
    초짜라

    2013.09.11 21:08 [ ADDR : EDIT/ DEL : REPLY ]
    • 음? 마지막예는 이미지로 보여드릴것도 없는데영...
      editplus를 html로 열었을때 이것저것 나오는거 대신에 그냥 저렇게 사용하면 된다는건데...^^;;

      처음에 독타입선언하고 모든 브라우져에서 한글 폰트가 깨지지 않도록 utf-8을 넣어주면 된다는 소리예요.
      저걸 적용하면 뭐가 따로 나오는게 아니라...

      2013.09.11 21:52 신고 [ ADDR : EDIT/ DEL ]
  3. 태그연습장 주소입니다. http://www.homzzang.com/page/web/tag

    위 소스 복사해 붙여넣은 후 확인하기 누르면 소스를 실행시킨 결과값이 보입니다.

    2014.02.16 03:03 [ ADDR : EDIT/ DEL : REPLY ]
  4. 저도 요새 html쪽에 관심이 많이 생기고 있네요.
    블로그 스킨수정하다가 보면 그냥 따라하다가 생기는 문제를 혼자 처리 못 하니까 답답하더라구요ㅠㅠ
    추천 서적 사서 한번 해봐야겠어요!

    2014.04.03 16:33 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 어느정도 개념만 알면 만들지는 못해도 수정정도는 하실 수 있을거예요^^
      저도 딱 그수준이네요 ㅋ

      2014.04.04 08:32 신고 [ ADDR : EDIT/ DEL ]

 

 

 

 

 

어제 처음으로 웹표준 코딩수업을 받았다.


직장인 환급과정으로 하루 3시간 8번의 수업인지라 회사에 양해를 구해 한시간정도 일찍 퇴근하고

오랜만에 서울 지옥철을 경험했더랬다.

 

현재 월수금은 퇴근 후 수영을 배우고있고 화목은 웹표준코딩을 배우고, 틈틈히 블로그까지 병행하고 있으니

내가 근 10년간 인생을 이렇게 열심히 산적이 있나 싶다. (고3때도 이렇게 열심히 공부한거같진 않은데..;;)

 

이런생활을 하고있으니 나로선 요새 연애따윈 꿈도 못꾸지만 

Y언니를 보면 나보다 더 바쁜와중에 연애까지 착실히하고 있으니 참 대단하단 말밖에...

 

어쨌든 웹디자이너로서 몇 년전부터 이미 대세가 되어버린 웹표준 코딩을 병행할 수 있다면

큰 경쟁력을 지니게 될것...이라고 생각하여 배우기 시작했지만 과연 내가 이걸 유용하게

써먹을 수 있을 정도로 실력을 쌓을 수 있을지는 사실 의문이다.^^;;

 

그러려면 아마 직장을 옮겨야 되지 않을까 싶기도 하고...

 

뭐 현재 이직을 고려하고 있지만 그건 나중 문제고

선생님은 코딩은 머리로 익히는것보다 손으로 배우는게 더 중요하다고 하셨다.
그만큼 이론만으로는 힘드니 많은 실습을 해보라는거다.

신입이 퍼블리셔로 들어와 사람구실을 하려면 최소한 일년정도는 경력을 쌓아야 된다고...
 

 

내가 배우는 수업은 html4.1과 css의 입문으로 코드가 많고 기존의 복잡한 table을 사용하지않고 

html코드를 최소화한 div로 프레임을 짜고 웹페이지를 만드는 기초과정이다.

 

 

 

 

그럼 왜 웹표준 코딩을 배워야 하는걸까?

 

사실 난 웹표준 코딩이란 정확한 정의도 모른채 요새 점점 홈페이지들이 웹표준을 준수하도록 규정되어

막연히 배워야겠구나 하는정도로만 알고있었다.

 

웹표준 코딩이란 간단히 말해 모든 브라우저, 즉 한국인들이 가장 많이 사용하는 익스플로러부터해서

파이어폭스, 크롬, 사파리 등에서 모두 똑같이 잘 보일 수 있게 구동되는 홈페이지를 제작하는것이다.

 

이는 1994년 웹의 장기적인 발전을 위해 창립된 'w3c'(인터넷관련 국제 컨소시엄)에서 지정한 것인데

왜 그동안 이 웹표준이 지켜지지 않았냐면

 

과거 마이크로 소프트사의 인터넷 익스플로러가 대세이던 때,

모든 시스템이 익스플로러를 위해 만들어졌고 익스플러로는 'w3c'가 만든 웹표준 정책을 무시했다.

 

때문에 홈페이지 제작사들은 계속 table만을 사용해서 사이트를 만들어도 별 문제 없었고

대한민국 90% 이상이 사용하는 익스플로러에서 잘 돌아가는 사이트들을 보며

비주류였던 크롬,파이어폭스,사파리등을 위해 굳이 웹표준으로 코딩을 해야할 필요성을 못느꼈던 것이다. 

 

 

 

 

그러나 이때 구글이 전세계의 키워드 시장을 석권하며 등장했고,

플래시없이 div와 css로 만들어진 홈페이지를 검색 결과에서 우선적으로 보여 주겠다고 발표했다.

(코드들을 최소화한만큼 빠르니 어찌보면 당연하다.)

 

또한, 스마트폰이 등장하며 그동안 웹표준을 지키지 않은 홈페이지들이

모바일에서 제대로 보여지지 않는 결과가 나타난 것이다.

또한 익스플로러 사용자들의 비중이 점차 낮아지고 다른 브라우저들 사용자의 비중이 점점 늘어나며 

대기업과 공기업을 시작으로 모든 사이트들은 웹표준으로 바꾸어 제작하고 

인터넷 익스플로러8 부터는 웹표준을 준수하여 나왔다.

(때문에 이전버전 특히 익스플로러 5와 6에서는 웹표준으로 코딩을 했을경우 오히려 제대로 보여지지않는 결과가 나타난다고 한다.)

 

 

 

이제 기존 table형식의 마구잡이로 코딩되어 있던 수 많은 사이트들은 리뉴얼되며

웹표준으로 바뀌어가고 있다.

웹디자이너들과 개발자들이 이제 웹표준을 모르고서는 뒤쳐질 수 밖에 없는 것이다.


한때 전성기를 누렸던 플래시가 이제 점점 사양화 되면서 Adobe사에서는 플래시의 개발중지를 선언하였고,
앞으로 html5와 css3만으로 플래시의 한계성을 넘어 3G까지 구현할 수 있다고 하니
세상은 항상 끊임없이 변화하고 그에 발맞춰 무언가를 계속 배워야하는건

컴퓨터를 다루는 자들의 숙명일지도 모르겠다.

 

 

 

 

 

내가 이길로 어디까지 나아갈지는 모르겠으나 적어도 웹디자인일을 하고 있으면 익숙한 현재에 정체되어 

결코 방관할 일이 아니라는 거다.

물론 웹표준코딩을 할 수 있는 코더를 따로 둘 수도 있으나

작은 회사는 개개인이 항상 만능이 되길 원하기에...

 

현재 웹표준코딩이 가능한 퍼블리셔가 부족하다고 하니 재미붙이면 진로변경을 할 수도 있고 말이다. ㅋ

 

 

 

어쨌든 한살이라도 젊을때 최대한 배울 수 있는건 배워두는게 좋지 않은가...

뭐 기껏해야 이제 시작이지만 말이다. 

 

 

 

 

 

Posted by Y&S

댓글을 달아 주세요

  1. 저도 한번 배워보고 싶네용 ㅎㅎ

    2013.04.29 08:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 꿈트리

    회사에서도 웹표준때문에 배워야할꺼 같다고 해서 배우고 싶은데 혹시 다니시는 학원 알 수 있을까요??

    2013.05.22 09:50 [ ADDR : EDIT/ DEL : REPLY ]
    • 저는 혜화에있는 아카데미정글이라고 직장인 환급을 받으면서 다녔습니다.
      지금은 한달에 한번씩하는 웹표준 과정이 현재 모집이 끝나서 다음달을 기다리셔야될거 같네요.

      기초반/응용반으로 나눠져있구요~선생님은 정말 실무위주로 잘 가르치십니다.^^

      2013.05.22 11:27 신고 [ ADDR : EDIT/ DEL ]
  3. 꿈트리

    자세한 설명 감사해요!! 지금 블로그 보면서 막 따라하고 있어요ㅎㅎㅎ

    2013.05.22 11:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 차근차근하시면 될 것 같아요~
      근데 저도 배우고 있는 입장인지라 틀린게 가끔 있을지도 모르겠네요^^:;
      요긴 그냥 맛배기 정도로만 보세요 ㅎㅎ

      2013.05.22 13:49 신고 [ ADDR : EDIT/ DEL ]
  4. 안녕하세요~ㅎ 웹표준은 하드코딩으로만 가능한건가요?
    제가 드림위버로만 만들다가 이번에 워드프레스랑 웹표준에 관심을 두고
    있는지라... 간만이라 개념 조차 모르는게 많네요
    포스팅 잘 보구 갑니다~!^^

    2013.08.31 12:06 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 기본개념 정도는 여기서 배우실수 있을듯해여^^

      2013.08.31 16:55 신고 [ ADDR : EDIT/ DEL ]
  5. 덕분에 좋은 글 읽고 갑니다. 요새, 저도 표준 코딩 배우느라 용 쓰고 있네요.

    2014.02.16 02:12 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅎㅎ 열심히 배우세요.
      나중에 꼭 도움되실거예요^^

      2014.02.16 22:59 신고 [ ADDR : EDIT/ DEL ]
  6. cloud

    블로그 내용이 좋아서 처음부터 차근차근 공부해 보려고 합니다.

    2014.07.18 17:04 [ ADDR : EDIT/ DEL : REPLY ]