간단한 jQuery 갤러리

jQuery/DOM&jQuery 2015.10.30 00:00

간단한 jQuery 갤러리

간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조.


html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는<li> 중간에 생략했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
<h1>아이돌 갤러리</h1>
<ul id="imagegallery">
<li>
  <figure>
    <a href="images/pic-aiyou.jpg" title="아이유">
      <img src="images/sum-aiyou.jpg" alt="아이유" width="80" height="60"/>      
    </a>
     <figcaption>아이유</figcaption>
  </figure>    
  </li>
<!-- 3번반복-->
<li>
 <figure>
  <a href="images/pic-soyou.jpg" title="소유" >
   <img src="images/sum-soyou.jpg" alt="소유" width="80" height="60"/>   
  </a>
  <figcaption>소유</figcaption>
  </figure>
  </li>  
</ul>
<div>
<img id="placeholder" src="images/pic-aiyou.jpg" alt="아이유" width="400" height="300" />
<p id="description">아이유</p>
</div> 
</section>
cs

 
클릭시 하이퍼링크의 주소와 제목이  하단이미지박스의 주소와 텍스트으로 된다

1
<a href="주소" title="제목" >
cs

이 주소와 제목이 아래에 적용

1
2
<img id="placeholder" src="주소" alt="아이유" width="400" height="300" /> 
<p id="description">텍스트</p>
cs


jQuery없이 스크립트로만 구현하면 길어진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");//하이퍼링크속성값
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);//주소교체
  var text = whichpic.getAttribute("title");//이름값
  var description = document.getElementById("description");
   description.firstChild.nodeValue = text; //자식값을변경
  return false;
}
 
function prepareGallery() {//각각 검사후 
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
  }
}
cs


jQuery에서 구현

$()로접근 속성갑은 attr()로 가져오고 변경,텍스트값은 text()로 변경

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $("#imagegallery li").on("click"function(){      
     var imagestitle = $(this).find("a").attr("title"), 
          boximages = $(this).find("a").attr("href");
      $("#placeholder").attr("src", boximages);
      $("#description").text(imagestitle);  
          return false;
    });
});
cs


완성된것

http://sianasiatiger.cafe24.com/practice-idea/gall-jQ.html

저작자 표시
신고

설정

트랙백

댓글

DOM 스크립트 소스-소스 코드 예제

분류없음 2015.02.22 17:17

DOM 스크립트-소스 코드 예제



에이콘풀판사 DOM 스크립트 요약본
http://channy.creation.net/project/domscripting/

  1. 간단히 살펴보는 자바스크립트 역사

  2. 자바 스크립트 문법 익히기

  3. 문서 객체 모델(DOM)이란?

    • Test: alert title 속성
  4. 자바스크립트로 만드는 온라인 사진첩

  5. 꼭 알아야 할 핵심 기본기

    • Example: 스크립트 분리로 팝업 창 만들기
  6. 사진첩 기능 개선하기

  7. 실행시에 마크업 코드 생성하기

    • Test: document.write inline
    • Test: document.write external
    • Test: alert innerHTML
    • Test: innerHTML 업데이트
    • Test: alert node info
    • Test: createElement
    • Test: createTextNode
    • Test: appendChild
    • Test: documentFragments
    • Test: documentFragments
  8. 의미가 살도록 컨텐츠 개선하기

  9. CSS와 DOM 연동하기

    • Example: 변경 CSS alert 보기
    • Itinerary: 테이블 띠무늬 만들기
    • Story: 첫 단락 스타일 입히기
  10. 애니메이션 슬라이드쇼 만들기

  11. 총정리편 (더블트랙 웹사이트)

  12. DOM 스크립트의 미래


저작자 표시
신고

설정

트랙백

댓글

HTML5 콘텐트 모델

웹표준/HTML5 훑어보기 2015.02.21 18:22

HTML5 콘텐트 모델

HTML5의  각  요소들은  특성에  따라  분류된다.  한요소가  어떤  분류에도 속하지 않을 수도 있고 여러 분류에 속해있을 수도 있다. 분류는 아래 이미지와 같이 분포하고 있다.(이미지는 원본에서 확인가능하며 표로 정리된 것만을 발췌하였습니다.)


분류

특성

엘리먼트 

메타데이타 콘텐트

(metadata content)

