img { max-width: 100%; height: auto; }

초 간단 스타일 적용하기

Home Search

웹 페이지 설계에 있어서는 전체 웹페이지의 디자인을 통일성 있게 작성하는 것은 무엇보다도 중요합니다.

블루웹 게시판 설치하기

스타일 시트 선언 구문

스타일 시트를 사용하기 위해서는 스타일을 선언해서 설정해야 합니다.
FONT { COLOR : BLUE; }
선택자
스타일은 적용 대상이 있어야 하는데 선택자가 바로 그 대상입니다.
속성
선택자의 스타일 중 변경하고자 하는 속성입니다.

스타일에 여러 가지 속성을 설정하기

FONT가 선택자이기에 스타일 적용할 대상이 되고, COLOR가 변경하고자 하는 속성 RED가 COLOR에 설정할 값입니다. 여러 가지 속성을 지정하고 싶을 때에는 각 쌍들을 구분하기 위해 세미콜론(;)을 기술합니다.

embedding방식으로 스타일 설정하기

스타일을 설정하기 위해서는 HTML 문서의 HEAD태그에 STYLE태그를 삽입합니다. STYLE과 /STYLE태그 사이에 스타일을 설정하는 내용을 기술합니다. 이때 주의할 점은 TYPE속성에 "test/css"를 기술해야 합니다.

link방식으로 스타일 설정하여 웹 사이트 통일감 주기

외부 파일 형태로 스타일 시트를 정의.
<link rel="stylesheet" type="text/css" href="경로명 포함한_파일이름.css">

import 방식으로 스타일 설정하기

@import url("css.css");

inline 방식으로 스타일 설정하기

inline 방식은 HTML 태그에 직접 스타일을 설정하는 방법입니다.

스타일 시트 선언 방식
종류 설명
embedding(내부 방식) <head>태그에 스타일 설정을 삽입하는 형식
link(외부 방식) 외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식
inline(인라인 방식) HTML 문서의 내부에 직접 스타일을 설정하는 형식

예 : FONT style= "COLOR:BLUE; FONT-SIZE:10pt; FONT-FAMILY:굴림체"

스타일시트의 필요성

1.HTML로 구현할 수 있는 표현과 기능의 한계를 넘을 수 있습니다.

2.웹페이지 전체 디자인을 보다 쉽고 통일성 있게 관리할 수 있도록 합니다.

3.홈페이지를 개성 있게 디자인할 수 있습니다.

CSS 표준규격은, W3C(World Wide Consortium)에서 정합니다. 홈페이지는 www.w3.org입니다.

※아이디어

아이디어

HTML5 캔버스를 이용한 그림, 도형, 애니메이션, 게임.

HTML5 canvas를 이용한 게임

HTML5 canvas 게임

※교육,광고,동향

교육, 광고, 동향

클라우드형 애플리케이션 개발자는 게임기나 스마트폰, 울트라 모바일 PC, 넷북, 노트북 컴퓨터, 데스크톱 컴퓨터 같은 단말기는 물론, 앞으로 등장할 각종 단말기에 대응하는 서비스를 제공해야 할 것이다

교육

교육문의 및 신청

반응형웹 교육 - 연락주세요

2012.9.10(월) 2hr
장소 : 토즈 (스터디 모임 공간) 레슨 : 레슨올(1대1 레슨), 레슨비 3만원/1hr, 6만원/3hr)

광고

동향

최신동향

최신 버전

추천사이트

내 브라우저는 HTML5를 얼마나 지원할까 - THE HTML5 TEST
HTML5의 표준 규약이 완전히 정립되지 않은 상태지만 브라우저 업체에서는 되도록 HTML5를 지원하려고 하고 있습니다. 지금으로선 브라우저마다 HTML5를 지원하는 내용이나 정도가 다른데, 이 사이트에 접속해 보면 현재 브라우저가 HTML5를 얼마나 지원하는지 300점 만점 기준으로 점수를 매겨 보여줍니다.또한 HTML5 각 요소에 대해서도 지원하는지 안 하는지를 정확하게 알려줍니다.

