박스 모델이란 <div>는 물론, 목록을 만들어 주는 <ul>, <li>, 테이블을 만들기 위한 <table>, <tr> 태그로 이루어진 사각 형태를 말하며 여기에 적용할 수 있는 스타일에는 여백을 위한 margin과 테두리의 두께와 색상을 위한 border와 내용과 테두리 사이의 여백을 위한 padding이 있습니다.
테두리의 종류를 지정하려면 다음과 같은 CSS 속성을 사용합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| border-width | 테두리의 두께 지정 thin, medium, thick, 픽셀 |
전체 테두리의 두께를 지정 |
| border-left-width | 테두리 왼쪽의 두께를 지정 | |
| border-right-width | 테두리 오른쪽의 두께를 지정 | |
| border-top-width | 테두리 위쪽의 두께를 지정 | |
| border-bottom-width | 테두리 아래쪽의 두께를 지정 | |
| bordre-color | 테두리의 색상 지정 색이름, RGB값 |
전체 테두리의 색상을 지정 |
| bordre-left-color | 테두리 왼쪽의 색상을 지정 | |
| border-right-color | 테두리 오른쪽의 색상을 지정 | |
| border-top-color | 테두리 위쪽의 색상을 지정 | |
| border-bottom-color | 테두리 아래쪽의 색상을 지정 | |
| border-style | 테두리의 모양 지정. none, dotted, dashed, solid, double, groove, ridge, inset, outset |
전체 테두리의 모양을 지정 |
| bordre-left-style | 테두리 왼쪽의 모양을 지정 | |
| border-right-style | 테두리 오른쪽의 모양을 지정 | |
| border-top-style | 테두리 위쪽의 모양을 지정 | |
| border-bottom-style | 테두리 아래쪽의 모양을 지정 |
테이블의 각 칸 사이의 간격이나 칸과 내용 사이의 간격을 지정하기 위한 속성에 대해서 살펴보도록 합니다. margin속성은 외부 여백을 지정하기 위한 속성이고, padding은 내부 여백을 지정하기 위한 속성입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| margin | 박스(블럭,문단)의 경계선과 외부의 다른 요소의 간격 조절 대표 속성 값-길이, 퍼센트, auto |
모든 방향의 여백을 지정 |
| margin-left | 왼쪽의 여백을 지정 | |
| margin-right | 오른쪽의 여백을 지정 | |
| margin-top | 위쪽의 여백을 지정 | |
| margin-bottom | 아래쪽의 여백을 지정 | |
| padding | 박스(블럭,문단)의 경계선과 내부의 콘텐츠의 간격 조절 대표 속성 값-길이, 퍼센트 |
모든 방향의 여백을 지정 |
| padding-left | 왼쪽의 여백을 지정 | |
| padding-right | 오른쪽의 여백을 지정 | |
| padding-top | 위쪽의 여백을 지정 | |
| padding-bottom | 아래쪽의 여백을 지정 |
클라우드형 애플리케이션 개발자는 게임기나 스마트폰, 울트라 모바일 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 목록에서 원하는 스타일과 각 옵션들을
선택하면 미리보기와 함께 원하는 소스 코드를 얻을 수 있습니다.