CSS framework
DEVELOPMENT/HTML & CSS2014. 1. 17. 11:13
css framework 라이브러리를 제공해주는 사이트
'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글
| [canvas] 2D를 이용한 객체 회전 (0) | 2016.06.01 |
|---|---|
| [canvas] 키보드를 이용한 객체 이동 (0) | 2016.06.01 |
| [TIP] <IMG> 태그의 ALT에 줄바꿈 하기 (0) | 2009.10.29 |
| DOCTYPE. (0) | 2009.10.28 |
| CSS 작성 기초 - 선택자 사용하기 (0) | 2009.10.28 |
DOCTYPE.
DEVELOPMENT/HTML & CSS2009. 10. 28. 01:07
HTML 편집기를 이용하여 html 파일을 생성하면 상단에 DOCTYPE이라고 선언된 걸 볼 수가 있다. 이는 브라우저가 어떤 방식으로 렌더링 해야 하는지를 알려주는 역활을 한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 문서에 완벽한 DOCTYPE을 지정한 경우에 보통 표준 호환 모드로 화면을 표시하고,
HTML 문서에 Strict DTD를 지정한 경우는 표준 모드로 동작을 하게 된다. 또 한 transitional DTD를 지정한 경우는 비표준 확장 모드로 동작을 하게 된다.
만약, DOCTYPE을 선언하지 않았거나 잘못 쓴 경우는 HTML 문서나 XHTML 문서 모두 비표준 확장 모드로 표시가 된다. 하지만 모든 브라우저가 이러한 규칙을 따르는 것이 아니지만 가급적으면 사용하도록 하는것이 좋다.
사이트 내의 모든 페이지에 완벽한 DOCTYPE 선언을 하고 HTML 문서일 경우에는 strict DTD를 사용하는 것이 좋다.
그리고 XHTML 문서를 작성하게 되면 DOCTYPE 선언 앞 부분에 XML 선언을 추가 해줘야 되는데 하지만 IE 6 에서는 DOCTYPE 선언이 제일 앞에 오지 않으면 자동으로 비표준 모드로 동작을 하기 때문에 페이지를 XML 문서로 서비스 하는 경우가 아니라면 XML 선언은 하지 않는게 좋다.
<?xml version="1.0" encoding="utf-8"?>
'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글
| [canvas] 2D를 이용한 객체 회전 (0) | 2016.06.01 |
|---|---|
| [canvas] 키보드를 이용한 객체 이동 (0) | 2016.06.01 |
| CSS framework (0) | 2014.01.17 |
| [TIP] <IMG> 태그의 ALT에 줄바꿈 하기 (0) | 2009.10.29 |
| CSS 작성 기초 - 선택자 사용하기 (0) | 2009.10.28 |
CSS 작성 기초 - 선택자 사용하기
DEVELOPMENT/HTML & CSS2009. 10. 28. 00:22
선택자 활용 기초
1. 타입선택자(type selector)
타입 선택자는 앵커, 문단, 테이블등과 같이 제목 엘리먼트 같은 특정 유형의 엘리먼트를 지정하는것
p {color: block}
a {text-decaration: underline}
h1 {font-weight: blod}
2. 하위 선택자(descendant selector)
특정 엘리먼트나 엘리먼트 묶음의 하위에 나오는 엘리먼트를 지정하는것으로, 하위 선택자는 두 개의 선택자를 공백으로 분리해서 저장
li img {cursor: pointer;}
3. ID 선택자
ID선택자란 엘리먼트를 아이디 값으로 스타일일 지정하는 것으로 선택자는 #문자를 사용한다.
#title {font-align: center;}
4. 클래스 선택자
클래스 선택자란 엘리먼트의 클래스명을 선택하여 지정하는 방법으로 선택자는 .문자를 사용한다.
.intro {boarder-style: solid;}
5. 유사 클래스 선택자
문서 구조를 기반으로 엘리먼트를 지정하는 것이 아니라, 폼 요소나 링크의 다양한 상태에 대해서 스타일을 지정해야 하는 경우가 있다. 유사 클래스 선택자를 사용하면 이런 작업을 할수 있다.
/* 방문하지 않은 링크를 파란색으로 표시 */
a:link {color: blue;}
/* 방문하지 않은 링크를 녹색으로 표시 */
a:link {color: green;}
/* 마우스가 올라오거나 클릭했을 때 링크를 빨간색으로 표시 */
a:hover, a:active {color: red;}
/* 테이블 행에 마우스가 올라올 때 빨간색으로 표시 */
tr:hover {color: red;}
/* 입력요소에 포커스가 갔을 때 노란색으로 표시 */
input:focus {background-color: yellow;}
6. 전체 선택자
와일드 카드처럼 모든 가능한 엘리먼트를 지정하는데 사용한다.
전체 선택자는 * 문자를 사용하며 주로 페이지 안에 모든 엘리먼트에 스타일을 지정할 때 사용
* {
padding: 0;
margin: 0
}
'DEVELOPMENT > HTML & CSS' 카테고리의 다른 글
| [canvas] 2D를 이용한 객체 회전 (0) | 2016.06.01 |
|---|---|
| [canvas] 키보드를 이용한 객체 이동 (0) | 2016.06.01 |
| CSS framework (0) | 2014.01.17 |
| [TIP] <IMG> 태그의 ALT에 줄바꿈 하기 (0) | 2009.10.29 |
| DOCTYPE. (0) | 2009.10.28 |
크로스 브라우저 투명 코드 처리
DEVELOPMENT/Javascript2009. 9. 21. 16:16
특정 요소를 투명하게 처리할때 IE와 기타 브라우저가 표현하는 방식이 다르기 때문에 다음과 같이 해준다.
var view = document.getElementById('view');
if(view.filters){
if(view.filters){
view.style.filter = 'alpha(opacity=65)'; //IE
}else{
view.style.opacity = 0.65; //기타브라우져
}
}else{
view.style.opacity = 0.65; //기타브라우져
}
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| 단위환산 프로그램 소스 (0) | 2010.01.04 |
|---|---|
| Ajax 정복하기 (0) | 2009.10.10 |
| [javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
| favicon 생성 (0) | 2009.09.17 |
| [javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