HTML5의 전반적인 예제를 정리해 놓은 사이트 - HTML5 ROCKS
크롬 브라우저를 만든 구글에서 HTML5를 소개하고 개발자들에게 도움을 주기 위해 만든 사이트입니다. Presentation 메뉴에서는 HTML5를 정리해 놓은 프리젠테이션을 볼 수 있고, Playground에서는 HTML5의 주요 특징들을 각각 소스와 결과 화면으로 보여줍니다. Studio 메뉴를 이용하면 HTML5를 이용해 이런 게 가능할까 싶은 멋진 예제들을 만날 수 있습니다. HTML5를 공부하고 싶다는 생각을 갖게 해주는 곳입니다.

HTML5로 만든 사이트 모음
제작자가 밝힌 이 사이트의 제작 목적은 HTML5를 사용한 사이트를 보여줌으로서 많은 사람들이 사이트를 만들 때 HTML5 표준을 따르고 있는지 알리고, 더불어 어떤 방법을 사용하고 있는지 사람들이 살펴볼 수 있게 한다는 것.

HTML5로 만든 베스트 사이트 소개
HTML5로 만들어진 사이트를 모아서 보여주는 사이트. 사이트들을 카테고리별로 구분해 놓고 다시 주제별로 구분해 놓았기 때문에 자신이 관심 있는 분야의 사이트만 찾아서 볼 수도 있고, 오늘 등록된 사이트부터 최근 석 달 안에 등록된 사이트까지 등록된 시간대별로 구분해서 볼 수도 있습니다.

동영상 콘트롤러를 지원하는 HTML5를 체험할 수 있는 사이트
플레시플레이어 없이도 웹 페이지 안에서 자연스럽게 동영상이 재생되는 사이트. 필요할 경우 콘트롤러를 동영상에 함께 표시할 수 있어서 동영상을 자유롭게 제어할 수 있습니다.

HTML5를 이용해 사용자 움직임에 반응하는 동영상을 적용한 사이트
HTML5의 캔버스(Canvas)요소를 함께 사용할 경우 동영상에 사용자 동작을 추가해서 좀 더 재미있는 효과를 만들수도 있음. 본 사이트는 동영상 화면을 클릭할 때 마다 화면이 부서졌다가 다시 원래 화면으로 되돌아 갑니다.

인터넷 익스플로러 테스트 드라이브
마이크로소프트에서도 IE9 출시와 함께 HTML5를 지원하기 시작했습니다.IE9 이상에서 지원하는 다양한 HTML5 데모 애플리케이션과 웹 페이지를 만날 수 있습니다. 개발자를 위한 다양한 자료들도 함께 볼 수 있어 HTML5를 공부하는 사람들에게 유용한 사이트 입니다.

사파리에서 지원하는 HTML5 데모 사이트- Safari Technology Demos
애플에서 제공하는 HTML5 데모 사이트로, HTML5와 CSS3, 자바스크립트를 이용한 화려하고 멋진 예제들이 많습니다. 이곳의 예제들을 보면 HTML5의 매력에 빠져들지 않을 수 없을 것입니다. 다만, 다른 브라우저에서는 볼 수 없고 애플의 사파리 브라우저에서만 확인할 수 있습니다.

테두리 이미지 코드를 만들어주는 - border-image generator
테두리 이미지를 사용하면 화면을 좀더 멋스럽게 꾸밀 수 있습니다. 하지만 처음에 그 기능을 익히기가 쉽지 않습니다. 테두리에 이미지를 사용하고 싶지만 사용하기 어려워 망설이고 있었다면 border-image generator 사이트를 이용해 보세요. 이미지 주소를 지정한 후 슬라이드를 이용해 네 방향의 옵션만 지정하면 preview란에 자동으로 소스가 만들어집니다. 단, 테두리에 사용할 이미지는 웹에 올려진 이미지여야 합니다.

여러 브라우저에서 사용되는 CSS3 코드를 보여주는 - CSS 3.0 MAKER
CSS3 소스 코드를 만들 때 가장 신경 쓰이는 것이 각 브라우저별로 다르게 사용하는 속성들입니다. CSS 3.0 MAKER를 이용하면 크로스 브라우저 소스 코드를 손쉽게 만들 수 있습니다. CSS3 Style 목록에서 원하는 스타일과 각 옵션들을 선택하면 미리보기와 함께 원하는 소스 코드를 얻을 수 있습니다.

More in this section

© 2011-12 The jQuery Foundation