WEB_TECH/CSS2 썸네일형 리스트형 CSS image sprite CSS로 멋진 기능을 만들수 있습니다.게임에서나 사용될 법한 스프라이트를 CSS를 사용해서 구현 할 수 있습니다.CSS로 이미지 스프라이트를 구현해 보도록 하겠습니다. 먼저 다음의 스프라이트가 모여있는 화면을 만듭니다. 이제 각 이미지들을 마스크를 씌워서 롤오버까지 구현한 코드를 작성하면 됩니다.각 칸의 크기는 100px 입니다. 노란박스에 롤오버 하면 다음과 같이 오버된 이미지가 올라옵니다.정말 신기하면서도 재미있는 예제입니다. 더보기 CSS로 정렬하기를 배워봅시다 정렬을 하기위해서는 Block요소의 태그에서 적용됩니다., , 등의 태그에서 쓸 수 있습니다.주의 : 인라인태그에서는 적용되지 않습니다. 1. margin:auto를 이용한 중앙정렬문단을 중앙 정렬하려면 margin:auto 속성을 사용합니다.그런데 이 방법은 도큐타입이 정해지지 않았거나 ie8이하의 브라우저에서는 작동하지 않습니다.왼쪽과 오른쪽 여백을 auto로 설정해도 같은 결과가 나옵니다.margin-left:auto;margin-right:auto; [참고소스] In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.'Whenever you.. 더보기 CSS 박스모델이 무엇인가요? CSS Box 모델이란? 모든 HTML 요소들은 상자로 표현할 수 있습니다.상자는 용도에 따라 다르게 쓰이지만 공통적으로 쓰입니다.박스모델이라는 것은 HTML요소를 감싸는 상자가 있는데 용도에 상관없이 공통적으로 사용되어지는 요소들을 다루는 방법에 대한 모델입니다.먼저 여백(margin), 테두리(border), 패딩(padding), 실제내용이 들어가는 컨텐츠(content)가 무엇인지 알아야 합니다. 이미지 참고 : w3schools.com 이 그림을 참고하면 알겠지만 margin : 보더 주변 바깥지역입니다. 배경색이 없는 투명입니다.border : 패팅과 내용의 주위를 두르는 가는테두리입니다.padding : 패딩은 컨텐츠의 주위공간을 지웁니다. 배경 색상에 의해 영향을 받습니다. 다음을 보면 w.. 더보기 브라우저 사이즈만큼 이미지 늘어나게 만들기 브라우저의 다큐먼트 사이즈만큼 이미지를 늘어나게 만들 수 있습니다.어떠한 해상도에도 대응이 되니까은은하게 배경으로 깔아주면 효과가 아주 좋겠죠. 다음 코드를 실행시켜 봅시다. 200X200사이즈의 이미지를 불러왔는데 브라우저를 잡아당기면 아래 그림처럼 비율에 상관없이 화면에 꽉차는 것을 볼 수 있습니다. 더보기 레이아웃 예제 모은 사이트 경로 http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html 이 사이트에서는 세련된 디자인의 깔끔한 CSS코드를 얻을 수 있습니다. http://www.pmob.co.uk/temp/3colfixedtest_4.htm 이 사이트에서는 다양한 레이아웃 예제를 좌측메뉴로 선택하여 확인할 수 있습니다. 더보기 CSS 기본문법 CSS는 정말 많은 것을 할 수 있게 해 줍니다.CSS를 사용하여 많은 웹페이지들의 디자인을 한꺼번에 컨트롤 할 수 있습니다.문법을 살펴볼까요? CSS 기본 문법 CSS 표기는 크게 두 파트로 나눕니다.하나는 selector라는 이름이구요.다른 하나는 한개 이상의 Declaration들입니다.아래 그림을 보면 이해가 쉽습니다. selector는 우리가 스타일을 넣기 원하는 HTML엘리먼트 입니다.그리고 각각의 선언(declaration)은 속성(property)과 값(value)으로 구성되어 있습니다.속성은 우리가 바꾸기 원하는 스타일attribute입니다.속성은 값을 가지고 있습니다. CSS 예제 CSS 선언은 항상 세미콜론으로 끝납니다.하나의 선언 그룹은 { } 으로 싸여 있습니다. p {color:.. 더보기 간단한 레이아웃 예제 이렇게 DIV태그에 각각의 id값을 정하고 float속성을 사용하여 페이지 레이아웃을 구성할 수 있습니다.테이블로 하는 것과는 다릅니다.이렇게 해야 문서 자체의 의도와 맞고 구조와 디자인을 분리할 수 있습니다. 심플한 레이 아웃 메뉴 HTML5 CSS3 Javascript 내용은 여기에 copy all right reserved by ME. clear:both속성은 float:left 속성을 초기화 시켜주는 것이라고 보면 됩니다. 이 코드를 저장한 후 브라우저에서 보면 이렇게 나옵니다. CSS파일만 따로 떼어낼 수 있습니다. 더보기 이전 1 다음
