* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : 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. 블로그
- <$ ... $>와 같은 템플릿 변수 사용
'Tip&Tech > Web' 카테고리의 다른 글
| [팁] FeedBurner를 이용한 이메일 구독방법! (0) | 2008.08.08 |
|---|---|
| [팁] FON 공유기 DD-WRT 해킹하기!!! 및 도움 요청!!! (0) | 2008.07.21 |
| IE와 FF에서 window.onload 사용하기~ (0) | 2008.07.02 |
| [Head First HTML with CSS & XHTML] 8. 폼 잡아보자! 대화식 페이지 만들기~! (0) | 2008.07.01 |
| [Head First HTML with CSS & XHTML] 7. 행과 열을 만나다! 웹2.0식 Table 작성법 (0) | 2008.06.30 |