콘텐츠의  모양,  동작을  설정하거나  다른  문서와의  관계를 나타낸다.

 base, command, link, meta, nocript, script, style, title

플로우 콘텐트

(flow content)

대부분의 body 요소 안의 요소들이 포함된다. 플로우 콘텐트는 하위에 텍스트나 임베디드 콘텐트를 포함한다.

a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1~h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr

섹셔닝 콘텐트

(sectioning content)

header와 footer의 범위를 결정하는 요소이다. 모든 섹셔닝 콘텐트는 헤딩과 아웃라인을 가지고 있다.

article, aside, nav, section 

헤딩 콘텐트

(heading content)

섹선의 헤더를 의미한다.

h1, h2, h3, h4, h5, h6, hgroup

프레이징 콘텐트

(phrasing content)

문서의 텍스트를 의미한다. 프레이징 콘텐트는 하위에 텍스트나 임베디드 콘텐트를 포함한다.

a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr

임베디드 콘텐트

(embedded content)

이미지, 비디오, 플래시 등 외부 콘텐트를 문서 내에 표현한다.

audio, canvas, embed, iframe, img, math, object, svg, video

인터랙티브 콘텐트

(interactive content)

사용자와 상호작용하는 요소들이다.

a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]

트랜스패런트 콘텐트

(transparent content)

부모 요소의 콘텐트에 따라 포함하는 콘텐트의 분류가 바뀌는 요소를 말한다.

 


저작자 표시
신고

설정

트랙백

댓글

html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항

웹표준/HTML5 훑어보기 2014.03.05 15:10

html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항


아주 큰 주의사항은 아니지만 브라우저별 다른 반응에 다른 반응을 보이니 살펴보자

주제1

주제2

주제3

위의 예제에서 h1엘리먼트는 첫번째는 section안에 두번째는 section안에 section에, 마지막은 그냥 코딩되어있다.문제는 브라우저마다 다르게 보인다는것

몇몇 브라우저에서는 세개다 동일한 크기지만 몇몇브라우저는 크기가 다르게보인다


위예는 파이어복스와  오페라

큰문제는없다.css를 사용하니 css초기값으로 동일하게 잡아주면 당연히 해결. 다만 css를 잡아주지 않을경우 대비해서 포스팅



저작자 표시
신고

설정

트랙백

댓글

hgroup 태그, HTML5에서 제외(hgroup removed from HTML)

웹표준/HTML5 훑어보기 2014.02.27 10:52

hgroup 태그, HTML5에서 제외(hgroup removed from HTML)


뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다.

다음링크참조

http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/
http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731


http://beautifulcss.com/archives/882

W3C는 더이상 <hgroup> 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 <h1>부터 <h6>까지의 태그만을 포함할 수 있고, 그 외의 태그는 포함시킬 수 없습니다. 이렇다보니 실제로 <hgroup> 태그를 쓸모있게 사용할 일이 거의 없다는 것에 바탕을 둔 결정으로 보입니다.

  

HTML이란?

HTML의 역사

<hgroup>의 기본적인 사용 예제입니다. 사실 저런 식으로 목차를 만들기에는 <hgroup> 보다는, 들여쓰기와 머릿그림을 자동으로 만들어 주는 <ul> 태그가 훨씬 효율적입니다. 굳이 개요를 설명하는데 있어 헤딩 태그를 쓰지 않고도 <ul> 태그가 문서의 <header> 태그에 안에 위치한다면 그것으로 충분히 개요의 의미를 살릴 수 있기 때문이죠.

  • HTML이란?
    • HTML의 역사

작성하는 HTML 코드의 양은 다소 많다하더라도, 아무런 CSS를 사용하지 않은 상태에서의 화면 표현을 본다면 분명 <ul> 태그가 훨씬 우월합니다.

또 한가지로 예로는, 우리가 흔히 보는 인터넷 매체의 기사들은 주로 1개의 대제목만 사용합니다. 대제목 이후에 부제목을 사용해서 기사 자체를 개요화하기 보다는, 태그라인이나 날짜, 작성자 혹은 조회 수 따위를 표현합니다. 다른 태그를 품을 수 없는 <hgroup>의 특성상 사용빈도가 무척 떨어질 수 밖에 없지요.


882-01
일반적인 블로그 기사의 형식

