분류 전체보기229 jquery란 무엇인가? jquery jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다. http://jquery.com/ jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다. 웹 애플리케이션 프레임워크? 웹 애플리케이션 프레임워크(framework)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스를 개발하기 쉽게 해주는 구성요소 모음이다. 주로 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이기 위해 만들어졌다. 따라서 수많은 웹 애플리케이션 프레임워크는 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드의 재사용 등을 .. 2009. 9. 3. CSS 포지셔닝 플로팅 CSS float float는 엘리먼트를 띄운다는의미로 왼쪽 오른쪽 두가지 지정할 수 있는 속성값을 가진다. 오른쪽위의 첫번째 그림은 아무것도 지정하지않았을때 일반 포지셔닝이다. 왼족위는 하나의 박스를 float:left로정의 한경우이다. 플로트의 경우 가로폭이 충분하지않으면 아래로 밀려난다. 오른쪽아래가 그예시 또 박스높이가 다른경우는 왼쪽아래처럼 왼족긑으로 떨어지지않고 플로트된 다른 엘리먼트에 달라붙는다. 위그림은 플로트 해제를 보여주는 예시이다. 첫번째는 역시 아무것도 지정하지않았을떄. 두번째는 박스에 float:left를 주었을떄이다. 이떄 라인박스가 오면 박스크기만큼 작아지면서 흘려지게된다. 왼쪽 아래처럼 각블럭을 해체하려면 clear를 쓰면 된다. 마지막으로 플로트를 감싸는 엘리먼트가 있을경우.. 2009. 9. 3. CSS 포지션닝 고정위치(fixed) 고정위치(fixed) 고정위치는 화면에서 어떤위치를 차지하던지 일정한위치에 유지하면서 사용자눈에 보이게된다. #box{ position:fixed; left:20px; top:30px; } 티스토리 블로그 스킨중에서 2단형에 happt blog 스킨을 보면 적용된것을 알 수 있다. 하지만 IE6에서는 이고정위치를 지원하지않는 다. 이를해결하기위해서 자바스크립트를 사용할 수있긴하다.. http://snook.ca/archives/html_and_css/experiment_with 2009. 9. 2. CSS&HTML 포지셔닝 웹문서의 포지션닝 웹문서에서 위치는 크게 3가지로 요약된다 일반 흐름(normal flow) 플로트(float) 위치(position) 일반흐름 방식은 별도 지정이 없을떄 를 말한다. 엘리먼트를 우리는 블록엘리먼트와 인라인 엘리먼트로 구분 할 수 있는데 div ,p ,h1등은 하나의 블록을 차지한다. 하지만 strong, span같은 경우는 인라인 엘리먼트로 한줄에 표시된다. 포지션닝 :: 상대위치 원래의 위치로부터 지정한만큼 이동한다 그림에서 빈박스가 원래의 위치고 진회색이 지정하여 이동한 경우이다. #box{ position: relative; left:20px; top 20px; } 포지셔닝 :: 절대위치 상위엘리먼트중에서 가장가까운 엘리먼트의 위치를 기준으로 한다 만약 특별한 상위 엘리먼트가 없다.. 2009. 9. 2. CSS 마진과 패딩의 이해 CSS 마진과 패딩의 이해 그림을 보면 연한파란색이 콘텐츠 그리고 안에 패딩이 얼마주어지고 다음은 선(border) 마지막으로 마진이 화면을 구성한다. 위에것을보면 가로 756px 세로84px 패딩5px 보더0 마진0 으로 볼수 있다. IE6에서는 계산이 달라서 의도한것보다 작게나올수 있다 이에대한 해결은 너비를 지정한요소에는 패딩을 지정하지않고 그대신 그요소의 부모엘리먼트나 자식엘리먼트에 패딩을 마진을 지정해주면 문제가 일어나지않는다. 마진겹침 현상 왼쪽은 마진을 위의 박스는 마진30px 아래박스에 20px을 준경우다 실제 왼쪽같이 나올걸 기대하지만 오른족과 같이 겹침 현상으로 더 아래박스의 20px은 무시되고 겹친다. 이런현상은 엘리먼트안에서도 일어난다. 위그림의 흰색은 내용이고 회색에 마진 20px.. 2009. 9. 2. CSS 고급선택자(3) CSS 고급선택자(3) 속성선택자(attribute selector) 태그에서 속성은 가장흔한예로 우리가 여기서 tittle을 예로들수있다. 보통 엘리먼트위로 마우스를 올렸을때 툴팁을 표시하는데(노란박스와 tittle의 값) 속성을 다르게 표시할 수있다 사용법은 엘리먼트[속성엘리먼트]{} a[tittle]{border: 1px dotted #999;} a[tittle]:hover{cursor: help;} 위와같이한다면 점선으로된 1pxdml 테두리 그리고 마우스를 가져갔을때 믈음표모양이 보일것이다. 2009. 8. 30. CSS 고급선택자(2) CSS 고급선택자(2) 인접 형태 선택자(adjacent siblimg selector) h1 + p{font-weight:bold;} 제목 첫번째 문단 두반쩨 문단 인접선택자는 부모를 가지는 엘리먼트중에 가장 앞에 나오는 엘리먼트릴 지정하는것이다.따라서 첫번째 문단만 굵게 표시 된다. 제목 첫번째 문단 두반쩨 문단 2009. 8. 30. CSS 고급선택자 CSS 고급선택자 자식선택자(child seletor) 자식 엘리먼트가 있을 경우 바로밑에 속한 자식엘리먼트가 선택되는 경우이다. 아래와 같은 경우 바같이라는 글자만 굵게 표시된다 #nav > li {font-weight:bold;} 바깥 바깥 안안안안안 바깥 바깥 아래와 같이 표현된다 바깥 바깥 안안안안안 바깥 바깥 하지만 빌어먹을 IE6이하에서는 먹혀들지않는다 전채선택자로 유사하게 흉내낼수 있다 #nav li{font-weight:bold;} #nav li *{font-weight:nomal;} 2009. 8. 30. CSS 클래스(class), 아이디(id) 좋은이름 나쁜이름 클래스나 아이디의 이름을 부여할때 후에 고칠수 있는 점을 고려하여 명명하는것이좋다. 예로 왼쪽 메뉴를 leftNav라고 하는것보다 후에 오른족을로 변경되점을 고려하여 subNav라고 붙이는 것이좋다. 과도히 긴 이름은 좋지않다. 이름을 두가지 의미를 포함 하기 마련인데 중간에 대문자로 구분해주자 subnav 이거보단 subNav 그리고 XHTML마크업의 경우 대소문자를 구분하지만 HTML마크업의 경우 대소문자를 구별하지않는다. 2009. 8. 29. CSS 지정순위 CSS 지정순위 선택자 지정순위 10진수환산값 style=" " 태그에 직접 삽입지정 1000 1000 #content #content{} 아이디 아이디 0200 200 #content .content{} 아이디 클래스 0110 110 div#content{} 태그지정 아이디 0101 101 #content{} 아이디 0100 100 div .content .comment{} 태그지정 클래스클래스 0021 21 div. content{} 태그지정 클래스 0011 11 div p{} 태그 태그 0002 2 p{} 태그 0001 1 지정순위가 높을수록 우선시 된다. 기본적으로 아이디>클래스>태그 예로 html이 다음과 같고 테스트 CSS p{ font-color:#ffcccc;} #Content{ font-.. 2009. 8. 29. 이전 1 ··· 17 18 19 20 21 22 23 다음
