1.  자료실
  2.  팁
  3.  나의 XE
  4.  Html
  5.  배경이미지

XE 인기게시물

MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
Html Tip
여러사이트에서 제가 필요해 가져온 Html Tip들입니다.
2008.04
04

CSS를 이용하여 html을 구성하는 것은...

궁극적으로 웹문서규격이 xhtml로 옮겨과는 중간과정중이라는 이유 하나밖에 없다.

CSS를 이용하면 이런것이 좋고, 저런것이 좋고, 이런면에서 약간 어렵지만 다른 면에선 편하고

이런 것은 모두 부가적인 효과일뿐, 궁극적으로는 xhtml로 발전을 위한 중간과정일 뿐이다.

최근 몇몇 프로젝트를 진행하면서

CSS방식의 코딩을 주로 하면서, html코딩을 xhtml규격에 맞춰 코딩을 요구하는 프로젝트가 많아지긴 했는데, 조금 의아한 방식으로 요구하기도 해서 난감한 경우가 몇가지 있었다.

그래서...

기본적인 작성법 좀 써볼 까 한다.

1. 대소문자 구분

중요한 문제이다.

태그와 그 속성, 속성값을 대소문자로 구분하여 작성한 html문서들

그 이유는 유지보수시, "그것들을 구분하기 쉽다"라는 이유로 꽤 편리하지만, 코더들을 경악에 떨게 하던 그것을 xhtml에서는 사용할 수 없다.

태그와 속성, 그 속성값은 반드시 소문자로 작성하여야 한다.

왜냐면...

src값과 SRC값중, SRC를 인식하지 못하게 규격되어 있고,

그 이유는 추후에 전혀 다른 속성으로 발전할 가능성이 있기 때문이다.

2. 태그의 시작과 끝

시작태그가 있으면 끝맺음 태그는 반드시 있어야한다.

<p>이러쿵저러쿵</p>

<li>텍스트...</li>

이거 모르는 사람은 없을 것이다.

3. 독립태그

끝맺음 태그없이 독립적으로 쓰이는 <br>, <img>, <param>, <input> 같은 태그들

">" 앞에 띄어쓰기 한칸과 역슬래쉬(/)를 사용하여

<br />, <img />, <param />, <input />등으로 표기하여야 한다.

라는게 웹규약이라고 떠드는 바보들이 너무나 많다!!!!!

이건 어디까지나

작성한 html문서를 추후에 xhtml로 변환하는 과정에서의 오류를 없애기 위한 일종의 방편일뿐,

xhtml에서는 <br></br>과 같은 방법으로 작성해주어야 한다.

이는 또한, xml에서도 마찬가지이다.

추후에 xhtml로 새로운 문서를 작성하려 할 때에는 <br></br> 과 같은 방식으로 코딩해야한다.

내년에 xhtml로 리뉴얼하지 않을 대기업이 이런걸 요구할 땐 좀 어이없음

4. 속성값

  1) value="3" 속성값은 반드시 따옴표 사이에 위치하여야한다.

  2) selected, checked와 같이 속성값없이 쓰이던 속성들은

      selected="selected", checked="checked"와 같이 표기하여야 하고,

      이 값에 관련된 javascript 값 또한 새로 규격화되었다.

  3) 위에도 썼지만, 대문자로 쓰면 인식을 안 할 가능성이 높다.

5. DOCTYPE 규정은 필수

프로그래머들아~~~~

제발 좀 지우지 말아다오~~~~

현재 익스플로러는 DOCTYPE규정에 따라 전혀 다른 레이아웃을 구성한다.

모질라는 DOCTYPE규정에 상관없이 같은 레이아웃을 보여주지만, 수학기호, 어플리케이션삽입과 같은 상황에서는 전혀 다른 결과값을 가진다.

6. javascript 호출을 위해 name값을 쓰지 말아라.

name값은 오로지 hash호출을 위해서만 호출하라.

<a href="#div01">본문1 로 스크롤</a>

...

<a name="div01"></a>