이렇다보니 오히려 대제목을 뒷받침 해줄 수 있는 <subhead><subline> 태그의 명세를 준비하고 있는 듯 합니다. 해외 각종 블로그에서 보면 이런 태그들의 환영을 알리는 기사들이 점점 늘고 있거든요. 물론 정확한 정보는 아닙니다.

http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup


아무튼, HTML도 개발자와 사용자 추세에 따라 그 명세를 유연하게 맞추어가고 있는 듯 합니다. 대부분의 웹 브라우저들은 <hgroup> 태그를 화면에 표현 할 수 있고, 혹시 지금까지 만들어 놓은 웹 사이트에 이 태그가 사용되었다면 굳이 당장 없애거나 바꿀 필요는 없습니다. 시간이 지남에 따라 웹 브라우저들도 단계적으로 <hgroup> 태그를 사용자 도구에서 제외시키겠지만 아직 시간은 충분합니다.

각종 명세나 규칙등은 HTML 언어의 버전(개정판)에서 빈번하게 제외되고 추가되고 재정의됩니다. 지금 제외되었다고 해서 영원히 그렇다는 것은 아닙니다. HTML의 다음 버전에서는 <hgroup>이 다시 새롭게 정의되어 추가될 수도 있다는 뜻입니다. 명세가 변하는 것에 일일이 대응하기 보다는, 그때그때 규칙에 맞는 작성을 지향해 나가는 것이 중요합니다.


저작자 표시
신고

설정

트랙백

댓글

CSS 단위

CSS/CSS3 2014.02.25 14:56

CSS 단위

위는 절대값 아래는 상대값

단위

설명

in

인치(inch)

cm

센치미터(centimeter)
mm 밀리미터(millimeter)

pc

피카 (1피카=12포인트=1/6인치)

pt

포인트(1/72인치)

%

다른속성값에 대한비율

ex 현재폰트의 x-height
em

엘레먼트 폰트크기에상대적

px

픽셀(현 컴뷰터씬의 한 도트)

rem

root 엘리먼트에 상대적


각도와 시간

단위

설명

deg

각도0~360

grad

gradian 각도 0~400

rad

라디안 0~6.28

turn

회전수 1turn=360deg

s

1초

ms

밀리초(1/1000s)


저작자 표시
신고

설정

트랙백

댓글

HTML5 전역속성 (Global Attributes)

웹표준/HTML5 훑어보기 2014.02.24 18:49

HTML5 전역속성 (Global Attributes)


굵고 빨간건  HTML5부터 적용된것

Attribute Description
accesskey

키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다.

class 다수 선택자,엘리먼트 분류
contenteditable

ture 설정으로 사용자들이 텍스트변경가능
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

contextmenu

엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는<menu>와 함께 지원되는브라우저없슴)

data-*

HTML 태그 안에서 사용자 데이타 저장한다
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data

dir

텍스트방향 rtl(왼쪽->오른),ltr(오른쪽->왼쪽)

draggable

드래그가능유무

dropzone

드래그한 데이터를 복사(copy)할지,이동(move)할지,링크(link)걸지 결정한다. 브라우저는 아직미지원

hidden

엘리먼트가 현재 적절하지않다는 것을 나타낼떄 쓴다,값은없는 불리언 속성
http://www.w3schools.com/tags/att_global_hidden.asp

id

유일무이 선택자

lang

컨텐츠의 언어명시 값은 ISO lanhuage code

spellcheck

브라우저가 엘리먼튼 컨텐츠의 철자를 체크해야 할지를 명시하기위해 사용한다. lang값은 무시하며, 철자체크는 컴퓨터 운영체제나 별도의 브라우저 설정에서 정의된 언어로 체크수행한다.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_spellcheck

style 인라인스타일
tabindex

tab으로 포커스 이동시 그 순서조절. 값은숫자 낮은수서부터

title 추가정보
translate

엘리먼트 컨테츠가 번역되어야하는 아닌지 가린다(yes,no)(현재 지원브라우저 없슴)



저작자 표시
신고

설정

트랙백

댓글

CSS3 :first-line and :first-letter 문장 첫글자크게하기

CSS/CSS3 2014.02.18 19:27

CSS3 :first-line and :first-letter 문장 첫글자크게하기

문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.

먼저 :first-letter를 이용하여 첫글자를 크게

    p:first-letter {  
        font-size: 50px;  
    }  


다음은 첫번째 줄을 굵게

 
    p:first-line {  
        font-weight: bold;  
    }  



