모바일 웹 페이지- wrap 태그-> body 태그에 스타일을 적용하는 것이 위험할 지도 모른다는 개발자 혹은, 서버와 관련된 내용 중 레이아웃 페이지 또는 마스터 페이지를 사용할 때 코드 정리하고자 사용, 스마트폰 웹 브라우저는 ~ 선택자를 사용할 수 없기 때문에 #wrap 태그 만들고 선택자 사용- 스프라이트 이미지http://csssprites.com/ CSS의 Sprites 제작 사이트#main_header > a.left{ background: url('sprites.png'); background-position: 0px 0px; text-indent: -99999px; width: 62px; left: 5px; top: 7px; }-> 이미지를 1개의 파일에 뭉쳐놓으면서 웹 페이지 요청 시간..

하이브리드 애플리케이션-> HTML5를 사용해 한 번만 개발하면 모든 운영체제에서 샐항할 수 있다는 장점, 게임을 제외한 대부분의 애플리케이션 제작 가능 모바일 웹 페이지- 자바 스크립트, jQuery Mobile, Sencha Touch 공부- 주의 사항1. 대부분 overflow 속성을 사용해 scroll 키워드를 넣을 수 없다.-> 스크롤이 구현되어 있는 부분은 자바스크립트로 제작한 것2. 상태 선택잘르 사용할 때 주의-> 터치를 사용하므로 화면 누르는 순간 바로 클릭 적용, hover 상태 선택자와 active 상태 선택자를 사용할 때 주의3. 동위 선택자에 제한-> 대부분의 스마트폰 웹 브라우저는 ~ 선택자를 지원하지 않습니다.4. 안드로이드 2, 3 버전의 웹 브라우저는 CSS3 그레이디언트 ..

웹 페이지 레이아웃- 본문 구성 #main_section > article.main_article{ margin-bottom: 10px; padding: 20px; border: 1px solid black; } Main Section- 사이드 탭바 구성/* 첫번째 탭*/ input:nth-of-type(1) {display: none;} // input 태그는 보이지 않게 만든다. input:nth-of-type(1) ~ div:nth-of-type(1){display: none;} // input 태그가 체크되어 있을 경우에는 뒤에 위치하는 div 태그를 보이게 만듭니다. input:nth-of-type(1):checked ~ div:nth-of-type(1){display: block;} // in..

웹 페이지 레이아웃- 일반적인 웹 페이지 구성 요소-- Header : 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 링크) 등으로 구성-- Navigation : 링크 중에서 중요도가 높은 링클르 체계적으로 구성해 놓은 것, 링크를 별도로 모아둔 영역-- Aside : 배너, 용어 설명, 관련 상품등 관련성이 적거나 없는 내용으로 구성-- Section : 관련있는 내용을 요소별로 묶어 표시, 섹션마다 나름의 제목 체계를 가질 수 있다. -- Footer : 바닥 영역 또는 꼬리말, 저작권, 연락정보 등 본문과 관련성 있지만 본문에 담기 어려운 내용 Header Navigation Aside Section Footer - 레이아웃 구분1. 웹페이질르 구상2. 웹페이지의 구성 ..

벤더 프리픽스- explore : '-ms-'transition-duration : 1s;- chrome: '-webkit-'transition-duration : 1s;- firefox : '-moz-'transition-duration : 1s;- safari : '-webkit-'transition-duration : 1s;- o : '-o-'transition-duration : 1s; - Prefix Free 플러그인 leaverou.github.io/prefixfree- 폴더 구성->.html, prefixfree.min.js, StyleSheet.css- HTML 페이지 기본 구성 -> 벤더 프릭스를 사용하지 않아도 되게 만들어 주는 라이브러리-> 공급 업체 접두사, 각 브라우저 마다 실험적..

위치 속성- position-- static : 태그가 위에서 아래로 순서대로 배치.box{ position:static }-- relative : 초기 위치 상태에서 상하좌우로 위치 이동.box{ position:relative }-- absolute : 절대 위치 좌표를 설정.box{ position:absolute }-- fixed : 화면을 기준으로 절대 위치 좌표 설정.box{ position:fixed }- z-index.box{position:absolute; z-index: 100}-> 숫자가 클 수록 앞에 위치- 위치 속성 관련 공식-> position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지 하지 않음 => 문제 발생 1. h1 태그 2개가 붙어 있다.(div ..