<h2>본문1</h2>

위와 같이 일명 "스크롤링크", "앵커링크", "샵링크"와 같은 곳에만 쓰고

javascript 호출을 위해서는 id값만을 써야한다.

document.getElementById('div01').style.display = block 과 같이 사용하고

name을 호출해야한다면, 반드시 getElementByName()을 사용하도록 하자.

번호
제목
글쓴이
38 IE 버젼별로 css 따로 적용하는 방법
[레벨:30]id: 팔공산
2011-02-17 897
37 마퀴태그의 기본
[레벨:30]id: 팔공산
2010-02-06 2286
36 이미지 바꾸기 소스 1
유료회원감로수
2009-06-06 3914
35 익스6에서만 작동되게하는 css구문
[레벨:30]id: 팔공산
2009-02-19 3574
34 CSS 기초 깨우치기 1
[레벨:30]id: 팔공산
2008-10-12 4499
33 CSS 사용시 익스플로러 버그 해결하기
[레벨:30]id: 팔공산
2008-07-19 3895
32 CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 1
[레벨:30]id: 팔공산
2008-07-19 4900
31 기본적인 태그 (링크걸기)| 1
[레벨:30]id: 팔공산
2008-07-12 4350
30 가장 기본적인 태그들
[레벨:30]id: 팔공산
2008-07-12 2840
29 자신의 홈에 프린트버튼을 넣자 2
[레벨:30]id: 팔공산
2008-07-12 2718
28 테이블(셀) 깨지지 않는 CSS 1
[레벨:30]id: 팔공산
2008-07-12 3553
27 날짜 매개변수 1
[레벨:30]id: 팔공산
2008-07-12 2771
26 이미지 없이 그라데이션효과 주기
[레벨:30]id: 팔공산
2008-07-12 3500
25 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1
[레벨:30]id: 팔공산
2008-07-12 2693
24 뒤로..앞으로..새로고침 버튼 넣기
[레벨:30]id: 팔공산
2008-07-12 3780
23 ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 3
[레벨:30]id: 팔공산
2008-04-27 5928
22 붙어야 할 이미지가 붙지 않을때.
[레벨:30]id: 팔공산
2008-04-19 2797
21 사각박스 코너를 이미지없이 둥글게 만드는법
[레벨:30]id: 팔공산
2008-04-08 3266
20 CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] 1
[레벨:30]id: 팔공산
2008-04-04 3300
19 네이밍 가이드
[레벨:30]id: 팔공산
2008-04-04 3208
18 논리 태그 사용
[레벨:30]id: 팔공산
2008-04-04 3369
17 POSITION속성과 그 속성값 2
[레벨:30]id: 팔공산
2008-04-04 3736
16 긴 제목 마우스오버시에만 보기
[레벨:30]id: 팔공산
2008-04-04 3215
xhtml 기본 작성법
[레벨:30]id: 팔공산
2008-04-04 3163
14 display:block 쪼금 더~
[레벨:30]id: 팔공산
2008-04-04 5797
13 글들의 상하 정렬위치 설정 vertical-align속성
[레벨:30]id: 팔공산
2008-04-04 3736
12 덧글달기 CSS Coding TIP
[레벨:30]id: 팔공산
2008-04-04 2767
11 iframe 대신 사용하는 object 태그 1
[레벨:30]id: 팔공산
2008-04-04 4225
10 TD안엔 DIV를 넣어라? 1
[레벨:30]id: 팔공산
2008-04-04 4041
9 제발...alt텍스트와 title텍스트를 구분해조바바 1
[레벨:30]id: 팔공산
2008-04-04 3675
  • 문하우스는 IE7, 1280*1024 이상의 모니터 해상도에서 최적화 되어 있습니다.무단 E-mail 추출이나, 성인광고를 허용치 않습니다
  • 단축키 : l-목록, w-글쓰기, z-이전글, x-다음글, s-최근글, a-이전목록, d-다음목록, 1-home, 2-data, 3-zbxe, 4-blog, 5-total, 6-QnA