그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다.
우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자

    p:first-child:first-letter {  
        font-size: 50px;  
    }  
    p:first-child:first-line {  
        font-weight: bold;  
    }  


제대로 된 예제를 연습해보자. 아래와 같이 완성 할 것이다.


1. 간단한 문단설정.

    p {  
        color: #555;  
        font-family: 'Georgia', Times, serif;  
        line-height: 24px;  
    }  

2. 문단 배경을 설정한다. css3를이용한 그림자효과추가.

    p:first-child {  
        padding: 30px;  
        border-left: 5px solid #7f7664;  
        background-color: #f5f4f2;   
        line-height: 32px;  
        box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);  
        position: relative;  
    }  

3. p:first-child:first-letter로 첫글자선택후 설정

    p:first-child:first-letter {  
        font-size: 72px;  
        float: left;  
        padding: 10px;  
        height: 64px;  
        font-family: 'HominisNormal';  
        background-color: #7F7664;  
        margin-right: 10px;  
        color: white;  
        border-radius: 5px;  
        line-height: 70px;  
    }  

4. 첫번째 글자만 크게하면 어색해지니 p:first-child:first-line 선택자로 첫번째 라인도 같이강조

p:first-child:first-line { font-weight: bold; font-size: 24px; color: #7f7664; }

5. 마지막으로:after를이용 클립그림으로 장식이다.content 트릭

    p:first-child:after {  
        background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;  
        content: " ";  
        display: inline-block;  
        height: 100px;  
        position: absolute;  
        rightright: -5px;  
        top: -35px;  
        width: 100px;  
    }  

예제확인 http://demo.hongkiat.com/css-better-paragraph/

저작자 표시
신고

설정

트랙백

댓글

HTML5 크로스브라우징

분류없음 2014.02.18 11:31

HTML5 크로스브라우징

html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처)


<!-- Load jQuery Here -->
<!--[if lt IE 9]> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->


* html5shiv

HTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리.


* ie9.js, ie7.js

IE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.

단순히 head 부분에 위 구문을 집어넣으면 된다.


* Modernizr

HTML5 & CSS3을 지원하는지를 체크해 줌.

html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 속도가 느려지기 때문임. 하지만 그만큼의 가치가 있다고 판단되면 쓰는 것을 권장.


* css3pie

CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리.

http://www.css3pie.com


* Modernizr vs. css3pie

  Modernizr - 안되면 패스. 하지만 되는 부분에 대해서는 확실하게 될 수 있도록?

  css3pie - 무조건 되게 해 주세요. 뭐든지간에 되게 해 달란 말이에요 징징



결론:

구 버전의 브라우저를 지원해야 할 필요가 있는 경우에만 부분 부분적으로 include하는 것을 권장. 기본적으로는 html5shiv+ie9.js 를 사용하고, 필요한 경우에만 Modernizr를 사용할 것.


그리고 html5shiv+ie9 의 경우에는 관련 소스들을 jQuery보다 뒤에 넣을 것.

저작자 표시
신고

설정

트랙백

댓글

HTML5 예제 : 이미지와 설명텍스트 코딩

웹표준 2013.01.23 11:08

HTML5 예제 : 이미지와 설명텍스트 코딩

간단한 이미지와 설명이 되있는사이트를  html5로 코딩해보자

실험할 사이트는 Pinterest이다 http://pinterest.com/

사이트중 이걸 코딩 해보도록한다.

첫번째로 원래 있던걸 보자 .<div>가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다.


Awesome cat description.

25 likes 2 comments 100 repins

Profile picture of me

Me onto here

1. 첫번째로 <article><nav> , <aside> 를 사용한방법이다


2. 이번엔 굳이 <nav>를 고집하지않고, <aside> 만이용한것이다


3. <figure>를 이용해서 더구체화 한방법이다. figure 엘리먼트는 그림,사진,일러 코드리스트등과 같이 캡션을 할때 사용한다.

25 likes 2 comments 100 repins

Profile picture of me

Me onto here

이외에도 여러방법이 있다. 확실한 코딩이라고 정해진것은 없다. <article>이 다소 혼동올수도 있으니 부모 element로 <section>을사용하는것도 좋은 방법이다.  다만 적어도 조건을 만족한다는 가정하에 무엇이 가장적합한지 선택해서하는것이 코딩의 정석이다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바