'분류 전체보기'에 해당되는 글 158건

  1. 2013.11.21 가족
  2. 2013.11.21 옛날서적읽는모습
  3. 2013.11.21 컴퓨터 작업, 여자
  4. 2013.11.21 회상, 노인
  5. 2013.11.21 책모음
  6. 2012.09.27 알파벳 순서로 본 HTML5 태그들
  7. 2012.09.05 QnA
  8. 2012.08.31 스크립트 기술하는 방법
  9. 2012.08.31 jQuery 다운로드
  10. 2012.08.31 jQuery 샘플 파일
2013. 11. 21. 12:31

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2013. 11. 21. 12:30

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2013. 11. 21. 12:29

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2013. 11. 21. 12:28

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2013. 11. 21. 12:25

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

홈페이지 관련/HTML2012. 9. 27. 12:01


알파벳 순서로 본 HTML5 태그들


new : HTML5의 새로운 태그.

태그

설명

<!--...-->

댓글을 정의
<!DOCTYPE> 문서 유형을 정의

<a>

하이퍼 링크를 정의
<abbr> 약어를 정의
<acronym> HTML5에서 더이상 지원하지 안함.

<address>

문서 / 문서의 저자 / 소유자에 대한 연락처 정보를 정의
<applet> HTML5에서 더이상 지원하지 안함.
<area> 이미지 맵 안에있는 영역을 정의

<article> new

기사를 정의

<aside>  new

페이지 콘텐츠를 제외한 내용을 정의
<audio> new 사운드 컨텐츠를 정의

<b>

굵은 텍스트를 정의합니다
<base> 문서에있는 모든 상대 URL의 기본 URL / 대상을 지정합니다
<basefont> HTML5에서 더이상 지원하지 안함.
<bdi> new 그 이외의 다른 텍스트에서 다른 방향으로 포맷 될 수 있습니다 텍스트의 일부를 분리
<bdo> 현재 텍스트 방향을 무시
<big> HTML5에서 더이상 지원하지 안함.
<blockquote> 다른 소스에서 인용 한 부분을 정의

<body>

문서의 본문을 정의
<br> 하나의 줄 바꿈을 정의
<button> 클릭 버튼을 정의
<canvas> new 스크립트 (보통 JavaScript)를 통해 빠르게 그래픽을 그리기 위해 사용
<caption> 표 캡션을 정의
<center> HTML5에서 더이상 지원하지 안함.
<cite> 작품의 제목을 정의
<code> 컴퓨터 코드의 조각을 정의
<col> <colgroup> 요소 내에서 각 열의 열 속성을 지정합니다
<colgroup> 포맷 테이블의 하나 이상의 항목의 그룹을 지정합니다
<command> new 사용자가 호출 할 수있는 명령 단추를 정의
<datalist> new 입력 컨트롤에 미리 정의 된 옵션 목록을 지정합니다
<dd> 정의 목록에서 항목에 대한 설명을 정의
<del> 문서에서 삭제 된 텍스트를 정의
<details> new 사용자가 보거나 숨길 수있는 추가 정보를 정의
<dfn> 정의 용어를 정의

<dir>

HTML5에서 더이상 지원하지 안함.
<div> 문서에 섹션을 정의
<dl> 정의 목록을 정의
<dt> 정의 목록에서 용어를 (항목) 정의
<em> 강조 텍스트를 정의
<embed> 외부 (비 HTML) 응용 프로그램에 대한 컨테이​​너를 정의합니다.
<fieldset> 형태의 그룹 관련 요소

<figcaption> new

<figure> 요소에 대한 캡션을 정의
<figure> new 독립적 인 내용을 지정합니다
<font> HTML5에서 더이상 지원하지 안함.
<footer> new 문서 또는 섹션에 바닥 글을 정의

<form>

사용자 입력을위한 HTML 양식을 정의
<frame> HTML5에서 더이상 지원하지 안함.

<frameset>

HTML5에서 더이상 지원하지 안함.

<h1>...<h6>

HTML 머리글을 정의
<head> 문서에 대한 정보를 정의
<header> new 문서 또는 섹션 헤더를 정의
<hgroup> new 그룹 (<h1> 광고에 <h6>) 요소 제목
<hr> 콘텐츠의 주제별 변화를 정의
<html> HTML 문서의 루트를 정의
<i> 다른 음성 또는 분위기에서 텍스트의 일부를 정의
<iframe> 인라인 프레임을 정의
<img> 이미지를 정의

