본문 바로가기

css82

HTMl5 레이아웃 만들기 HTMl5 간단한 레이아웃 만들기 html5를 이용해서 간단한 레이아웃을 만들어보자 먼저 생각하는 레이아웃의 모양은 다음과 같다. 각 엘리먼트와 그 크기는 그림과 같이 할것이다 html5 소스 위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다. 소스는 다음과 같다. html5 simple test header nav link link link aside section article footer 위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다. CSS로 완성 이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을.. 2010. 2. 20.
웹표준 간단한 폼(form) 양식 웹표준 간단한 폼(form) 양식 리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다. 개인정보입력 form form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다. fieldset fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다. legend legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다. label label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다. input input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가.. 2010. 2. 18.
Ajax란 무엇인가? Ajax의 정의 Ajax란 무엇인가? jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자. Ajax 의 정의 초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다. 비동기(Asynchronous) 자바스크립트(javascript) 그리고 and XML 이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다. 위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운.. 2009. 12. 8.
jQuery hide, show ,fade 애니메이션 메소드 jQuery hide, show ,fadeIn, fadeOut 메소드 엘리먼트를 간단히 숨기고,보여주기는 css로도 충분히 가능하다.또 jQuery에서 css()메소드로도 마찬가지다.이에대한 간단한 예부터 보자 어쩌고 저쩌고 위 엘리먼트를 단순히 보이게 안보이게 할려면 다음과 같이 하면 된다. p{display:none;} /*안보임*/ p{display:block;} /*블록 스타일로 보임*/ jQuery에서 css메소드를 이용한것을 보자 #('p').css('display','block'); 마지막으로 하나더 있으니 css()메소드가 아닌 hide(), show()를 이용하는것이다. 각 명칭대로 보여주기, 감추기 기능이다.예제를 보자 $('p').show();//보여줌 $('p').hide();//감.. 2009. 10. 25.
CSS dispay 프로퍼티 CSS dispay 프로퍼티 dispay 프로퍼티는 엘리먼트를 어떻게 보여주냐(또는 어떤 타입으로 참조:엘리먼트의 분류)를 정하는 css 프로퍼티이다. 가장대표적인 값으로 none, inline, block가 있다.이세가지부터 간단히 보자 none 영문 뜻그대로다. 보이지 않게 한다.엘리먼트가 화면에 보이지않는다. 아무것도 안보임ㅠㅠ p{display:none;} inline 인라인(inline) 엘리먼트처럼 보여준다. 즉 한줄로 보여주게 된다.예제를 보자.가장대표적으로 li의경우 사용되는 경우가 많다. 한줄로 나란히 줄서기 li{display:inline;} 이러면한줄로 나란히 줄서기이렇게 한줄로 화면에 표시될것이다 block 앞서설명한 inline과 반대로 블록(block) 엘리먼트처럼 보여준다 아래.. 2009. 10. 25.
jQuery를 이용한 CSS 효과 jQuery CSS 메소드 css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자 CSS 지정 css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자 #example{backgound: #fcc;} /*선택자는 아이디인 #example 그리고 프로처티는 배경인backgound 마지막으로 그배경색은 #fcc로 한것*/ 이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자 jQuery css()메소드 jQuery에서 사용해보자 방법은 다음과 같다. .css('프로퍼티' ,'값') 만약 여.. 2009. 10. 24.
jQuery css 선택자에 접근 jQuery에서 css 선택자 접근하기 앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자. 선택자CSSjquery 엘리먼트p$('p') ID(아이디)#name$('#name') class(클래스).name$('.name') 되돌아보기 :: getElementByTagName,getElementById..... jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i 2009. 10. 15.
CSS 텍스트 그림자 효과 (text-shadow in css3) CSS 텍스트 그림자 효과(text-shadow in css3) CSS3에서는 포토샵의 그림자효과 같은 텍스트에 여러 효과를 주는 기능이 추가되었다.추가된 기능들을 보자 텍스트 그림자(Text-shadow) W3C에 정의 참조 흔히 우리는 포토샵에서 그림자효과로 drop shadow를 사용한다. 텍스트에 그림자를두는 건데 css3로 표현 가능하다.아래와같은 효과 이에대한 코드를 보자(사파리3.0이상,파폭3.1이상,오페라9.5에서 적용된다) 예제를 통해 이그림과 같은 효과를 볼 것이다 Text-shadow css코드 가로,세로, 번짐효과, 그림자색깔, 이순서다. p{text-shadow: 2px 2px 1px #000;} 위와 같은 경우 그림자가 가로 2px서로 2px 번짐효과 2px 이렇게일어난다.그리고.. 2009. 10. 12.
CSS 고급 레이아웃 CSS 고급 레이아웃 레이아웃을 지정하는데 있어 플로트나 포지션을 지정할경우 상당히 귀찮아진다. 마진 패딩을 고려하고 일일이 지정하는것은 참귀찮은 일이다. css3에서는 원하는 모양을 단번에 나올수 있게 쉽게할수 있는 레이아웃모듈이 개발되고 있다. (월드와이드 맵고급레이아웃 모듈 http://www.w3.org/TR/css3-layout/.) 아래그림처럼 레이아웃을 꾸민다고 생각해보자 플로트나 포지션을 이용하면 아래위를 나누고 각각배치할 구역별위치를 지정해야한다. 이걸 단번에 지정하는방법이 개발되고 있다. 예제소스를보자 a b c d e f #box { display: "a b c", "d e f "; }/*위그림처럼 display 값의 위치를 지정해준모습 코드*/ div#one{position :a} .. 2009. 9. 27.
CSS 다단 레이아웃(css3 column) CSS 다단 레이아웃 여러레이아웃을 별도로 나누는것은 일일이 지정하기귀찮은 법이다.특히 같은 크기의 레이아웃으로 나눌떄는 귀찮다.다음그림과 같은경우를 보면 이걸 일일이 div태그로 정하고 class 로 이름을 달아주고 나눠줘여한다.코드는 다음과 같다. 첫번째 단입니다. 두번째 단입니다. 세번째 단입니다. columns이라고 일일이 클래스를 지정해주었다. #contents{ width:800px;} #contents div{ float:left; border-right:2px solid #000;} .columns{ padding:10px; width:200px;} CSS3 columns 이용 첫번째 단입니다. 두번째 단입니다. 세번째 단입니다. #colcontents{ width:800px; column.. 2009. 9. 25.

티스토리툴바