목록Design (31)
interactive
CSS를 사용해서 특정 요소를 투명하게 할 땐 주로 두 가지 방법을 사용한다. 첫째가 opacity 속성이고 둘째가 rgba다. 1. opacityopacity는 지정한 요소 전체를 투명하게 하는 속성이다.속성값은 0~1 까지 사용하며, 0에 가까울 수록 투명정도가 더 크다.ex. opacity:0.3 또는 opacity:.3 - 앞에 소수점 0은 생략가능하다. ※ ie8이하 버전에서는 opacity가 지원되지 않아서 filter 사용하여야 한다. filter:alpha(opacity:'30')※ opacity 값을 준 영역안은 모두 투명값을 가진다. 2. rgbargba는 rgb 형식의 색 표현에 투명도를 표현하는 alpha 값을 추가한 것으로, 마지막에 오는 alpha 값에 의해 투명도가 결정된다.속..
background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다.값은 px와 % 같은 단위로 쓸 수 있고, auto, cover, contain과 같은 키워드를 쓸 수도 있다. *background-size의 지원 브라우저internet Explorer : 버전9만 지원firefox, chrome, safari, opera : yes background-size: 가로크기 세로크기; 기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기대로 처리한다. 1. background-size:x px y px;가로 크기와 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정 된다 2. bac..
HTML5 Canvas 기본형태
1. HTML5 Canvas 소개canvas : 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역.*즉시모드(immediate mode) : 캔버스가가 화면 위에 픽셀을 그리는 한가지 방법이다.코드로 비트맵 화면을 바로 그린다는 의미에서 즉시모드라고 한다.이미 구현된 객체를 이용하는게 아니라, 코드로 필요한 객체를 생성하고나서 변경 할 수 있다는 의미. 2. HTML5 doctype 태그는 웹 브라우저가 페이지를 표준모드로 랜더링하도록 지정한다. W3C의 HTML5 명세서를보면 HTML5 문서에는 반드시 태그를 표기해야한다. 같은 HTML 문서를 두고 브라우저마다 제멋대로 랜더링하는 문제를 피하기 위해 태그를 쓰는것이다.이 태그는 반드시 HTML 문서의 제일 첫 줄에 있어야 한다. 3. Canvas 요..
*소스코드 html5 레이아웃 제작하기ek studyheader taghgroup tagnav tagarticle tagsection tagaside tagfooter tagheader tag소개 또는 내비게이션 그룹을 나타냅니다.hgroup tag섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때(단계를 가질 때, 예를 들어 부제목이나 태그 영역tagline 등)h1~h6 요소들을 그룹짓기 위해 사용됩니다.문서에서 중요한 뼈대가 어떤것인지를 쉽게 알 수 있도록 합니다.nav tag다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.(웹사이트나 페이지내 메뉴 영역을 정의)article tag문서나 페이지, 또는 사이트의 독..
HTML5 기본 DTD lang 애트리뷰트는 User Agent가 언어를 올바로 해석할 수 있게 도와주며, 검색과 음성 장치에 활용 기본 인코딩은 utf-8을 원칙으로 함. Menu | System페이지(메뉴)명, 시스템명 순으로 작성. CSS 스타일시트 링크. HTML5의 새로운 요소들을 인식하지 못하는 브라우저에서 block 요소로 표시되도록 하는 정의. 스크립트 대신 CSS에 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}을 추가해도 무방함.
HTML5로 제작된 인상적인 사이트들입니다.플래시 같은 플러그인이 없어도 역동적인 표현이 가능하고 가볍습니다.익스플로러에선 작동하지 않을수도 있으니 구글크롬, 사파리, 파이어폭스 브라우저로 보시는것을 추천합니다. 메뉴에 따른 세로스크롤과 움직임이 있는 사이트 http://pitch.csspiffle.com Adobe에서 제작한 테스트용 HTML5 사이트 http://beta.theexpressiveweb.com 마우스 오버시 모션효과 이용한 사이트 http://hitmo-studio.com/team.html 화살표를 이용한 가로스크롤 모션과 배너의 움직임을 표현한 사이트 http://kyan.com/ 칼라별로 배경화면이 변하며 모션 처리 http://ice-phone.com 화살표를 이용한 가로스크롤 모..
CSS3에서는 border-radius 속성이 추가 되었다. 이 속성은 테두리의 모서리를 둥글게 만들어 준다.border-radius를 이용하면 복잡한 코드나 이미지를 사용하지 않고도 쉽게 라운딩처리를 원하는 형태로 할 수 있다. 사용하기전 지원 브라우저를 확인해보자. * border-radius 브라우저 버전별 확인 지원지원 = 지원 지원안됨 = 지원되지 않음 부분지원 = 부분지원 IE Firefox Chrome Safari Opera ios Safari Opera Mini Android Browser Blackberry Browser 2.1 -webkit- 3.6 -moz- 3.2 -webkit- 2.2 7.0 12.0 19.0 4.0-4.1 2.3 8.0 13.0 20.0 5.1 4.2-4.3 3...
폼 컨트롤 엘리먼트를 링크업할 때 , , 엘리먼트를 다음과 같이 선언한다. 단, 필요에 따라 개별적으로 사용할 수 있다. 1. 엘리먼트의 자식 노드로 선언하여 폰 컨트롤 엘리먼트들을 그루핑하기 위해 선언한다. 2. 폰 컨트롤 그룹인 의 자식 엘리먼트로서 폰 컨트롤 엘리먼트들의 그룹 이름을 표현하기 위해 선언한다. 개인정보 3. 엘리먼트, title 애트리뷰트, alt 애트리뷰트를 통해 스크린 리더 사용자는 주변 맥락에 대한 이해 없이 각 엘리먼트에 독립적으로 접근해도 폰을 이해할 수 있다. 아이디
1. - webkit-tap-highlight-color 탭, 링크, 포커스가 맞춰졌을때 나타나는 색상을 결정한다. 아이폰에선 사각형 박스형태로 표시되고, 안드로이드에선 주황색 테두리가 표시된다.이 포커스를 안보이게 하기 위해 body{-webkit-tap-highlight-color:rgba(0,0,0 0);}/* 아이폰 에서는 */body{-webkit-tap-highlight-color:transparent;} 을 적용하면 조금더 앱스러운 웹페이지를 만들 수 있다. 2. -webkit-text-size-adjust 페이지가 렌덩릴 될때 모바일 브라우져는 텍스트 block의 width에 맞춰 텍스트의 크기를 자동으로 조절한다.이때 -webkit-text-size-adjust 를 이용해 텍스트의 크기를..