본문 바로가기

Tip&Tech/Web

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

* 본 내용은 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. 블로그
 - <$ ... $>와 같은 템플릿 변수 사용