지난주부터 새롭게 배우기 시작한 웹표준 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
TAG    

댓글을 달아 주세요

  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 ]