지난주부터 새롭게 배우기 시작한 웹표준 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, 자바스크립트를 활용한 효과를 체험할 수 있는데 익스플로러 낮은버전에서는 안 열리므로 파이어폭스에서 확인할 수 있다.
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>
'말랑말랑 컴퓨터 > 웹표준코딩 html&css' 카테고리의 다른 글
| [웹표준코딩] 플롯의 초기화 clear:both;와 홈페이지 기본 레이아웃 by S (10) | 2013.07.18 |
|---|---|
| [웹표준코딩] 플롯클리어 방법 by S (8) | 2013.07.07 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S (3) | 2013.06.22 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S (10) | 2013.06.20 |
| 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) by S (4) | 2013.06.14 |
| 박스모델의 연습과 멀티클래스 네임, 가상클래스 네임 by S (2) | 2013.05.24 |
| 박스모델의 이해와 리셋(reset) css by S (8) | 2013.05.14 |
| css 구조와 사용 방법 및 스타일시트 속성 by S (6) | 2013.05.13 |
| html 기본태그 (블럭요소/인라인요소) 정리 by S (12) | 2013.05.07 |
| 웹표준 코딩을 배우기 시작하다 by S (12) | 2013.04.26 |