<input>

입력 컨트롤을 정의
<ins> 문서에 삽입 된 텍스트를 정의

<keygen> new

키 쌍 생성기 필드 (양식 용) 정의
<kbd> 키보드 입력을 정의
<label> 입력 요소에 레이블을 정의
<legend> <fieldset>에 대한 캡션, <그림>, 또는 <details> 요소를 정의

<li>

목록 항목을 정의

<link>

문서 및 외부 리소스 사이의 관계를 정의 (대부분의 스타일 시트에 링크하기 위해 사용)
<map> 클라이언트 측 이미지 맵을 정의합니다
<mark> new 표시 / 강조 표시된 텍스트를 정의합니다
<menu> 명령 목록 / 메뉴를 정의
<meta> HTML 문서에 대한 메타 데이터를 정의
<meter> new 알려진 범위 (게이지)에서 스칼라 측정을 정의
<nav> new 탐색 링크를 정의
<noframes> HTML5에서 더이상 지원하지 안함.
<noscript> 클라이언트 측 스크립트를 지원하지 않는 사용자를 위해 대체 콘텐츠를 정의

<object>

포함 된 개체를 정의
<ol> 정렬 된 목록을 정의
<optgroup> 드롭 다운 목록에서 관련 옵션의 그룹을 정의합니다
<option> 드롭 다운 목록에서 옵션을 정의
<output> new 계산의 결과를 정의
<p> 단락을 정의
<param> 개체에 대한 매개 변수를 정의
<pre> 미리 서식이 지정된 텍스트를 정의
<progress> new 작업의 진행 상황을 나타냅니다
<q> 짧은 인용을 정의
<rp> new 루비 주석을 지원하지 않는 브라우저에 표시 할 지 정의
<rt> new 문자에 대한 설명 / 발음을 (동아시아 타이포그래피 용) 정의
<ruby> new 루비 주석을 (동아시아 타이포그래피 용) 정의
<s> 더 이상 정확하지 텍스트를 정의
<samp> 컴퓨터 프로그램에서 샘플 출력을 정의
<script> 클라이언트 측 스크립트를 정의
<section> new 문서에 섹션을 정의
<select> 드롭 다운 목록을 정의
<small> 작은 텍스트를 정의
<source> new 미디어 요소에 대한 여러 미디어 리소스 (<video> 및 <audio>) 정의

<span>

문서에 섹션을 정의
<strike> HTML5에서 더이상 지원하지 안함.
<strong> 중요한 텍스트를 정의합니다
<style> 문서에 스타일 정보를 정의
<sub> subscripted 텍스트를 정의
<summary> new <details> 요소에 대한 눈에 띄는 제목을 정의
<sup> superscripted 텍스트를 정의
<table> 테이블을 정의
<tbody> 테이블의 그룹 몸 콘텐츠를
<td> 표에 셀을 정의
<textarea> 여러 입력 컨트롤 (텍스트 영역)를 정의
<tfoot> 테이블에 그룹 바닥 글 내용
<th> 표에 머리글 셀을 정의
<thead> 테이블에 그룹 헤더 내용을

<time> new

날짜 / 시간을 정의
<title> 문서의 제목을 정의
<tr> 테이블에 행을 정의

<track> new

미디어 요소 (<video> 및 <audio>)에 대한 텍스트 트랙을 정의
<tt>

HTML5에서 더이상 지원하지 안함.

<u>

일반 텍스트에서 stylistically 달라야합니다 텍스트를 정의

<ul>

정렬되지 않은 목록을 정의
<var> 변수를 정의

<video> new

비디오 또는 영화를 정의
<wbr> 라인 브레이크 가능을 정의


Posted by 캠퍼스친구
2012. 9. 5. 01:02

QnA

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

홈페이지 관련/jquery2012. 8. 31. 17:41

방법 1 :

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

jQuery 내용 적기

</script>


방법 2 :

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="./script.js"></script>


script 태그는 src 속성이 있는 경우는 src 속성에 작성되어 있는 외부 파일을 읽어 들이고, src 속성이 없는 경우에는 script 태그안에 작성되어 있는 코드를 JavaScript 로 인식한다.

jQuery를 사용한 프로그램을 작성하는 경우도 마찬가지인데 예를 들어 방법1 과 같이 처리내용을 직접 적을 것인지, 방법 2와 같이 'script.js' 등의 외부 파일을 작성할 것인지 자신의 스타일 대로 하면 된다.

