개발자

DataTables 사용법 및 예제 jQuery JSON

DataTables는 HTML의 <table>을 데이터 그리드 형식으로 사용하기 위한 라이브러리입니다. 장점은 다음과 같습니다. ○표 <table>에 다음과 같은 기능을 빠르게 구현·추가할 수 있다. 표시 건수 제어 기능 페이징 기능 정렬 기능 필터 기능 스크롤 기능 ○서버에서 테이터(JSON)를 받아 표시할 수 있다. ○표 디자인이 깔끔하다.(Bootstrap 디자인에도 맞출 수 있음) 라이센스는 MIT이고, 사용하기 위해서는 jQuery가 필요합니다. DataTables의 기본적인 사용방법을 설명하겠습니다. 설명 환경 DataT...

CSS3 animation 속성과 @keyframes 애니메이션 효과

animation 속성과 @keyframes를 사용하여 CSS 만으로 애니메이션 효과를 만들 수 있습니다. 애니메이션 효과란 움직이는 이미지라고 생각하면 됩니다. 먼저@keyframes를 살펴보겠습니다. @keyframes @keyframes는 애니메이션의 시작부터 종료 부분까지 어떠한 동작을 할 것인지 지정할 수 있는CSS문법입니다. @keyframes는 작성방법은 아래와 같습니다. @keyframes 이름 { 0% { CSS 속성: 값; } 100% { CSS 속성: 값; } } @keyframes뒤에 사용할 애니메이션 이름을 ...

HTML CSS 여백 설정 margin, padding, border 사용 방법

HTML에서 여백을 설정하는 방법을 알아보겠습니다. 여백을 설정하기 위해서는 margin, padding 또는 border를 사용해 여백을 지정할 수 있습니다. margin, padding, border 살펴보기 CSS에 입문해 막히는 부분 중 하나가 margin과 pdding의 차이입니다. magring은 요소의 외부 여백이고, padding은 요소의 내부 여백입니다. border는 이름대로 요소를 감싸는 틀입니다. <p> 요소에 class를 부여하고 배경색을 변경해서 확인해 보도록 하겠습니다. <!DOCTYPE html> <ht...

HTML CSS 문자열 떨어뜨리기 float clearfix 설명 예제

HTML에서 문자열을 작성하다보면 문자열이 붙는 경우가 생깁니다. 의도하지 않게 문자열이 붙는 경우 대응 하는 방법을 알아보겠습니다. float 뒤의 요소가 붙어 버렸다? CSS 작성을 inline과 float를 사용한 방법으로 준비를 합니다. @charset="UTF-8"; h1 { color : #cc0033; font-size : 24px; text-align : center; } p { color: #666; font-size : 18px; line-height : 26px; text-align : left; } a { te...

HTML CSS display의 block, inline 사용 방법 예제

HTML에서 display 사용 방법을 알아보겠습니다. display의 block, inline 메뉴를 만들기 전에 잠시 설명을 하겠습니다. CSS를 공부할 때에 이해하고 넘어가지 않으면 안 되는 것이display프로퍼티 값입니다. 요소명 { display : 값; //display, inline 등 } 우선은display:block에 대해 설명하겠습니다. p 요소 style="background-color: #eee; padding: 0 4px;" p 요소는 위와 같이 가로 폭이 끝가지 펼쳐져 있는 것을 알 수 있습니다. li 요...

HTML CSS 리스트 작성하기 (메뉴 만들기) 예제

HTML에서 리스트를 작성하는 방법을 알아보겠습니다. 리스트는 문자를 열거하거나 하는 경우 많이 사용합니다. 사이드바나 메뉴등에서 많이 사용합니다. 그리고 작성한 리스트를 CSS로 디자인 하는 방법을 알아보겠습니다. 리스트 작성하기 다음으로는 리스트를 작성해 보도록 하겠습니다. 리스트를 자주 사용하는 것으로 내비게이션이나 사이드바 메뉴 부분입니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <title>테스트</title> <link rel="stylesheet"...

HTML CSS 링크(link) 작성 방법 예제

HTML에서 링크를 작성하는 방법을 알아보겠습니다. 그리고 작성한 링크를 CSS로 디자인 하는 방법도 알아보겠습니다. 링크 작성해 보기 URL을 클릭하면 지정한 사이트나 페이지로 이동하도록 링크를 붙여보겠습니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <title>테스트</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>웹 사이트</h1> <p>이 웹 사이트는 테스트를 위한 사이트입니다. ...

HTML CSS 텍스트 문자열 작성 방법 예제

HTML에서 문자를 입력하는 방법을 알아보겠습니다. 그리고 입력한 문자를 CSS 사용해 디자인 하는 방법도 알아보겠습니다. 텍스트에 관한 HTML과 CSS 텍스트에 대해 HTML과 CSS를 조금 더 파고들어 가보겠습니다. 저번에 작성한 HTML의 body 안을 일부 삭제해 다음과 같이 준비합니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <title>테스트</title> <link rel="stylesheet" href="style.css"> </head> <b...

HTML CSS 이미지 삽입 방법 예제

HTML에서 이미지를 삽입하는 방법을 알아보겠습니다. 그리고 CSS사용해 삽입한 이미지 크기를 조절하는 방법을 알아보겠습니다. 이미지 삽입하기 웹 사이트는 텍스트만이 아닌 이미지도 표시하는 경우가 많습니다. 다음은 페이지에 이미지를 삽입해 보겠습니다. 그러기 위해서는 우선 이미지를 준비해두어야 합니다. 폴더 안에 라는 이름으로 폴더를 작성합니다. 다음에는 좋아하는 이미지를 준비하고 라는 이름으로 저장해 둡니다. 저장 장소는 방금 전에 만들 폴더입니다. 다음으로는 html 파일에 코드를 작성해 보도록 하겠습니다. <!DOCTYPE h...

다음 페이지로

1 … 15 16 17 … 76