목록All (47)
interactive
*소스코드 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 를 이용해 텍스트의 크기를..
1.모든 속성은 영문 소문자자로 작성한다. 잘못된 예 올바른 예 .class{Font-Family:AppleGothic} .class{font-family:AppleGothic} 2. 따옴표 사용 범위공백이 포함된 폰트명, 핚글 폰트명, 문자열 데이터 타입, filter 속성의 파라미터값은 작은따옴표(' ')로 감싸며,@charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다. 그 외의 경우에는 따옴표를 사용하지 않는다. filter 속성의 파라미터값에 따옴표를 사용하는 것은 선택사항이다.url 데이터 타입에는 작은 따옴표를 사용하지 않는다. - 따옴표 사용 예 잘못된 예 올바른 예 font-family:돋움 font-family:'돋움' filter:progid:DXImageTransform.M..
1. 레이아웃 예약어 • 레이아웃에는 다음 표에 예약된 id만 사용한다. 예약어 범위 #wrap 페이지 전체 영역 #header 머리글 영역 #container 본문 영역 #ct 본문 영역(모바일) #content 주요 콘텐츠 영억 #footer 바닥글 영역 2. 팝업 레이아웃 예약어• 팝업 문서의 레이아웃 지정 범위는 동일하다. • 레이아웃 예약어 앞에 'pop_'를 조합하여 사용한다. 예약어범위 #pop_wrap 페이지 전체 영역 #pop_header 머리글 영역 #pop_container 본문 영역 #pop_content 주요 콘텐츠 영억 #pop_footer 바닥글 영역 3. 레이아웃 네이밍 조합• 레이아웃 id의 네이밍은 조합하여 사용할 수 없다.• 레이아웃에 디자인 속성을 추가/변경하려면 cl..
1. box-shadow의 간단한 문법box-shadow:[inset] (오른쪽위치) (아래위치) (블러) (색상); 2. box-shadow의 지원 브라우저internet Explorer : 버전9만 지원firefox, chrome, safari, opera : yes 미리보기 1 .box-shadow01 { box-shadow:5px 5px 10px #cccccc; } .box-shadow02 { box-shadow:-5px 5px 0 #cccccc; } 미리보기 2 .box-shadow03 { box-shadow:inset 5px 5px 10px #b55a84; } .box-shadow04 { box-shadow:inset 0 0 10px #830d43; } 3. text-shadow 텍스트에 그림..
liner-gradient background:-webkit-gradient(linear,left top, left bottom,color-stop(0,#a6cd2f),color-stop(1,#6e9102)); background:-moz-linear-gradient(top,#a6cd2f,#6e9102); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6cd2f', EndColorStr='#6e9102', GradientType=0); 1. type (유형)type 에는 linear(선형) 과 radial(방사형 또는 원형) 중에서 선택할 수 있다. 2. 시작위치시작위치는 left top 식으로 사용해도 되고, 10 20 등과 같..