실무에선 방법2를 많이 사용한다.

이유는 보틍 브라우저는 한번 읽어 들인 JavaScript 파일의 내용을 캐시 형태로 저장하므로, 외부 파일로 작성해 두면 그 이후 로딩시 고속화가 가능하다. 재사용성을 생각한다면 외부 파일로 작성하는 것이 좋겠다.

작성할 JavaScript 파일은 HTML 파일과 같은 문자코드로 작성해야 한다. Ajax를 통해 서버와 통신하는 경우라면 UTF-8이 아니라면 문자가 깨질 경우가 있으니 UTF-8로 작성하는 것이 좋겠다.

Posted by 캠퍼스친구
홈페이지 관련/jquery2012. 8. 31. 17:30

jQuery를 사용하는 방법에는 여러 가지가 있다. 

가장 많이 사용되는 방법으로는 공식 사이트에서 라이브러리 파일ㅇ르 다운로드하고 서버에 올려 이용하는 방법이다.

jQuery의 공식 사이트 http://jquery.com 에 접속하여 메인 페이지에 있는 "Download"를 클릭하여 다운로드한 JavaScript 파일을 텍스트 에디터에서 열어보면 저작권 표시 뒤에 JavaScript 명령이 기술되어 있다.

jQuery의 소스코드는 주석, 공백, 개행을 제거하고 변수명을 짧게 하는 "minified" 라는 방식으로 압축되어 있다.

보통 jQuery로 개발할 때에는 minified 버전을 사용하는 것으로 충분하다.

압축전 버전은 Development 를 체크하면 다운로드 받을 수 있다.

Posted by 캠퍼스친구
홈페이지 관련/jquery2012. 8. 31. 16:31

기본적인 jQuery 파일을 통해 기본 글의 구조를 살펴 본다.


소스

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>아코디언 패널</title>

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

$(function(){

$("dd:not(:first)").css("display","none");

$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){

$(this).siblings("dd").slideUp("slow");

$("+dd",this).slideDown("slow");

}

});

});

</script>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

dl {

width: 100%;

margin-top: 50px;

margin-right: auto;

margin-bottom: 50px;

margin-left: auto;

}

dl dt {

background-color: #7cadb6;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #FFF;

cursor: pointer;

}

dl dd {

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #7cadb6;

border-right-color: #7cadb6;

border-bottom-color: #7cadb6;

border-left-color: #7cadb6;

height: 300px;

}

</style>

</head>


<body>

<div id="container">

<dl>

    <dt><p>텍스트 1</p></dt>

      <dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트2</p></dt>

      <dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트3</p></dt>

      <dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>

</dl>

</div>

</body>

</html>


해설

<!-- html 5 로 만들었습니다. -->

<!doctype html>

<html>

<head>

<!-- 글자 인코딩 형식은 유니코드로 작업했어요 -->

<meta charset="UTF-8">

<title>아코디언 패널</title>

<!-- jquery 버전은 최신 버전으로 원격으로 불러오기를 합니다. -->

<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>

<!-- 실제 사용할 스크립트 내용을 적습니다. -->

<script type="text/javascript">

$(function(){

$("dd:not(:first)").css("display","none");

$("dl dt").click(function(){

if($("+dd",this).css("display")=="none"){

$(this).siblings("dd").slideUp("slow");

$("+dd",this).slideDown("slow");

}

});

});

</script>


<!-- 스타일 내용을 적습니다. -->

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

dl {

width: 100%;

margin-top: 50px;

margin-right: auto;

margin-bottom: 50px;

margin-left: auto;

}

dl dt {

background-color: #7cadb6;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #FFF;

cursor: pointer;

}

dl dd {

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #7cadb6;

border-right-color: #7cadb6;

border-bottom-color: #7cadb6;

border-left-color: #7cadb6;

height: 300px;

}

</style>

</head>


<body>

<!-- 내용을 적어줍니다. -->

<div id="container">

<dl>

    <dt><p>텍스트 1</p></dt>

      <dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트2</p></dt>

      <dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>

      <dt><p>텍스트3</p></dt>

      <dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>

</dl>

</div>

</body>

</html>



결과 화면 보기

아코디언 패널

텍스트 1

텍스트 1 텍스트의 모든 내용을 보여줍니다.

텍스트2

텍스트2 두번째 텍스트의 내용을 보여줍니다.

텍스트3

텍스트3 세번째 텍스트의 내용을 보여줍니다.


Posted by 캠퍼스친구