Tip&Tech/Web2008/07/02 21:50
* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

* 다루지 않은 10가지 토픽들!
1. 더 많은 선택자들
 a. 의사-엘리먼트
 - p:first-letter{ font-size:3em; } : 첫 번째 문자를 크게 만드는 의사-엘리먼트
 - p:first-line{ font-style:italic; } : 첫 번째 줄을 이탤릭체로 바꾸는 의사-엘리먼트

 b. 속성 선택자
 - 일부 브라우저만 지원(향후 확장될 것)
 - img[width] { ... } : width속성을 가진 모든 이미지들을 선택
 - img[alt~="water"] { ... } : water라는 단어를 포함하는 alt 속성을 가진 모든 이미지들을 선택

 c. 형제 엘리먼트에 의한 선택
 - h1+p{ font-style:italic; } : h1 엘리먼트 다음에 오는 모든 문단을 선택하는 스타일

 d. 선택자들을 결합하기
 - div#blackbox > blockquote : blockquote의 부모가 되어야 하는 blackbox라는 id를 가진 div 자손 선택자
 - didiv#blackbox > blockquote p : p 엘리먼트는 blockquote의 자손이 되어야 하고, 이는 blackbox라는 id를 가진 div의 자손이 되어야 함
 - div#blackbox > blockquote p:first-line :  위와 동일, 문단의 첫번째 줄만을 선택

2. 프레임
 - <frame rows="30%, *, 20%"><frame name="header" src="..." /><frame name="content" src="..." /><frame name="footer" src="..." /></frameset>
 - a태그에서 target에 프레임 이름을 넣음으로써 프레임 사용 가능
 - <iframe name="iframe" src ="..." width="100" height="100" />
 - HTML 4.01 : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

3. 멀티미디어와 플래시
 - embed 태그 대신 object 태그를 사용

4. 웹 페이지 생성을 위한 도구들
 - 어도비 드림위버
 - 어도비 고라이브
 - 마이크로소프트 프론트페이지
 - GNU 이멕스

5. 클라이언트 사이트 스크립팅
 - <form onsubmit="return Check(this)" ...> ...
<script type="text/javascript">
function Check(form){
   if(form.id.value != "") return true;
   else return false;
}
</script>

6. 서버 사이드 스크립팅
 - PHP, Python, Perl, Ruby on Rails

7. 검색 엔진을 위한 튜닝
 - meta 태그를 이용한 순위 상승
 - <meta name="description" content="My site is ..." /><meta name="keywords" content="keyword1, keyword2, ... , keyword10" />
 - 많은 검색 엔진들이 페이지 내용보다는 제목에 있는 단어나 alt, title 속성을 더 중요하게 다룸
 - 많은 검색 엔진들이 내 사이트로 연결된 링크의 개수를 중요하게 다룸
 - 검색 로봇 거부 방법 : <meta name="robots" content="noindex,nofollow" />

8. 프린트를 위한 스타일 시트에 관한 것들
 - <link rel="stylesheet" type="text/css" media="print" href="print.css" />
 - 위 링크의 스타일은 페이지가 프린트할 때만 사용함
 - 배경은 흰색으로, 폰트의 크기는 포인트(12pt)로, 가독성이 높은 폰트(세리프)로, 필요없는 엘리먼트는 display:none으로, 포지셔닝을 하향식으로 변경하는 것이 좋음

9. 무선 장치를 위한 페이지
 - <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />
 - XHTML은 간단하고 정확하게, 네비게이션은 간단하고 명확하게, 화면은 가능한 한 축소해서, 엘리먼트의 순서는 일렬로, 프레임과 팝업의 사용은 가능한 자제하고, 다양한 환경에서 테스트하는 것이 좋음

10. 블로그
 - <$ ... $>와 같은 템플릿 변수 사용

이 글은 새로운 정보가 추가될 때마다 업데이트됩니다. 추천으로 아래 숫자에 1을 더해보세요. :)
RSS구독을 하시면 포스트를 배달해 드립니다. ▷ 한RSS 구독하기, 구글리더 구독하기

TRACKBACK http://blog.missflash.com/trackback/379 관련글 쓰기

  1. best dating sites  삭제

    2014/10/30 23:17TRACKBACK FROM best dating sites

    [ MissFlash - Digital Life ] :: [Head First HTML with CSS & XHTML] 9. 다루지 않은 이야기들?! 끝마치며...

  2. quest bars  삭제

    2014/11/04 11:45TRACKBACK FROM quest bars

    [ MissFlash - Digital Life ] :: [Head First HTML with CSS & XHTML] 9. 다루지 않은 이야기들?! 끝마치며...

댓글을 달아 주세요

  1. Favicon of http://www.ghdhairstraighteneraz.com/ BlogIcon ghd hair straighteners

    관리자의 승인을 기다리고 있는 댓글입니다

    2013/01/04 23:37 [ ADDR : EDIT/ DEL : REPLY ]