본문 바로가기

전체 글229

CSS3 지원여부 IE7, 파이어폭스3 CSS3에 대해 이둘은 지원이 미흡하다. 자식 선택자, 인접 선택자, 속성 선택자는 모두지원 단 IE7의 경우 약간의 버그가 있다. 이둘은 유사클래스가 몇개 지원 안된다. 파이어폭스3의 경우 * :nth-child() * :nth-last-child() * :first-of-type * :last-of-type * :only-of-type * :nth-of-type() * :nth-last-of-type() IE7는 아래 둘말곤 유사글래스 모두 지원 안됨. * :first-letter * :first-line 2008. 10. 24.
브라우저의 CSS3 지원 여부 확인 포탈 싸이트에서 CSS3 검색시 다음과 같이 확인할 수 있다. CSS Selectors CSS 선택자지원 확인서비스 사이트, 테스트 안내.http://www.css3.info/selectors-test/들어가면 뜨는 내용 일부 CSS SelectorsIs your browser compatible?After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is.. 2008. 10. 24.
DOM 요약 다룰 내용 노드의 개념 간편한 DOM 사용법 getElementById, getElementsByTagName, getAttribute, setAttribute 1. DOM D는 문서입니다. 문서 객체 모델(Document Object Model)은 문서(document)가 없으면 움직이지 않음 웹 문서를 만들어 웹 브라우저에 띄우는 순간 DOM이 살아 움직이기 시작합니다. 작성된 문서가 객체로 변경되기 때문임 O는 객체입니다. 자바스크립트에는 세 종류의 객체가 있음 사용자 정의 객체 배열, 수학, 날짜와 같이 자바스크립트에서 이미 만들어진 객체 웹 브라우저가 제공하는 주요 객체 자바스크립트 초기에는 중요한 몇 가지 주요 객체들이 스크립트 제작에 사용돼었음. 그 중 가장 기본적인 것이 윈도우 객체(win.. 2008. 10. 22.
CSS 선택자 선택자를 쓰고 중괄호로 마무리한다 모두선택 *{} ex)모든 태그 속성 패딩,마진이 0 *{padding:0; margin:0;} 태그 선택자 ex)바디컬러 블랙, h1 폰트 컬러 분홍 body{background-color:#000000;} h1{color:#ffcccc;} 클래스 선택자 .class{} 지정한 클래스 이름 앞에 . ex)html은 가로 400px 패딩 50px 마진 60px .box{ width:400px; padding: 50px; margin: 60px; } 아이디 선택자 #id{} ex)html은 아랫선 대쉬 1px 그린 #box{border-bottom:#009933 dashed 1px} 2008. 10. 22.
티스토리 카테고리 메뉴... 메뉴를 보면 답답함이 느껴 질떄가 있는데... 카테고리를 보면 줄줄이 이어져있는모습..떄론 좋기도 하지만 답답하기도 하다. 이걸 자바스크립트로 대체 시켜서 바꿀순없을까 하는 생각도.. 아직 내게 그정도 능력은 없지만..ㅎㅎ 2008. 10. 1.
CSS 삽입 - import css가 간단하고 짧다면 한파일에 다 설정해도 되겠지만 복잡하고 길다면 알아보기도 어렵고 후에 관리하기에도 어려움이 많을 것이다. 이에대해 import를 사용해보자. 기본 문서 html에 복잡한 css구문을 의미별로 3개로 나눈후 한css에 연결시키는 밥법이다. 가정삼아서 다음과 같이 나누었다. master.css 다른 css파일을 연결시킨다. layout.css:레이아웃 결정 color.css:폰트관리 ect.css:기타 1. 먼저html에 master.css 삽입 2.master.css에 다른 css파일들을 연결시켜준다. @import url("master.css"); @import url("layout.css"); @import url("ect.css"); 요약: 앞서 말한듯이 긴 css구문을 사용.. 2008. 9. 26.
CSS 삽입 CSS의 삽입 3가지방법으로 나뉘어진다 내부에 삽입 style type="text/css" 외부삽입 link rel="stylesheet"type="text/css" href="주소" 외부삽입 style type="text/css" @import url(주소) 내부에 삽입 외부로 부터 삽입-첫번째 위의 경우는 티스토리의 html 편집에 가봐도 확인할 수 있을 것이다. 외부로 부터 삽입- 두번째 import방식을 또다른 장점으로 분배된 여러 CSS파일을 삽입할때 편하단점이다. 이에관해선 다음링크를 참조: http://siana.tistory.com/entry/CSS-%EC%82%BD%EC%9E%85-import 위의 세가지는 head에 삽입할때이다. 인라인 스타일 이방법은 권장할만하지못하다 이터럼 직점 태.. 2008. 9. 25.
CSS 입문하기 CSS css란? css:cascading style sheet 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 .. 2008. 9. 25.
오페라 id class 보기 오페라기능중 마음에 드는 것중 하나. 별도 부가 설치없이 보기>스타일>id mclass 하면 화면에 지정된 id와 class를 볼수있다. 일일이 싸이트를 분석하기전에 전체구조도를 미리보기에 좋을 듯하다. 아래는 월드 와이 웹에가서 적용해본것. 2008. 9. 24.