본문 바로가기
반응형

CSS9

하이차트(highcharts) 기본 구조 ●자바스크립트와 html로 만든 차트 솔루션이다. 비상업용으로 사용할땐 무료이고 상업적으로 사용할땐 비용이 든다.(최소 90달러이상) http://www.highcharts.com ●예제 2013. 11. 12.
부트스트랩2.3 틀 만들기 ●기본격자 - row안에 span을 추가한다. span*의 합은 항상 행마다 12가 되야한다.(열안의 열인 경우 감싼 열 숫자만큼 되야한다) ●열 위치이동 - offset*을 사용한다. ●열안의 열 - span* 안에 새로운 row,span*을 추가한다. 안의 열들을 함하면 감싸는 열의 숫자가 되야한다. ●유동 격자 - 열의 폭을 고정정인 값대신 비율을 사용한다. - 유동 격자 열안의 열인 경우 안의 열의 합은 항상 12가 되야한다. ●유동레이아웃 - container-fluid를 사용한다. 2013. 8. 28.
부트스트랩2.3 시작 ●부트스트랩 - css, 자바스크립트에 관한 프레임워크이다. - http://maczniak.github.io/bootstrap/index.html 에 들어가서 부트스트랩 파일을 다운받아 사용한다. - 부트스트랩은 html5 로 작성해야한다. html5는 문서 앞에 '' 를 붙인다. (html4에서는 ' 2013. 8. 28.
html 웹표준 로고 넣기 ●로고는 h1태그를 써서 그 안에 넣어준다. h1은 페이지 내에서 가장 중요한 것을 나타내는 태그이다. ex) 2012. 5. 31.
html <div>로 메뉴(내비게이션) 만들기2 ●마우스 롤 오버 태그, 속성 ●웹표준 준수 위해서 이미지의 alt속성을 꼭 넣어주고, 처럼 태그 마지막 부분을 꼭 막아줘야한다. 별 의미 없는 그냥 화면을 꾸미기 위한 이미지의 경우는 alt속성에 값을 넣지 않고 alt=""처럼 빈 속성값을 설정한다. ●이미지 링크 테두리 없애기 - 이미지에 링크를 걸면 테두리가 생긴다. 개별적으로 border값을 설정하는 것 보다 css를 이용하여 테두리를 제거한다. img {border:"0"} ●가로 메뉴 예 2012. 5. 30.
html <div>로 웹사이트 레이아웃 구성하기2 ●웹표준 레이아웃 a b c d ●#wrap{margin:0 auto; width:900px;} - table에서는 align="center"로 중앙 정렬을 했지만, 웹표준에서는 따로 중앙정렬은 없다. 그래서 중앙정렬을 하려면 가장 바깥 div에 'margin:0 auto'를 선언해 준다. 'margin:0'은 상하 0px라는 뜻이고 'auto'는 좌우를 중앙에 위치하게 한다. ●큰 div(wrap,header,sidebar,content,footer 등)를 만들고 그 안에 세부적인 div를 만든다. 큰 div는 height값을 주지 않고 세부적인 div에 height를 준다. ●width, margin, padding, height 수치를 정확히 계산해서 레이아웃을 만든다. 만들 레이아웃 디자인을 프린.. 2012. 5. 28.
html <div>로 웹사이트 레이아웃 구성하기1 ●형태 #wrap{width:1000px;} #header{width:1000px; float:left;} #sidebar{width:300px; float:left;} #content{width:700px; float:left;} #footer{width:1000px; float:left;} header sidebar content footer ●html의 와 css로 레이아웃 구성하기 예 header sidebar content footer ● wrap - 레이아웃 전체를 묶어서 wrap안에 있는 div들이 깨지지 않고 자리를 잘 잡게 하기 위한 테두리이다. header - 넓이값과 float으로 위치를 잡아주면 된다. sidebar, content - sidebar와 content의 합은 레이아웃 .. 2012. 5. 22.
css 기초 정리 ● html, xml 등은 문서의 구조를 정의한다. css 는 문서의 표현을 정의한다. ●html에서 구조를 나타내기 위해 사용하는 요소들 div, span, ul, ol, dl, h1~h6, p, table 등이 있다. ●css는 html의 각 구조를 시각적 표현으로 꾸며준다. ●css의 기본 규칙 - 선택자 {속성: 값; } ex) body {background-color: gray; } ●css의 선택자 - 스타일을 적용할 대상으로, body, p, h1 등 html의 요소명이나 id명,class명을 사용할 수 있다. ●css의 속성 - 해당 선택자의 어떤 스타일을 부여할지 결정한다. ●class 선택자와 id 선택자 - 특정 요소를 대상으로 스타일을 적용하기 위해 사용한다. - id선택자는 사용할.. 2012. 5. 20.
모바일 웹 개념 ●모바일 어플리케이션의 종류 네이티브 앱(Native App) - 모바일 기기에 직접 설치되고 사용되어지는 어플리케이션이다. 모바일 웹(Mobile Web) - 모바일 웹브라우저에 의해 실행되는 웹 사이트로 일반적인 웹사이트를 모바일로 옮긴 형태를 말한다. 하이브리드 앱(Hybrid App) - 웹과 네이티브 앱의 중간 형태이다 모바일 웹앱(Mobile Web App) - 모바일 웹의 한 형태이지만 일반적인 웹보다 모바일에 더 최적화되고 네이티브 어플리케이션화된 형태를 표현한다. ●모바일 웹은 기존의 웹사이트를 바탕으로 레이아웃만 모바일 환경에 맞게 바꾸는 것이기 때문에 기존 일반 웹기술을 바탕으로 구현된다. 그래서 모바일 웹을 공부하기전 일단 기존 웹기술(jsp, sql, 웹서버 등)을 먼저 배워야 한.. 2012. 5. 6.
반응형