uxcss blog http://uxcss.com/wp 웹표준 / IT관련정보 / 기타 Tue, 02 Oct 2018 08:36:24 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.1.1 138248309 PC크롬 브라우저에서 안드로이드 크롬 브라우저 디버깅 하기(ADB Plugin) http://uxcss.com/wp/archives/176 http://uxcss.com/wp/archives/176#respond Tue, 02 Oct 2018 08:36:24 +0000 http://uxcss.com/wp/?p=176 Read More ...]]> 1. 크롬에 ADB 확장기능을 설치합니다.

2. 안드로이드 USB Driver 설치 ( androidnet sooner single adb interface driver )

http://developer.android.com/tools/extras/oem-usb.html

Get the Google USB Driver  |  Android Developers

3. Android SDK 설치

Tools -> Android SDK Platform-tools 만 설치 하면됨

4.  adb.exe 위치 확인 및 path 시스템 속성의 변수 편집에 설정

5. 실행 > cmd > adb version         버전 정보 출력됨 path 잘 됨!

6. adb를 다시 시작해 줌

adb.exe kill-server

adb.exe start-server

7. 안드로이드 폰 디바이서의 시스템 설정 > 개발자 옵션 > USB 디버깅체크 .

(개발자 옵션이 보이지 않는 경우 시스템 설정> 휴대폰 정보 > 소프트웨어 정보 > 빌드 번호 부분을 7번 터치하면  옵션이 활성화 됩니다.)

8. 크롬에서 Adb plugin를 클릭 하거나

주소창에 chrome://inspect/#devices 를 입력하여 디버그 시작

Discover USB devices  옵션에 체크

출처: http://chsoft.tistory.com/entry/크롬-브라우저에서-안드로이드-크롬-브라우저-디버깅-ADB-Plugin-chrome-debug-모바일 [거만떡볶이의 일상다반사]

]]> http://uxcss.com/wp/archives/176/feed 0 176 HTML 인클루드하기 http://uxcss.com/wp/archives/174 http://uxcss.com/wp/archives/174#respond Sun, 30 Sep 2018 09:33:25 +0000 http://uxcss.com/wp/?p=174 Read More ...]]> HTML 인클루드하기

이 포스팅에서는 제이쿼리를 이용하여 html 파일을 인클루드 해보록 하겠습니다.(웹서버에서 동작)

HTML

HTML
<div id="wrap">
	<p>#wrap</p>
	
	<header role="header" data-include="include/header_inc.html"></header>
	
	<!-- container -->
	<div id="container">
		<p>#container</p>
		<!-- snb -->
		<div class="snb">
			<p>.snb</p>
		</div>
		<!-- //snb -->
		<!-- content -->
		<div id="content">
			<p>#content</p>
		</div>
		<!-- //content -->
		<!-- aside -->
		<div class="aside">
			<p>.aside</p>
		</div>
		<!-- //aside -->
		<div class="clear">
		</div>
	</div>
	<!-- //container -->
	
	<footer role="footer" data-include="include/footer_inc.html"></footer>

</div>

header_inc.html

HEADER
<!-- header -->
<div id="header">
	<p>#Header Include</p>
	<p>헤더 인클루드입니다.</p>
</div>
<!-- //header -->

footer_inc.html

FOOTER
<!-- footer -->
<div id="footer">
	<p>#Footer Include</p>
	<p>푸터 인클루드입니다.</p>
</div>
<!-- //footer -->

Script

JAVASCRIPT
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
	$(function(){
		includeLayout();
	});

	function includeLayout(){
		var includeArea = $('[data-include]');
		var self, url;
		$.each(includeArea, function() {
			self = $(this);
			url = self.data("include");
			self.load(url, function() {
				self.removeAttr("data-include");
			});
		});
	}
</script>

스크립트는 body 하단에 위치시키는 것을 권장합니다.

test CSS

CSS
/* Common */
p,div {
	margin:0;
	padding:0;
}
/* 임시 비주얼 스타일 정의 */
div{margin-bottom:10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{margin-top:10px;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
#container{border:2px solid #bfbfbf;background:#e5e5e5}
.snb{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}


/* Layout */
#container{
	zoom:1;
	padding:0 200px;
}
#container:after{
	display:block;
	clear:both;
	content:''
}
.snb{
	float:left;
	margin-right:-180px;
	position:relative;
	left:-190px;
	width:178px;
	
}
#content{
	float:left;
	width:100%
}
.aside{
	float:left;
	margin-left:-182px;
	position:relative;
	left:190px;
	width:178px;
}

출처: http://webclub.tistory.com/548?category=500543 [Web Club]

]]> http://uxcss.com/wp/archives/174/feed 0 174 jQuery API: Manipulation, Events, Effects, Utilities http://uxcss.com/wp/archives/172 http://uxcss.com/wp/archives/172#respond Sun, 30 Sep 2018 09:01:51 +0000 http://uxcss.com/wp/?p=172 Read More ...]]>

관련 문서

목차

Manipulation

DOM의 제어, 갱신 조작

.append()

.append( content [, content ] )

매치되어진 요소에 주어진 내용을 추가로 삽입한 후 객체 반환

<script>
    // p 태그에 내용 추가 -> 결과 : 『중요과목 : 프레임워크』
    $(“p”).append(“<b>프레임워크</b>”);
</script>
<p>중요과목: </p>
 cs

.appendTo()

.appendTo( target )

매치되어진 요소들의 내용들을 주어진 조건에 맞는 요소에 추가로 삽입한 후 객체 반환

<script>
    // body 마지막 부분에 제이쿼리 추가
    $(“<div><p>제이쿼리</p></div>”).appendTo(“body”);
    // id가 a인 태그의 뒷 부분에 span 태그의 내용을 추가 ->  결과 : 『중요과목 : 프레임워크』
    $(“span”).appendTo(“#a”);
</script>
<span>프레임워크</span>
<div id=”a”>중요과목 :  </div>
 cs

.prepend()

.prepend( content [, content ] )

매치되어진 요소들에 맨앞에 주어진 내용을 삽입한후 객체를 반환

<script>
   $(“p”).prepend(“<b>Hello </b>”);
</script>
<p><!–삽입위치–>there friend!</p>
 cs

.prependTo()

.prependTo( target )

매치되어진 요소의 내용을 주어진 것에 매치되는 요소의 맨앞에 추가 삽입한후 객체를 반환

<script>
    $(“span”).prependTo(“#foo”);
</script>
<div id=”foo”> <!–삽입위치–>FOO!</div>
<span>I have something to say…</span> //span element는 기존 위치에서 사라짐
 cs

.after()

.after( content [, content ] )

매치되는 모든 요소의 뒤에 주어진 내용을 삽입

<script>
    $(“p”).after(“<b>Hello</b>”);
</script>
<p>I would like to say: </p>
<!–삽입위치–>
 cs

.before()

.before( content [, content ] )

매치되는 모는 요소의 앞에 주어진 내용 삽입

<script>
    $(“p”).before(“<b>Hello</b>”);
</script>
<!–삽입위치–>
<p> is what I said…</p>
 cs

.insertAfter()

.insertAfter( target )

매치되어진 요소들을 주어진 것에 매치되는 요소의 뒤에 삽입한다.

<script>
    // <p>태그 객체가 #foo 뒤로 이동한다.
    $(“p”).insertAfter(“#foo”);
</script>
<p> is what I said… </p><div id=”foo”>FOO!</div>
 cs

.insertBefore()

.insertBefore( target )

매치되어진 요소앞에 주어진 것에 매치된 요소를 삽입한다.

<script>
    //<p>태그 객체가 #foo 앞으로 이동한다.
   $(“p”).insertBefore(“#foo”);
</script>
<div id=”foo”>FOO!</div><p>I would like to say: </p>
 cs

.wrap()

.wrap( wrappingElement )

매치되어진 요소를 주어진 wrappingElement로 각각 감싼다. 선택된 요소가 n개일 때 감싸는 요소도 n개가 된다.

<script>
    // p요소를 지정 div로 둘러싼다.
    $(“p”).wrap(“<div class=’wrap’><b></b></div>”);
</script>
<p>Test Paragraph.</p>
 cs

.wrapAll()

.wrapAll( wrappingElement )

매치되는 요소들을 주어진 wrappingElement로 모두 감싼다. 선택된 요소가 다수여도 감싸는 요소는 하나다.

<script>
    $(document).ready(function(){
       $(“p”).wrapAll(document.createElement(“div”));
    });
</script>
<style type=”text/css”>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 cs

.wrapInner()

.wrapInner( wrappingElement )

매치되어진 요소 내부의 요소를 주어진 wrappingElement로 각각 감싼다.

$(“body”).wrapInner(“<div><div><p><em><b></b></em></p></div></div>”);
 cs

.unwrap()

감싸고 있는 요소(즉 부모)를 제거한다.

<script>
    // <p>태그를 감싸고 있는 <div> 요소를 제거
    $(‘p’).unwrap();
</script>
<div>
    <p>Foo</p>
</div>
 cs

.replaceWith()

.replaceWith( newContent )

매치되어진 요소를 주어진 내용과 치환한다.

$(“button”).click(function () {
    $(this).replaceWith(“<div>” + $(this).text() + “</div>”);
});
//버튼을 클릭하면 해당객체의 텍스트만 가져와 <div>객체로 치환한다.
 cs

.replaceAll()

.replaceAll( target )

매치되어진 것들을 주어진 것에 매치되는 것에 모두 바꾼다. replaceWith()와 비슷하지만 source/target의 위치가 반전되어 있다.

$(“<b>Paragraph. </b>”).replaceAll(“p”);
 cs

.empty()

선택된 요소의 자식에 해당되는 노드를 모두 제거한다.

//<p> element의 자식 element, 텍스트, html이 사라진다.
$(“button”).click(function() {
    $(“p”).empty();
});
 cs

.remove()

.remove( [selector ] )

empty()가 선택된 요소의 자식 노드만 제거한다면 remove()는 선택된 요소도 같이 제거한다.

$(“button”).click(function () {
    $(“p”).remove();
});
 cs

.detach()

.detach( [selector ] )

동적인 조작을 돕기 위해서 detach() 라는 새로운 메서드가 추가되었다. 특정한 요소를 제거한다는 것은 remove()와 기능적으로 동일하지만 해당 요소의 데이터(이벤트 등)를 제거하지 않는다는 주요한 차이가 있다. 쉽게 말해 document에서 잠시 때낸다고 보면 된다.

p = $( “p” ).detach();
 cs

재사용 될 만한 요소에만 사용하는 것이 중요하다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 발생할 때 매우 유용하게 사용할 수 있다.

.clone()

.clone( [withDataAndEvents ] )

  • withDataAndEvents: 요소에 바인드된 이벤트와 data를 복사에 포함할지 여부

선택된 요소를 복제한 새로운 객체를 반환한다. withDataAndEvents가 true일 땐 이벤트 핸들러와 data(value가 아니라 data 프로퍼티)도 함께 복제한다.

Events

이벤트 관련 메서드. Ajax 이벤트는 작성하지 않았음.

.ready()

.ready( handler )

DOM 로드가 완료되면 handler를 실행한다.

window.onload = function(){ alert(“onload1”); }
window.onload = function(){ alert(“onload2”); } // 마지막것 한번만 실행
$(document).ready(function(){
  alert(“ready1”);
})
$(function() { // $(document).ready와 같음
  alert(“ready2”);
})
// 실행결과
// ready1
// ready2
// onload2
// 브라우저에 따라 항상 실행순서가 바뀔 수 있다.
 cs

.load()

.unload()

.load(), .unload()는 jQuery 1.8에서 deprecated 되었음

.bind()

.bind( eventType [, eventData ], handler )

  • eventType: 핸들러를 할당할 이벤트 타입의 이름
  • eventData: 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
  • handler: 이벤트가 발생했을 때 실행할 함수

선택된 요소에 이벤트 핸들러를 설정한다.

// 프로퍼티 접근제어자(.)를 통해 메서트 호출을 연속으로 정의한다. (method chaining)
$(‘img’).bind(‘click’, function(event) {
    alert(‘안녕1!’);
}).bind(‘click’, function(event) {
    alert(‘안녕2!’);
}).bind(‘click’, function(event){
    alert(‘안녕3!’);
});
// a 라는 id를 가지고 있는 요소를 마우스 클릭 시 body에 test_class라는 CSS class를 추가한다.
$(function(){
    $(‘#a’).bind(‘click’, function(){
        $(‘body’).addClass(‘test_class’);
    });
});
 cs
// a 라는 id를 가지고 있는 요소를 마우스 오버시 ‘마우스오버’라는 경고 문구가 나타나고
마우스 클릭시 ‘클릭’이라는 경고 문구가 나타난다.
$(function() {
    $(“#a”).bind({
        click : function() {
            alert(“클릭”);
        },
        mouseover : function() {
            alert(“마우스오버”);
        }
    });
});
 cs

.unbind()

선택된 요소의 이벤트 핸들러를 제거한다.

// a 라는 id를 가지고 있는 요소를 마우스 클릭시 test의 기능인 body에 test_class라는
// CSS class를 추가하는 기능을 만든후 unbind 메서드를 이용하여 다시 그 기능을 제거하고 있다.
$(function(){
    var test = function(){
        $(‘body’).addClass(‘test_class’);
    };
    $(‘#a’).click(test);
    $(‘#a’).unbind(‘click’, test);
});
 cs

.one()

.one( events [, data ], handler )

  • eventType: 핸들러를 할당할 이벤트 타입의 이름
  • eventData: 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
  • handler: 이벤트가 발생하면 실행할 함수

선택된 요소에 이벤트 핸들러를 설정한다. 이 핸들러는 단 한 번만 실행되고 사라진다.

// a 라는 id를 가지고 있는 요소를 클릭 하면
//one CSS class를 추가하고 바로 click 이벤트가 해제된다.
$(function(){
    $(‘#a’).one(‘click’, function(){
        $(‘body’).addClass(‘one’);
    });
});
 cs

.trigger()

.trigger( eventType [, extraParameters ] )

선택된 요소에 인수로 전달한 이벤트를 발생시킨다.

// a라는 id를 가진 요소의 click 이벤트를 발생시킨다.
$(function(){
    $(‘#a’).trigger(‘click’);
});
// trigger() 메서드 기능을 간소화하여 사용하였다.
$(function(){
    $(‘#a’).click();
});
$(function(){
$(“#div1”).click(function(){
    alert(“엣헴”);
});
$(“#div2”).one(“click”, function(){
    alert(“난 한번만 실행한다”);
});
$(“#div1”).trigger(“click”);
    //#div1.click 이벤트를 페이지 로드시에 발생시킨다.
    //위에서 정의한 이벤트함수를 강제로 실행하는 용도로 쓰인다.
 cs

.triggerHandler()

.triggerHandler( eventType [, extraParameters ] )

선택된 요소에 인수로 전달한 이벤트를 발생시킨다. 단 이때 핸들러로 전달한 함수만 실행하며 브라우저가 기본으로 갖는 작동은 수행하지 않는다.

.on()

http://noritersand.tistory.com/218

.off()

.off( events [, selector ] [, handler ] )

.off( events [, selector ] )

.off( event )

.off()

요소에 설정된 이벤트 핸들러를 제거한다.

$(“#btn”).click(function(){
    $(document).off(“click”, “div”);
});
//div click 이벤트에 해당하는 함수를 제거해 더 이상 해당 함수가 실행되지 않는다.
 cs

.click()

.click( handler )

.click( [eventData ], handler )

.click()

핸들러를 이벤트에 연결하는 것은 흔한 작업이기 때문에, jQuery는 보다 더 간단하고 명료한 방식의 간소화된 이벤트 메서드를 제공하고 있다.

인수가 있냐 없냐에 따라 작동이 달라지는데 인수가 있으면 .bind(‘click’)과 같으며 인수가 없을땐 클릭 이벤트를 발생시킨다.

<script>
    $(function(){
        // a 라는 id를 가지고 있는 요소를 클릭시 body에 test_class라는 CSS class를 추가시킨다.
        // 1…
        $(‘#a’).click(function(){
            $(‘body’).addClass(‘test_class’);
        });
        // 2…
        $(‘table tr:gt(0) td’).click(
               alert($(this).text());
          );
        $(‘table’).append(“<tr><td>테스트</td></tr>”);  // click 이벤트 적용되지 않음
    });
</script>
<table border=”1″>
  <tr><td>제목</td></tr>
  <tr><td>자바</td></tr>
  <tr><td>프레임워크</td></tr>
</table>
 cs
// a 라는 id를 가지고 있는 요소의 click 이벤트를 실행시킨다.
$(function(){
    $(‘#a’).click();
});
 cs

.hover()

.hover( handlerIn, handlerOut )

요소에 마우스 커서가 올라가거나 벗어났을때의 핸들러를 설정한다.

// a 라는 id 가지고 있는 요소에 마우스 커서가 들어가면 hover CSS class 를 추가하고 마우스가
// 떠나면 hover CSS class를 제거 한다.
$(function(){
      $(‘#a’).hover(function(){
        $(‘body’).addClass(‘hover’);
      }, function(){
          $(‘body’).removeClass(‘hover’);
      });
});
 cs

.change(): 요소의 change 이벤트를 발생시키거나 핸들러를 설정한다. input과 textarea의 경우 포커스를 잃을 때 change 이벤트도 같이 발생한다.

.dblclick(): 요소의 더블클릭 이벤트를 발생시키거나 핸들러를 설정한다.

.error()

.error()는 1.8에서 deprecated 되었음

.focus(): 요소의 focus 이벤트를 발생시키거나 핸들러를 설정한다.

.blur(): 요소의 blur 이벤트를 발생시키거나 핸들러를 설정한다.

.focusin(): 요소의 focusin 이벤트를 발생시키거나 핸들러를 설정한다. focus()와 다른점은 이벤트 버블이 일어나지 않는다. (이것은 부모 요소가 선택된 요소보다 먼저 트리거되는 것을 의미한다.)

.focusout(): 요소의 focusout 이벤트를 발생시키거나 핸들러를 설정한다. focusin()과 같이 이벤트 버블이 일어나지 않는다.

.keydown(): 요소의 keydown 이벤트를 발생시키거나 핸들러를 설정한다.

.keypress(): 요소의 keypress 이벤트를 발생시키거나 핸들러를 설정한다.

.keyup(): 요소의 keyup 이벤트를 발생시키거나 핸들러를 설정한다.

.mousedown(): 요소의 mousedown 이벤트를 발생시키거나 핸들러를 설정한다.

.mousemove(): 요소의 mousemove 이벤트를 발생시키거나 핸들러를 설정한다.

.mouseout(): 요소의 mouseout 이벤트를 발생시키거나 핸들러를 설정한다.

.mouseover(): 요소의 mouseover 이벤트를 발생시키거나 핸들러를 설정한다.

.mouseup(): 요소의 mouseup 이벤트를 발생시키거나 핸들러를 설정한다.

.resize(): 요소의 resize 이벤트를 발생시키거나 핸들러를 설정한다.

.scroll(): 요소의 scroll이벤트를 발생시키거나 핸들러를 설정한다.

.select(): 요소의 select이벤트를 발생시키거나 핸들러를 설정한다. input과 textarea의 문자열을 선택하거나 선택 범위를 변경했을 때에 발생한다.

.submit(): 요소의 submit이벤트를 발생시키거나 핸들러를 설정한다.

Effects

이펙트 관련. 애니메이션을 다루는 메서드가 많다.

.show()

.show( [duration ] [, complete ] )

.show( options )

선택된 요소를 보이게 한다. CSS의 display 속성을 block으로 지정하는 것과 같다. 숨겨져 있다가 다시 나타날 때의 속도를 설정할 수 있다. 또 완전히 나타난 이후 실행될 콜백 함수를 할당 할 수 있다.

//a의 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 나타난다. speed를 사용시 정한 시간동안
//요소의 높이를 맨 위로부터 바닥까지, 너비는 왼쪽에서 오른쪽까지, 불투명도는 0에서 1까지 증가시킨다.
$(“button”).click(function () {
    $(“p”).show(“slow”);
});
 cs

.hide()

.hide( [duration ] [, complete ] )

.hide( options )

선택된 요소를 보이지 않게 한다. CSS의 display 속성을 none으로 지정하는 것과 같다. .show()와 같이 사라지는 속도를 설정하거나 완전히 사라진 후 실행될 함수를 할당 할 수 있다.

// a라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 사라진다. speed를 사용시 요소의
//높이, 너비, 불투명도를 정한 시간동안 0까지 감소시키고 display:none 상태를 적용시킨다.
$(“button”).click(function () {
    $(“p”).hide(“slow”);
});
 cs

.toggle()

.toggle( [duration ] [, complete ] )

.toggle( options )

.toggle( handler, handler [, handler ] )

선택된 요소의 가시성을 반전시킨다. 숨겨져 있을 땐 보이게 하고 반대로 보이는 상태일 땐 숨기는 것.

.toggle() 중 핸들러를 세 개까지 할당하던 방식은 1.8에 deprecated 되었고 1.9에서 완전히 제거되었다.

$(“button”).click(function () {
    $(“p”).toggle(); //show(), hide() 함수가 토글 시 매번 교차호출
});
 cs

.delay()

.delay( duration [, queueName ] )

콜백과 애니메이션 사이이의 혼란을 방지하고 “setTimeout” 함수를 호출하지 않고도 지연시키고 싶은 만큼 애니메이션을 지연시킬수 있다.

jQuery(‘#foo’)
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in
//”.delay()”의 첫 번째 인자로 밀리세컨즈 단위의 지연 시간값을 기입한다. 만약 다른 애니메이션
//대기열을 사용하려면 두번째 인자로 대기열 이름을 전달할 수 있다.(기본: “fx”)
 cs

.slideUp(): 요소를 높이가 제로가 될 때까지 서서히 보이지 않게 한다.

.slideDown(): 비표시 상태인 요소를 그 요소의 높이가 될 때까지 서서히 표시해 간다.

.slideToggle(): 이 함수가 호출될 때마다 각 요소에 slideDown/slideUp(을)를 교대로 실행한다.

.fadeIn(): 지정한 시간동안 투명도를 0에서 1로 증가시키고 style의 display를 none의 이전상태 (block 또는 liline)로 적용시킨다. 해당 요소가 서서히 나타나게 표현된다.

.fadeOut(): 지정한 시간동안 투명도를 1에서 0으로 감소시키고 style의 display:none 상태로 적용시킨다. 해당 요소가 서서히 사라지게 표현된다.

.fadeTo(): 지정한 시간동안 투명도를 opacity만큼 증가 또는 감소시킨다.(opacity 만큼 fade 시킨다.)

// a 라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 0.5초간 투명도를 0.33으로 변경되면서 페이딩(To) 효과를 나타낸다.
$(function(){
    $(“#a”).click(function(){
        $(“#b”).fadeTo(500, 0.33);
    });
});
 cs

.animate()

.animate( properties [, duration ] [, easing ] [, complete ] )

.animate( properties, options )

애니메이션을 작성해 실행한다.

$(“#left”).click(function(){
    $(“.block”).animate({“left”: “-=50px”}, “slow”);
});
// test_id1이라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 90%, height값을
// 270px로 0.5초동안 변화 후 fontSize를 10px로 변경한다.
// test_id2라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 50%, height값을
// 500px로 3초동안 변경 과 동시에 queue:false 설정으로 대기 없이 바로 fontSize 24px로 변경한다.
$(function(){
    $(“#test_id1”).click(function() {
     $(“#a”).animate({
         width : “90%”, height : “270px”
        }, 500).animate({
            fontSize : “10px”
        });
    });
    $(“#test_id2”).click(function() {
        $(“#a”).animate({
            width: “50%”, height : “500px”
        }, {
            queue : false, duration : 3000
        }).animate({
            fontSize : “24px”
        });
   });
});
 cs

.stop()

.stop( [clearQueue ] [, jumpToEnd ] )

.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

실행중인 애니메이션을 정지시킨다.

// test_id라는 id를 가진 요소를 클릭하면 a라는 요소의 애니메이션을 정지
$(function(){
    $(“#test_id”).click(function(){
        $(“#a”).stop();
    });
});
 cs

.queue()

.queue( [queueName ] )

요소가 갖는 애니메이션 큐를 배열로 돌려준다. 해당 요소에 남아있는(실행 예정인) 애니메이션을 알 수 있다.

<!doctype html>
<html lang=”en”>
<head>
  <meta charset=”utf-8″>
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 60px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  p {
    color: red;
  }
  </style>
  <script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $( “div” );
function runIt() {
  div
    .show( “slow” )
    .animate({ left: “+=200” }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( “fast” )
    .animate({ left: “-=200” }, 1500 )
    .hide( “slow” )
    .show( 1200 )
    .slideUp( “normal”, runIt );
}
function showIt() {
  var n = div.queue( “fx” );
  $( “span” ).text( n.length );
  setTimeout( showIt, 100 );
}
runIt();
showIt();
</script>
</body>
</html>
 cs

위 예시에서 ‘fx’는 큐의 이름으로 지정하지 않았을 때 기본값으로 설정되는 값이다. 없어도된다고

jQuery.queue()

jQuery.queue( element [, queueName ] )

element와 일치하는 요소가 갖는 애니메이션 큐를 배열로 돌려준다. 해당 요소에 남아있는(실행 예정인) 애니메이션을 알 수 있다. .queue()랑 다른 점은 문법정도…

jQuery.queue($(‘div’)[0], ‘fx’); // $(‘div’)[0]와 일치하는 요소를 찾아 queue를 리턴
 cs

.dequeue(): 대기 중인 애니메이션, 즉 큐에 대기중인 애니메이션 하나를 꺼내 실행한다.

.clearQueue(): 큐의 모든 애니메이션을 초기화한다. 큐의 이름을 지정하지 않으면 ‘fx’를 기본값으로 한다.

jQuery.fx.off: effects를 활성화/비활성화 한다. 전역으로 동작한다.

// test_id라는 id를 가진 요소를 클릭 시 a가 0.5초동안 서서히 사라지지 않고 바로 사라져 버린다.
$(function(){
    jQuery.fx.off = false;
    $(“#test_id”).click(function(){
        $(“#a”).hide(500);
    });
});
 cs

Utilities

잡다한 메서드 모음집. extend를 제외하곤 자주 사용되지 않는다.

jQuery.each()도 utilities에 포함되지만 여기에 작성하지 않음.

jQuery.support

jQuery.browser

jQuery.boxModel

support는 1.9에서 deprecated,

browse, boxmodel은 1.3에서 deprecated 되었고 현재 완전히 제거되었음

jQuery.trim( string ): 문자열 trim

jQuery.extend( target, object1 [, objectN ] ): 오브젝트를 확장

jQuery.grep( array, callback[, invert ] ): 배열로부터, 함수를 이용해 특정의 값을 제거

jQuery.makeArray( object ): 배열과 같이 이용하고 있는 오브젝트를, 실제로 배열로 변환

jQuery.map( array, callback ): 배열의 각 수치를 함수로 처리하고, 새로운 배열을 작성

jQuery.inArray( value, array ): 지정한 값이 배열중에 있으면, 그 인덱스를 리턴

jQuery.unique( array ): 배열의 중복된 값을 제거

jQuery.isArray( object ): object가 배열인지 판단

jQuery.isFunction( object ): object가 함수인지 판단

함수의 컨텍스트 조작하기

jQuery 1.4부터 새롭게 제공되는 jQuery.proxy는 jQuery의 네임스페이스를 관리할 수 있게한다. 이 함수는 “scope”와 메서드 이름을 받는 두개의 인자를 가지며 자바스크립트의 “this” 키워드를 통하여 다른 개체를 유지할 수 있게 한다.

예를 들어 “app” 는 “config” 와 “clickHandler” 메서드로 구성된 두개의 속성을 가지고 있다면,

var app = {
    config: {
       clickMessage: ‘Hi!’
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};
 cs

“clickHandler” 메서드를 실행하면 “this” 키워드를 통하여 “app” 개체에 접근하고 “config” 개체를 호출하여 값을 취득할 수 있음을 확인할 수 있다.

app.clickHandler(); // “Hi!” is alerted
 cs

이 메서드를 이벤트 핸들러로 바인딩하면:

jQuery(‘a’).bind(‘click’, app.clickHandler);
 cs

이렇게 바인딩된 메서드는 정상적으로 작동하지 않는다. jQuery(정확히 말하면 event model)에 의해서 “this”가 재정의 되어 버리기 때문이다. 이러한 문제들을 해결하기 위해서 제공하는 함수가 바로 jQuery.proxy다:

jQuery(‘a’).bind(‘click’,
    jQuery.proxy(app, ‘clickHandler’)
);
 cs

이제 앵커를 클릭하면 “Hi!”라는 문구가 나타난다.

jQuery.proxy가 리턴하는 것은 “wrapped”된 함수이다. 여기에는 이벤트가 되돌려준 개체와 “app”가 들고있는 두 속성을 “this”로 확장해서 돌려준 것이다. 이것은 이벤트를 바인딩 할 때 뿐만아니라 플러그인을 만들거나 콜백을 호출하는 데에도 유용하게 사용될 수 있다.

jQuery.contains()

jQuery.contains( container, contained )

jQuery 1.4에서는 jQuery 네임스페이스에 “contains” 함수를 제공한다. 이 함수는 낮은 수준의 함수로써 두개의 DOM 노드를 인자로 받아 수용여부를 구분한다. 첫 번째 요소가 두번째 요소를 포함하고 있는지에 대한 여부를 boolean 타입으로 리턴된다.

jQuery.contains(document.documentElement, document.body);
// Returns true – <body> is within <html>
 cs

[출처]http://noritersand.tistory.com/215

]]> http://uxcss.com/wp/archives/172/feed 0 172 페럴렉스 관련 포스팅 http://uxcss.com/wp/archives/169 http://uxcss.com/wp/archives/169#respond Sun, 30 Sep 2018 08:15:15 +0000 http://uxcss.com/wp/?p=169 Read More ...]]> 페럴랙스 스크롤(Parallax scrolling) 은 원래 게임이나 애니메이션과 같은 곳에서 사용하는 기법으로 오브젝트 간 시간 차이를 통해서 조금 더 역동적으로 화면을 표현하던 기법입니다. 이러한 기법이 CSS3와 HTML5 가 등장하면서 2011년부터 웹에 적용되어 점차 확대 되어 가고 있는 추세입니다.

2013년 Purdue University 의 연구에 따르면 페럴랙스 스크롤 기법은 UX 측면에서 새로운 경험을 제공하여 특정 측면의 향상을 가져오지만 반드시 UX 적인 향상을 가져오지는 않는다고 하였습니다.

이러한 페럴랙스 스크롤 웹사이트의 가장 큰 장점은 UX전문가(기획자 또는 디자이너 등)가 원하는 내용을 사용자에게 주도적으로 이야기 할 수 있다는 점입니다. 이러한 점을 통해서 사용자는 인식하지 못하고 사이트에서 제공하는 콘텐츠를 제공 받게 됩니다….

하지만 이러한 페럴랙스 스크롤 웹사이트는 다소 큰 이미지를 사용하고 있어 로딩 시간이 오래 걸린다는 단점이 있습니다. 또한 2011년 이후 활성화된 방식이라 모든 브라우저에서 호환되지 않는 다는 치명적인 단점도 있지요… 또한 과도한 스크롤로 인해 사용자는 웹사이트 자체에 어려움을 느끼거나 원하는 콘텐츠를 찾지 못하여 불만을 가질 수도 있을 것입니다.

하지만 사용자가 충분히 흥미를 가질 수 있고 잘 엮어진 스토리 형태로 제공을 한다면 사용자는 물 흐르듯 사이트에서 제공하는 콘텐츠를 제공 받을 수 있을 것입니다.

이러한 페럴랙스 스크롤 형태로 만들어진 몇 가지 참고 사이트를 알아보겠습니다.

http://www.madwellnyc.com/

http://www.iutopi.com/

http://www.culturalsolutions.co.uk/

http://www.spendeeapp.com/

http://moto.oakley.com/

http://www.putzengel.at/

http://everylastdrop.co.uk/

http://www.hanwhafireworks.com/index.do

http://www.nintendo.com.au/gamesites/mariokartwii/#home

http://www.sony.com/be-moved/

http://www.the-bea.st/

http://lamoulade.com/#!/home

정말 다양한 방식의 페럴랙스 스크롤 사이트가 있는데요. 이러한 사이트들은 간단한 정보를 사용자에게 쉽게 설명하기 위한 사이트들이 대부분 입니다. 이러한 페럴랙스 스크롤 사이트 개발을 위해서 다양한 곳에서 라이브러리와 튜토리얼을 제공하고 있습니다. 간단한 참고 사이트는 아래와 같습니다.

 

http://matthew.wagerfield.com/parallax/

http://markdalgleish.com/projects/stellar.js/

http://www.jarallax.com/

http://prinzhorn.github.io/skrollr/

http://speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials/

http://www.topdesignmag.com/20-examples-of-one-page-websites-that-are-using-parallax-scrolling/

http://www.creativebloq.com/web-design/parallax-scrolling-1131762

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

http://richardshepherd.com/smashing/parallax/

http://designwoop.com/2012/06/parallax-scrolling-tutorials-resources/

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://www.designzzz.com/jquery-parallax-plugins/

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

http://jalxob.com/cool-kitten/

http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

페럴랙스 스토롤 형태의 사이트는 사이트에서 제공하는 콘텐츠를 사용자가 거부감 없이 받아 들이도록 적절한 스토리를 통해서 사용자에게 표현하는 것이 가장 중요한 요소라고 생각합니다. 그러한 전달을 위해서는 사이트에서 가진 콘텐츠를 매끄럽게 연결해가는 기획이 필요하겠죠..또한 이러한 페럴랙스 스크롤 사이트를 기획할때 개발자와 디자이너와 소통할 수 있는 방식 또한 해결해야 될 문제점이라고 생각합니다.

출처: http://uipac.com/110 [UIpac (Show me the what to do!)]

 

======================================================================

 

원본 주소

http://dev.classmethod.jp/etc/html5-x-css3-x-jquery-6-parallax/

소개 – 패럴 랙스 효과에 대해

패럴랙스 (parallax)를 직역하면 시차 입니다. 시차 효과는 시야가 이동할 때 각 물체가 각각 다른 속도로 스크롤하여 깊이 사이를 비롯한 시각 효과를 말합니다.

애니메이션의 세계에서는 디 ○ 니 영화 에서 오래전부터 사용되어 있거나, 비디오 게임에서도 횡 스크롤 액션 게임 등에서 옛날부터 사용되고 있습니다.

JavaScript (jQuery)에서 패럴 랙스 효과

1 | 스크롤 값을 취득

얼마나 스크롤 했는가하는 값을 가져옵니다. 이것만으로는 아직 아무것도 없지만 모든 것은 여기서부터 시작입니다.

1
2
3
4
5
6
$ ( function () {
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/1-getscrollvalue.html

스크롤하면 값이 화면 오른쪽 상단에 표시됩니다.

2 | Position 값을 변경하여 움직임을 찍어 보면

취득한 스크롤 값을 사용하여 사각형을 움직여 봅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ ( function () {
  var top = $ ( '# item1' ) .offset (). top; // y 좌표의 초기 값을 취득
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
    // 취득한 스크롤 값을 사각형의 Y 좌표 값으로 지정
    // 스크롤 값을 나누어 이동 거리 변주
    $ ( '# item1' ) .css ( 'top' , top + value / 2);
    $ ( '# item2' ) .css ( 'top' , top + value / 4);
    $ ( '# item3' ) .css ( 'top' , top + value / 6);
    $ ( '# item4' ) .css ( 'top' , top + value / 8);
    $ ( '# item5' ) .css ( 'top' , top + value / 10);
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/2-setposition-y.html

취득한 값에 계산을 추가하여 구형의 움직임에 변화를 붙입니다.

3 | 구형을 옆에 움직여 본다

top 외에도 left 값도 변경하려고합니다. 요령은 앞의 예제와 동일합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ ( function () {
  var top = $ ( '# item1' ) .offset (). top; // y 좌표의 초기 값을 취득
  var left1 = $ ( '# item1' ) .offset (). left;  // item1의 x 좌표의 초기 값
  var left2 = $ ( '# item2' ) .offset (). left;  // item2의 x 좌표의 초기 값
  var left3 = $ ( '# item3' ) .offset (). left;  // item3의 x 좌표의 초기 값
  var left4 = $ ( '# item4' ) .offset (). left;  // item4의 x 좌표의 초기 값
  var left5 = $ ( '# item5' ) .offset (). left;  // item5의 x 좌표의 초기 값
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
    // 취득한 스크롤 양을 사각형의 XY 좌표 값으로 지정
    // 스크롤 값을 나누어 이동 거리 변주
    $ ( '# item1' ) .css ({ 'top' : top + value / 4});
    $ ( '# item2' ) .css ({ 'top' : top + value / 5, 'left' : left2 + value / 8});
    $ ( '# item3' ) .css ({ 'top' : top + value / 6, 'left' : left3 + value / 6});
    $ ( '# item4' ) .css ({ 'top' : top + value / 8 'left' : left4 + value / 5});
    $ ( '# item5' ) .css ({ 'left' : left5 + value / 4});
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/3-setposition-xy.html

4 | 배경 이미지를 움직여 본다

컨텐츠 영역의 배경 이미지를 스크롤로 움직여 봅니다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$ ( function () {
  var area2PosTop = $ ( '# area2' ) .offset (). top;
  var area3PosTop = $ ( '# area3' ) .offset (). top;
  var ashPosTop = $ ( '#ashColorArea' ) .offset (). top;
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
    // Area1
    $ ( '# area1' ) .css ( 'background-position-y' , value);
    // Area2
    if (value> area2PosTop) {
      $ ( '# area2' ) .css ( 'background-position-y' , value - area2PosTop);
      console.log ( 'area2 variable' );
    } else {
      $ ( '# area2' ) .css ( 'background-position-y' , 'top' );
      console.log ( 'area2 top' );
     }
    // Area3
    if (value> area3PosTop) {
      $ ( '# area3' ) .css ( 'background-position-y' (value - area3PosTop) * 2);
      console.log ( 'area3 variable' );
    } else {
      $ ( '# area3' ) .css ( 'background-position-y' , 'top' );
      console.log ( 'area3 top' );
    }
    // Area4
    if (value> ashPosTop) {
      var area4Top = value - ashPosTop - 800;
      $ ( '# area4' ) .css ( 'background-position-y' , area4Top);
    } else {
      $ ( '# area4' ) .css ( 'background-position-y' -200);
    }
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/4-bgscroll.html

Area1 과 Area2 은 화면 상단까지 오면 위치가 고정됩니다.
Area3 는 상단까지 오면 이번에는 아래에 내려가는 움직임을합니다.
Area4 화면 상단으로 올라가지 않고 중간에 위치가 고정되고, 그 위에 Red color area 가 통과 같은 움직임을합니다.

5 | Transform시켜 본다

스크롤에 의한 화면의 움직임뿐만 아니라 CSS3의 Transform 속성 도 조작 해보십시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ ( function () {
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
    var hoge1 = value * 0.001 + 0.5;
    if (hoge1> 0.5) {
      $ ( '# area1' ) .css ( 'transform' , 'scale (' + hoge1 + ')' );
    }
    if (hoge1> 0.1) {
      $ ( '# area2' ) .css ( 'transform' , 'perspective (1000px) rotateY (' + value + 'deg)' );
    }
    var hoge3 = 2 - value * 0.0009;
    $ ( '# area3' ) .css ( 'transform' , 'scale (' + hoge3 + ') rotate (' + value + 'deg)' );
    var hoge4 = value * 0.0009;
    if (hoge4 <= 1) {
      $ ( '# area4' ) .css ( 'opacity' , hoge4);
    }
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/5-transform.html

Transform은 CSS3의 기능 때문에 IE8 등의 기존 브라우저 에서 작동하지 않지만, 간편하게 화려한 움직임을 실현 할 수 있습니다.

CSS에서 패럴 랙스 효과

아주 간단한 것이지만, jQuery를 일절 사용하지 않고 CSS만으로 패럴 랙스를 실현하는 것도 가능합니다.

HTML

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
27
28
< body >
  < section ID = "first" class = "content" >
    < P class = "logo" > jQUery x HTML5 x CSS3 </ p >
    < article >
      < h1 > Parallax sample </ h1 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
  </ section >
  < section ID = "second" class = "content" >
    < article >
      < H2 ID = "toc-only-css" > Only CSS </ h2 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
  </ section >
  < section ID = "third" class = "content" >
    < article >
      < H2 ID = "toc-without-jquery" > Without jQuery </ h2 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
    < img src = "images / guernica.jpg" />
  </ section >
  < section ID = "theend" class = "content" >
    < H2 ID = "toc-the-end" > The End </ h2 >
  </ section >
</ body >

CSS ※ 패럴 랙스 관한 부분 만 설명

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
27
28
29
30
31
32
33
34
35
.content {
  position : relative ;
}
#first { background : url (images / bg-parallaxsample 01 .jpg) 50 % 0 no-repeat fixed ;}
#second { background : url (images / bg-parallaxsample 02 .jpg) 50 % 0 no-repeat fixed # 000 ;}
#third { background : url (images / bg-parallaxsample 03 .jpg) 50 % 0 no-repeat fixed # 000 ;}
#theend { background : url (images / bg-parallaxsample 04 .jpg) 50 % 0 no-repeat fixed # e6cda4 ;}
/ * section first * /
.logo {
  position : fixed ;
  top : 100px ;
  left : 50px ;
}
#first article {
  position : absolute ;
  top : 200px ;
  width : 800px ;
}
/ * section third * /
#third article {
  position : absolute ;
  top : 0 ;
}
#third img {
  position : absolute ;
  left : 30px ;
  top : 600px ;
}
/ * section the end * /
#theend h 2 {
  position : absolute ;
}
CSS 구현의 포인트
– 각 섹션의 배경 이미지를 background-position : fixed; 고정 배치
– 텍스트와 사진 이미지 등의 콘텐츠를 position : absolute; 절대 배치

이렇게하면 페이지를 스크롤해도 배경 이미지는 움직이지 않고 그대로 다음 섹션에 숨기는 등의 표현이 가능합니다.

  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/6-onlycss.html

jQuery x CSS에서 패럴 랙스 효과

위의 CSS 만의 샘플에 jQuery를 사용하여 더욱 움직임을 더합니다. 우선 jQuery에서 DOM을 조작하기 쉽게하기 위해 HTML의 다음 부분 다음에 추가됩니다.

HTML

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 ID = "first" class = "content" >
  < P class = "logo sprite" data-speed = "-1.5" data-offsety = "100" > jQUery x HTML5 x CSS3 </ p >
  < article >
    < h1 > Parallax sample </ h1 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
</ section >
< section ID = "second" class = "content" >
  < article >
    < H2 ID = "toc-only-css1" > Only CSS </ h2 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
</ section >
< section ID = "third" class = "content" >
  < article >
    < H2 ID = "toc-without-jquery1" > Without jQuery </ h2 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
  < img src = "images / img-parallaxsample01.jpg" class = "sprite" data-speed = "2" data-offsety = "1600" />
</ section >
< section ID = "theend" class = "content" >
  < H2 ID = "toc-the-end1" class = "sprite" data-speed = "0.8" data-offsety = "4180" > The End </ h2 >
</ section >

jQuery에서 액션을 지정할 때 매개 변수를 HTML5의 기능인 자체 데이터 속성 을 사용하여 지정합니다.

  • data-speed
  • data-offsety

자체 데이터 속성은 HTML 네임 스페이스에 속하지 않는 특성을 말하며, 코더가 독자적으로 정의 할 수 있습니다. jQuery Mobile (http://jquerymobile.com/)을 한번이라도 만진 적이있는 사람이라면 그 용도는 이해할 수 있을겁니다.

더 자세히 알고 싶은 분은 이 페이지(http://www.html5.jp/tag/attributes/data.html) 를 참조하십시오.

다음 JavaScript의 구현입니다. 우선 배경 이미지가 천천히 위로 움직여가는 처리 만을 구현합니다.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ ( function () {
  var $ window = $ (window);
  $ ( '.content' ) .each ( function (index) {
    var $ self = $ ( this );
    var offsetCoords = $ self.offset ();
    $ (window) .scroll ( function () {
      // If this section is in view
      if (($ window.scrollTop () + $ window.height ())> offsetCoords.top && ((offsetCoords.top + $ self.height ())> $ window.scrollTop ())) {
        var yPos = - ($ window.scrollTop () / 8);
        if ($ self.attr ( 'id' )! = 'first' ) {
          yPos + = 126;
        }
        var coords = '50 % ' + yPos + 'px' ;
        $ self.css ( 'backgroundPosition' , coords);
      }
    });
  });
});

여기까지 구현되면 일단 브라우저에서 확인해보십시오. 스크롤 할 것으로 각 섹션의 배경 이미지가 천천히 위로 움직이고있는 것이 알 수 있을까 생각합니다.

다음 스프라이트의 움직임을 구현합니다. 다음과 같이 코드를 추가 기입합니다.

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
27
$ ( function () {
  var $ window = $ (window);
  $ ( '.content' ) .each ( function (index) {
    var $ self = $ ( this );
    var offsetCoords = $ self.offset ();
    $ (window) .scroll ( function () {
      // If this section is in view
      if (($ window.scrollTop () + $ window.height ())> offsetCoords.top && ((offsetCoords.top + $ self.height ())> $ window.scrollTop ())) {
        var yPos = - ($ window.scrollTop () / 8);
        if ($ self.attr ( 'id' )! = 'first' ) {
          yPos + = 126;
        }
        var coords = '50 % ' + yPos + 'px' ;
        $ self.css ( 'backgroundPosition' , coords);
        // Check for other sprites in this section
        $ ( '.sprite' $ self) .each ( function (index) {
          var $ sprite = $ ( this );
          var yPos = - ($ window.scrollTop () / $ sprite.data ( 'speed' )) + $ sprite.data ( 'offsety' );
          $ sprite.css ( 'top' , yPos);
        });
      }
    });
  });
});

HTML 측에서 지정한 데이터 속성 값은 다음과 같이 JavaScript 측에서 참조 할 수 있습니다.

1
< P class = "logo sprite" data-speed = "-1.5" data-offsety = "100" > jQUery x HTML5 x CSS3 </ p >
1
$ ( '.logo' ) .data ( 'speed' ); // -1.5
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/7-jqueryxcss.html

 

참고 사이트

출처: http://bienmm.tistory.com/45 [비앤개발메모]

]]> http://uxcss.com/wp/archives/169/feed 0 169 DOCTYPE 선언의 중요성과 참고자료 http://uxcss.com/wp/archives/167 http://uxcss.com/wp/archives/167#respond Sun, 30 Sep 2018 07:27:22 +0000 http://uxcss.com/wp/?p=167 Read More ...]]>

Document Type Definition 는 브라우저 랜더링 모드를 지정해주고 유효성 검증기의 기준이 되므로 XHTML 문서의 상단에 반드시 선언해 주어야 한다. 만일 DTD 를 생략 하거나 형식이 잘못된 문서일 경우에는 웹 브라우저마다 코드의 해석방식이 다른 Quirks mode 로 렌더링이 되기 때문에 엉뚱한 결과물로 출력되는 문제에 직면하게 된다.

DTD 기본형식.
<!DOCTYPE
이 문서는
html
① HTML 문서로서
PUBLIC
① 국제적이며
“-//W3C//DTD XHTML 1.0 Transitional//EN” 
② 비공인인증인 W3C기관에 의해 XHTML 1.0을 Transitional 방식으로 영어공용어로 출력하며
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
③ 참조할 DTD 문서는”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” 이거다 

이런 식으로 되있으며
① 최상위 엘리먼트네임
② 국제적,공용 or 내부적 제한용
③ ISO공인인증기관 또는 비공인인증기관 등 본문서가 어디에서 만든 DTD를 사용하는 가에 대한 내용이다. 공인 인증기관 일경우 “+”를 비공인인증기관일경우엔 “-“를 사용한다. 참고로 W3C는 비공인 인증기관이다.

DOCTYPE 정의

  – DOCTYPE은 브라우저에게 웹페이지의 문서 종류를 알려주는 선언문이다.
– DOCTYPE은 HTML 태그가 아닌, DTD로 정의되어 있다.
– DOCTYPE은 웹페이지에서 제일 처음에 선언되어야 한다.
– DOCTYPE은 브라우저가 올바른 화면표시(rendering)를 하기 위해 필요하다.
– DOCTYPE을 선언하지 않는다면, 브라우저는 호환모드(quirks mode)로 웹페이지를 해석해서 화면표시를 한다.
하지만 호환모드일 경우, 브라우저별로 정확한 화면표시를 보장할 수 없다.


XHTML 1.0  Doctypes

  – strict : 선언된 XHTML 버전의 문법과 구조를 정확하게 사용한다. frameset(iframe, frame)이나 지원하지 않는
태그를 사용해서는 안된다.
  
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

– Transitional : 단어의 뜻 그대로 과도기적으로 사용하기 위한 선언이다. 호환성을 위해서 strict보다 유연하다.
선언된 XHTML 버전 이외의  문법과 구조를 허용한다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

– Frameset : Transitional속성과 더불어, frameset(iframe, frame)을 지원한다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

* Transitional에서 frameset을 사용해도 화면표시가 일어난다. frameset은 문서의 구조에 관한 태그이기 때문이
다. 사실 Frameset은 Transitional과 동일하게 취급된다.

XHTML 1.1

  – strict : 선언된 XHTML 버전의 문법과 구조를 정확하게 사용한다. frameset(iframe, frame)이나 지원하지 않는
태그를 사용해서는 안된다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>

* XHTML 1.1에서는 Transitional과 Frameset이 없어지고, strict만 남았다. 사실 XHTML의 특성상 모호한 것들
을 지원하는 것은 사리에 맞지 않는다. XHTML의 문법은 엄격한게 정의되어 있기 때문이다.

HTML

  – strict : 선언된 HTML 버전의 문법과 구조를 정확하게 사용한다. 지원하지 않는 태그를 사용해서는 안된다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>

– Transitional : 단어의 뜻 그대로 과도기적으로 사용하기 위한 선언이다. 호환성을 위해서 strict보다 유연하다.
선언된 HTML 버전 이외의  문법과 구조를 허용한다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>

– Frameset : Transitional속성과 더불어, frameset(iframe, frame)을 지원한다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd“>


* Transitional에서 frameset은 위의 XHTML 1.0과 같은 관계이다.

strict DOCTYPE의 필요성

현재 우리나라 대부분의 웹사이트는 Transitional DOCTYPE을 사용하고 있다. 웹사이트가 완전히 새롭게 제작되지 않는한 기존에 사용하고 있던 태그들을 지원해야 하기 때문이다. 사실 이론상으로는 strict DOCTYPE의 해석이 다른 DOCTYPE보다 브라우저상에서 빠르다고 한다. 하지만 PC나 브라우저의 발전속도를 볼때 그것이 뛰어난 장점이라고는 생각하지 않는다. 그렇다면 strict DOCTYPE은 의미가 없다고 생각될지 모른다.

하지만 그렇지 않다. 오히려 앞으로 strict DOCTYPE의 중요성이 더욱 커질 것이다. 왜냐하면 빠른 속도로 웹페이지로의 접근 디바이스가 모바일 디바이스로 바뀌고 있기 때문이다. PC보다 제한된 환경에서 웹페이지를 표현해야 하는 모바일환경에서는 strict의 엄격한 제한은 많은 리소스를 투입하지 않고도 화면표시(랜더링)를 할 수 있게 해줄것이다.

또한 웹봇(일종의 자동화된 크롤러, 특정 목적을 가진 크롤러)이 웹페이지를 분석할 경우에도 strict DOCTYPE일 경우, 정해진 문법과 구조상에서 훨씬 정확하게 내용분석이 가능해 질것이다.

* 참조 : 브라우저별 DOCTYPE 해석표

원본 : http://meyerweb.com/eric/dom/dtype/dtype-grid.html

Entry Meaning
Q Quirks mode
A Almost-standards mode
S Standards mode
– Status unknown

DOCTYPE given NN6.x NN7.0 Moz1.0 IE5/Mac IE6/Win IE7/Win
No DOCTYPE given Q Q Q Q Q Q
Unrecognized DOCTYPE Q S S S S S
Unrecognized DOCTYPE + URI Q S S S S S
HTML 2.0 Q Q Q Q Q Q
HTML 3.0 Q Q Q Q Q Q
HTML 3.2 Q Q Q Q Q Q
HTML 3.2 + URI Q Q Q Q Q Q
HTML 4.0 Strict S S S S S S
HTML 4.0 Strict + URI S S S S S S
HTML 4.0 Transitional Q Q Q Q Q Q
HTML 4.0 Transitional + URI Q Q Q S S S
HTML 4.0 Frameset Q Q Q Q Q Q
HTML 4.0 Frameset + URI Q Q Q S S S
HTML 4.01 Strict S S S Q S S
HTML 4.01 Strict + URI S S S S S S
HTML 4.01 Transitional Q Q Q Q Q Q
HTML 4.01 Transitional + URI S A S S S S
HTML 4.01 Frameset Q Q Q Q Q Q
HTML 4.01 Frameset + URI S A S S S S
XHTML 1.0 Strict S S S S S S
XHTML 1.0 Strict + URI S S S S S S
XHTML 1.0 Transitional S A S S S S
XHTML 1.0 Transitional + URI S A S S S S
XHTML 1.0 Frameset S A S S S S
XHTML 1.0 Frameset + URI S A S S S S
XHTML 1.0 Strict w/XML S S S S Q S
XHTML 1.0 Strict w/XML + URI S S S S Q S
XHTML 1.0 Transitional w/XML S A S S Q S
XHTML 1.0 Transitional w/XML + URI S A S S Q S
XHTML 1.0 Frameset w/XML S A S S Q S
XHTML 1.0 Frameset w/XML + URI S A S S Q S
Any XML S S S S – –
Any XML + URI S S S S – –

 

출처: http://maen2001.tistory.com/2 [감성 퍼블리셔 html,css]

]]> http://uxcss.com/wp/archives/167/feed 0 167 CSS: 선택자(Selector) 이해 http://uxcss.com/wp/archives/165 http://uxcss.com/wp/archives/165#respond Fri, 28 Sep 2018 00:37:17 +0000 http://uxcss.com/wp/?p=165 Read More ...]]> 1. CSS 선택자(Selector)란?

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 먼저 CSS에서 스타일이 어떤 방식으로 정의되는지 알아봅시다.

1.1 Rule Set

Rule Set(Rule)은 HTML페이지 안의 특정 요소들을 어떻게 렌더링(Rendering) 할 것인지 브라우저에게 알려주는 CSS 문장입니다. 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 집합처럼 나타냅니다.

[그림 1] Rule Set

이런 문장들을 한군데에 모으면 스타일 시트(Style Sheet)를 이루게 되어, 많은 수의 스타일 규칙들을 관리하기 쉬워집니다.

1.2 선택자(Selector)

위쪽 [그림 1]을 다시 보시면, Rule Set 제일 앞 부분의 선택자 요소를 볼 수 있는데요. 왼쪽 중괄호 “{“가 나오기 전의 부분 모두가 선택자입니다. 선택자는 Rule Set의 영향을 받는 HTML페이지 안의 특정 element들을 선택해서 선언 블록(Declaration Block)의 내용을 적용시켜 줍니다.

참고)
@media print { background-color: transparent; } “@”키워드로 시작하는 문장은 Rule Set이 아닌 At-Rule이기 때문에 위 문장에서의 중괄호 전 부분은 선택자가 아닙니다.

2. 선택자(Selector)의 종류

디자인 요소를 의도에 알맞게 적용하기 위해서는 많은 종류의 선택자를 잘 혼합해서 사용하는 것이 중요합니다. 그 종류와 CSS 레벨, 지원하지 않는 브라우저 버전을 함께 알아봅니다.

2.1 전체 선택자(Universal Selector)

패턴 의미 CSS Level 지원하지 않는
브라우저
* HTML페이지 내부의 모든 태그를 선택합니다. 2 – 
/* CSS */
* { margin: 0; text-decoration: none; }

[예제 1] 전체 선택자

전체 선택자는 HTML페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다. 그렇기 때문에 보통 [예제 1]처럼 margin이나 padding값을 초기화하는 등 기본값을 정해둘 때 사용합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있습니다. 따라서 자주 사용하지 않는 것이 좋습니다.

2.2 태그 선택자(Type Selector)

패턴 의미 CSS Level 지원하지 않는
브라우저
E 태그명이 E인 특정 태그를 선택합니다. 2 – 
/* CSS */
p { background: yellowgreen; color: darkgreen; }

<!-- HTML -->  
<p>태그 선택자(Type Selector)</p>  
<div>태그 선택자(Type Selector)</div>

[예제 2] 태그 선택자

태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자입니다. [예제 2]를 보시면 CSS에서

태그에 대한 스타일만 지정이 되어있으므로,

태그에는 개발자가 지정해주는 스타일이 적용되지 않습니다.

2.3 클래스 선택자(Class Selector)

패턴 의미 CSS Level 지원하지 않는
브라우저
.myClass 클래스 속성값이 myClass으로 지정된 요소를 선택합니다. 1 – 
/* CSS */
.class1 { background: yellowgreen; color: darkgreen; }
div.class2 { background: darkgreen; color: yellowgreen; }

<!-- HTML -->  
<p class="class1">클래스 선택자(Class Selector)</p>  
<p class="class2">클래스 선택자(Class Selector)</p>  
<div class="class2">클래스 선택자(Class Selector)</div>

[예제 3] 클래스 선택자

클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택합니다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작성합니다. [예제 3] CSS 코드의 첫번째 스타일 규칙은 class1이라는 class 속성값을 가진 모든 태그를 선택합니다. 하지만 두번째 스타일 규칙처럼 마침표 앞에 태그를 붙여주면 범위를 그 특정 태그에 한합니다. 결국 HTML 코드의 두번째

태그 부분은 class 속성값이 class2임에도 선택되지 않습니다.

클래스 선택자를 사용하기 전에 생각해야 할 부분

  1. class요소 대신 사용할 수 있는 HTML 태그가 있는지 확인합니다.
    한가지 예를 들어보겠습니다. heading처리한 글씨처럼 보이기 위하여 <h1>과 같은 태그 대신 class선택자를 사용하여 스타일 속성을 줄 수 있습니다. 하지만 이렇게 사용하면 스타일 시트를 적용하지 못하는 (극히 일부일지라도) 브라우저에서는 제목의 기능을 하지 못할 수 있습니다. 그래서, 가능한 올바른 HTML요소를 사용하고 스타일은 따로 적용해야 합니다. 결국 클래스는 HTML태그. 즉 구조를 대신할 수 없습니다.
  2. DOM트리 상단에 사용되는 클래스나 ID가 있는지 확인합니다.
    불필요하게 많은 class선택자를 사용할 필요는 없습니다. DOM트리 상단에 같은 스타일을 공유하는 클래스나 ID가 있다면, 새로 클래스 선택자를 사용할 필요없이 함께 사용하면 됩니다.

2.4 ID 선택자(ID Selector)

패턴 의미 CSS Level 지원하지 않는
브라우저
#myId id 속성값이 myId로 지정된 요소를 선택합니다. 1 – 
/* CSS */
#id1 { background: yellowgreen; color: darkgreen; }
div#id2 { background: darkgreen; color: yellowgreen; }

<!-- HTML -->  
<p id="id1">ID 선택자(ID Selector)</p>  
<p id="id2">ID 선택자(ID Selector)</p>  
<div id="id2">ID 선택자(ID Selector)</div>

[예제 4] ID 선택자

ID선택자는 마침표 대신 #를 사용하고, class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사합니다. 따라서 [예제4] 역시 [예제3]과 같은 결과가 나옵니다. 하지만 이 둘 사이엔 어떤 문자를 사용하느냐보다 더 중요한 차이점이 있습니다.

클래스 선택자를 써야 할까요? ID선택자를 써야 할까요?

비슷하게 사용되는 두 선택자 중 어떤 것을 사용해야 할지 고민에 빠지는 경우가 생길 수 있습니다. 그럴땐 다음 네 가지를 고려해보면 됩니다.

  1. 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID선택자를 사용하는 것이 좋습니다. 이는 다음과 같은 두 속성의 차이 때문입니다.
    • class속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는 데 사용됩니다.
    • id속성은 어떤 요소에 대해 유일한 특성을 정의합니다. (HTML 문서에서 특정 id속성값은 오직 하나만 있어야 합니다.)
  2. 클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용합니다.
  3. class 속성은 속성값을 두 개 이상 가질 수 있습니다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러종류의 스타일 규칙을 적용할 수 있습니다.
  4. ID선택자의 우선순위가 클래스 선택자의 우선순위보다 높습니다. 우선으로 적용되어야 할 스타일을 ID선택자를 사용하여 정의하는 것이 좋습니다. (선택자 우선순위는 뒤에서 다시 언급합니다.)

2.5 복합 선택자(Combinator)

복합 선택자는 두 개 이상의 선택자 요소가 모인 선택자입니다. (이는 꼭 태그 선택자 간의 결합이 아니어도 됩니다.)

하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)

패턴 의미 CSS Level 지원하지 않는
브라우저
E F E 요소의 자손인 F 요소를 선택합니다. 1 –
E>F E 요소의 자식인 F 요소를 선택합니다. 2 IE6 
/* CSS */
/* 하위 선택자 */
section ul { border: 1px dotted black; }

/* 자식 선택자 */
section>ul { border: 1px dotted black; }

[예제 5] 하위 선택자와 자식 선택자

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다. [예제 5]를 통해 선택되는 요소는 다음과 같습니다.

[그림 2] 하위 선택자
[그림 3] 자식 선택자

인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)

패턴 의미 CSS Level 지원하지 않는
브라우저
E+F E 요소를 뒤따르는 F 요소를 선택합니다.
(E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.)		 2 IE6
E~F E 요소가 앞에 존재하면 F를 선택합니다.
(E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.)		 3 IE6 
/* CSS */
/* 인접 형제 선택자 */
h1+ul { background: yellowgreen; color: darkgreen; }

/* 일반 형제 선택자 */
h1~ul { background: darkgreen; color: yellowgreen; }

[예제 6] 인접 형제 선택자와 일반 형제 선택자

같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다. [예제 6]을 통해 선택되는 요소는 다음과 같습니다.

[그림 4] 인접 형제 선택자
[그림 5] 일반 형제 선택자

2.6 속성 선택자(Attribute Selectors)

위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.

패턴 의미 CSS Level 지원하지 않는
브라우저
E[attr] ‘attr’ 속성이 포함된 요소 E를 선택합니다. 2 IE6
E[attr=”val”] ‘attr’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 E를 선택합니다. 2 IE6
E[attr~=”val”] ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다.
(공백으로 분리된 값이 일치해야 합니다.)		 2 IE6
E[attr^=”val”] ‘attr’ 속성의 값이 ‘val’으로 시작하는 요소를 선택합니다. 3 IE6
E[attr$=”val”] ‘attr’ 속성의 값이 ‘val’으로 끝나는 요소를 선택합니다. 3 IE6
E[attr*=”val”] ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다. 3 IE6
E[attr|=”val”] ‘attr’ 속성의 값이 정확하게 ‘val’ 이거나
‘val-‘ 으로 시작되는 요소 E를 선택합니다.		 2 IE6 
/* CSS */
/* E[attr]형식 */
a[href] { background: yellowgreen; color: black; }

/* E[attr="val"]형식 */
input[type="text"] { width: 150px; border: 1px solid #000; }

/* E[attr$="val"]형식 */
a[href$=".xls"] { background: darkgreen; }

<!-- HTML -->  
<a href="one.html">E[attr]형식</a>  
<input type="text" name="name">  
<a href="one.xls">E[attr$="val"]형식</a>

[예제 7] 속성 선택자

속성 선택자는 모두 앞쪽에 태그명과 대괄호 “[]”사이에 속성에 관련된 내용을 넣어서 선택합니다. E[attr=”val”]형식은 속성과 속성값이 완벽하게 일치하는 경우에 선택됩니다. 하지만 E[attr~=”val”]선택자는 띄어쓰기를 통해 여러개 올 수 있는 속성값 중 하나만 일치해도 선택합니다.

또한 E[attr^=”val”]형식은 “val”으로 시작하는 속성값을 선택합니다. 예를 들어 웹 문서에서 외부로 연결되는 링크가 있을 경우 http://로 시작하는지 확인하기 위해 이 선택자를 쓸 수 있습니다. 반대로 E[attr$=”val”]형식은 “val”으로 끝나는 속성값을 선택합니다. 이 선택자는 예제6에 나온 것 처럼 어떤 파일이 링크될 경우, 그 파일의 확장자를 확인하기 위해 쓸 수 있습니다.

2.7 가상 클래스 선택자(Pseudo-Classes)

가상 클래스는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말합니다.

링크 선택자(The link pseudo-classes)와 동적 선택자(The user action pseudo-classes)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::link 방문하지 않은 링크 E를 선택합니다. 1 –
E::visited 방문한 링크 E를 선택합니다. 1 –
E::active E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택합니다. 1, 2 –
E::hover E 요소에 마우스가 올라가 있는 동안 E를 선택합니다. 1, 2 –
E::focus E 요소에 포커스가 머물러 있는 동안 E를 선택합니다. 1, 2 –

:link와 :visited는 문서 안의 링크와 관련된 선택자입니다. 나머지 세가지 선택자는 링크 요소뿐만 아니라 다른 요소에도 적용할 수 있습니다. :active선택자는 해당 요소가 활성화된 상태를 선택합니다. 링크요소가 선택된 경우를 예로 들 수 있습니다. :hover선택자는 마우스 포인터가 해당 요소위에 올라가 있는 상태를 선택합니다. 흔히 말하는 롤오버 효과(rollover)를 만드는 선택자입니다. 마지막 :focus선택자는 해당 요소에 초점이 맞춰있는 상태를 선택합니다. 초점이 맞춰졌다는 것은 텍스트 필드 안에 커서가 놓여진 것과 같은 상태를 말합니다.

구조적 가상 클래스 선택자(Structural pseudo-classes)

구조적 가상 클래스 선택자는 위치를 기준으로 삼습니다. 그래서 요소가 몇번째에 있느냐에 따라 스타일을 다르게 지정할 수 있게 해줍니다. 순차적으로 같은 태그의 여러 항목이 있을 경우, 메뉴 간의 스타일을 변경하거나 할 때 이 선택자들이 유용하게 쓰입니다.

패턴 의미 CSS Level 지원하지 않는
브라우저
E::root 문서의 최상위 요소(html)를 선택합니다. 3 IE6, 7, 8
E::nth-child(n) 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다.
(E 아닌 요소의 순서가 계산에 포함)		 3 IE6, 7, 8
E::nth-last-child(n) 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다.
(E 아닌 요소의 순서가 계산에 포함)		 3 IE6, 7, 8
E::nth-of-type(n) E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택합니다.
(E 요소의 순서만 계산에 포함)		 3 IE6, 7, 8
E::nth-last-of-type(n) E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택합니다.
(E 요소의 순서만 계산에 포함)		 3 IE6, 7, 8
E::first-child 첫 번째 등장하는 요소가 E 라면 선택합니다.
(E 아닌 요소의 순서가 계산에 포함)		 2 IE6
E::last-child 마지막에 등장하는 요소가 E 라면 선택합니다.
(E 아닌 요소의 순서가 계산에 포함)		 3 IE6, 7, 8
E::first-of-type E 요소 중 첫 번째 E를 선택합니다.(E 요소의 순서만 계산에 포함) 3 IE6, 7, 8
E::last-of-type E 요소 중 마지막 E를 선택합니다.(E 요소의 순서만 계산에 포함) 3 IE6, 7, 8
E::only-child E 요소가 유일한 자식이면 선택합니다.
(E 아닌 요소가 하나라도 포함되면 선택하지 않습니다.)		 3 IE6, 7, 8
E::only-of-type E 요소가 유일한 타입이면 선택합니다.
(E 아닌 요소가 포함되어도 E 타입이 유일하면 선택합니다.)		 3 IE6, 7, 8
E::empty 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택합니다. 3 IE6, 7, 8

그 외의 선택자

언어 선택자(language pseudo-classes)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::lang(ko) HTML lang 속성의 값이 ‘ko’으로 지정된 요소를 선택합니다. 2 IE6, 7

부정 선택자(Negation pseudo-class)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::not(S) S가 아닌 E 요소를 선택합니다. 3 IE6, 7, 8

목적 선택자(The target pseudo-class)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::target E의 URI가 요청되면 선택합니다.
(따라서 E는 ID가 지정되어 있어야 합니다.)		 3 IE6, 7, 8

UI요소 상태 선택자(The UI element states pseudo-classes)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::enabled 사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다. 3 IE6, 7, 8
E::disabled 사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다. 3 IE6, 7, 8
E::checked 선택된 폼 콘트롤(input checked=”checked”)을 선택합니다. 3 IE6, 7, 8

가상 엘리먼트 선택자(Pseudo-Elements)

패턴 의미 CSS Level 지원하지 않는
브라우저
E::first-line E 요소의 첫 번째 라인을 선택합니다. 1 IE6
E::first-letter E 요소의 첫 번째 문자를 선택합니다. 1 IE6
E::before E 요소의 시작 지점에 생성된 요소를 선택합니다. 2 IE6, 7
E::after E 요소의 끝 지점에 생성된 요소를 선택합니다. 2 IE6, 7

3. 선택자(Selector) 우선순위

스타일 시트는 다음과 같은 3개의 CSS원천 소스(Original Source)를 가질 수 있습니다.

  • 제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
  • 사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
  • 사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일

스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있습니다. 그렇기 때문에 각 원천 소스간은 물론, 선택자 간의 우선순위를 알아야 합니다. 다음의 우선순위 규칙을 통해 원하는 스타일을 정확히 적용할 수 있습니다.

1) 원천 소스 우선 순위

!important 선언을 한 사용자 스타일 > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)

2) CSS 명시도(Specificity) 계산법

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.

이를 제외한 나머지 선택자는 대괄호 “[]”안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.

  • ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
  • 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
  • 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
  • 공용 선택자는 모두 0으로 계산합니다. (= d)
  • 가상 엘리먼트는 무시합니다.

→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.

초록색으로 표시된 태그 선택자 3개와 빨간색으로 표시된 클래스 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 b의 값은 10×1=10이 되고, c의 값은 1×3=3이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 13입니다.

초록색으로 표시된 태그 선택자 1개와 파란색으로 표시된 ID 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 a의 값이 100×1=100이 되고, c의 값은 1×1=1이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 101입니다.

이 두 스타일 규칙이 하나의 html태그에 겹치는 가능한 다음과 같은 경우가 있다고 하면, 우선순위 값이 101인 아래쪽의 스타일 규칙이 적용됩니다.

<ul>  
....
</ul>  
<ol>  
    <li class="num" id="selector1"></li>  /* 아래쪽 스타일 규칙이 적용되는 부분 */
</ol>

3) 마지막에 지정된 스타일을 우선 적용합니다.

스타일 우선순위가 같거나, 계산 방법이 없는 경우 마지막에 지정된 스타일이 우선으로 적용됩니다. 예를 들어 자손 선택자와 자식 선택자가 부딪힐 경우, 우선순위 계산법이 없으므로 두 선택자 중 마지막에 지정된 스타일이 적용됩니다.

[출처] http://www.nextree.co.kr/p8468/

]]> http://uxcss.com/wp/archives/165/feed 0 165 jQuery 효율적 작성 http://uxcss.com/wp/archives/163 http://uxcss.com/wp/archives/163#respond Fri, 28 Sep 2018 00:31:45 +0000 http://uxcss.com/wp/?p=163 Read More ...]]> 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅니다.

 

DOM 을 캐싱(Caching)하라

한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다.

Bad Code

$('button.confirm').on('click', function() {

    // DOM 한번 탐색
    $('.modal').modal();

    // DOM 다시 한번 탐색
    $('.modal').addClass('active');

    // DOM 또 다시 한번 탐색
    $('modal').css(...);
});

Good Code

$('button.confirm').on('click', function() {

    // DOM 한번만 탐색 (체이닝)
    $('.modal')
            .modal()
            .addClass('active')
            .css(...);
});

$('button.confirm').on('click', function() {
    // DOM 한번만 탐색 (캐시)
    var modal = $('.modal');

    modal.modal();
    modal.addClass('active');
    modal.css(...);
});

가급적 전역(Global)을 오염시키지 말 것

전역변수를 무분별하게 사용할 경우, 코드 충돌이 발생할 위험이 커진다.

Bad Code

$element = $('.element');
h = $element.height();
$element.css('height',h-20);

Good Code

var $element = $('.element');
var h = $element.height();
$element.css('height',h-20);

명시적인 ‘$’ 를 식별자를 사용하자. (Hungarian Notation)

jQuery 객체를 참조한 변수 이름 앞에 $ 를 붙여 jQuery 를 사용 가능한 객체임을 식별하도록 하여 혼란을 감소시키자.

Bad Code

var first = $('.first');
var second = $('.second');
var value = $first.val();

Good Code

var $first = $('.first');
var $second = $('.second');
var value = $first.val();

var 체이닝을 사용하라

싱글 var 를 활용하면  var 중복사용을 줄일 수 있다.

Bad Code

var first  = $('.first');
var second = $('.second');
var value  = $first.val();

Good Code

var $first = $('.first'),
    $second = $('.second'),
    value = $first.val();

‘on’ 메서드 사용을 선호하라

단, jQuery 1.7 이상 버전부터 on 을 지원한다는 사실을 잊지 말자.

Bad Code

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
});

Good Code

$first.on('click', function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.on('hover', function(){
    $first.css('border','1px solid red');
});

묶을 수 있다면 최대한 묶어서 사용하라 (간결화)

하나의 요소에 각각의 프로세스를 진행하는 것 보다 하나의 요소에 연결된 프로세스를 진행하는 것이 훨씬 빠르다.

Bad Code

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

Good Code

$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

문장을 연결(Chainning)되도록 묶어서 가독성이 뛰어난 코드를 만들어라.

하나의 객체에 메소드를 묶으면 진행될 프로세스를 이해하기 쉬워진다.

또한 읽기 쉬운(가독성) 코드는 수정이 용이하다.

Bad Code

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

Good Code

$second
    .html(value)
    .on('click',function(){alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'}, 500);

코드의 양을 줄여라.

무엇이든지 티끌모아 태산이듯이 코드의 양을 줄이면 용량을 줄임으로써 성능 최적화에도 도움이 된다.

&&, || 를 활용하자.

Bad Code

function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('.selector');
    }
}

if ( collection.length > 0 ) {}

Good Code

function initVar($myVar) {
    $myVar = $myVar || $('.selector');
}

if ( collection.length ) {}

DOM 조작이 많을 경우, 분리(Detach)하여 적용하자.

문서에 붙여진 상태에서 다수의 DOM 조작은 비효율적이기 때문에 조작(manupuration)하고 다시 붙이는게 좋다.

Bad Code

var $container   = $(".container"),
    $containerLi = $(".container li"),
    $element     = null;

$element = $containerLi.first();
// $element에 다수의 조작(Manipulation)이 수행

Good Code

var $container = $(".container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach();
// $element에 다수의 조작(Manipulation)이 수행

$container.append($element);

jQuery 유틸리티 메소드를 사용하라

인스턴스 메소드보다 유틸리티 메소드가 훨씬 빠르다.

Bad Code

$('#id').data(key,value);

Good Code

// var idEl = document.querySelector('#id');

var idEl = $('#id')[0];
$.data(idEl, key, value);

jQuery 객체를 참조한 변수를 통해 요소를 탐색하라

DOM 캐시와 같은 이유로 한번 참조한 대상을 통해 내부를 탐색하는 것이 보다 빠르다.

Bad Code

var $container       = $('.container'),
    $containerLi     = $('.container li'),
    $containerLiSpan = $('.container li span');

Good Code

var $container = $('.container '),
    $containerLi = $container.find('li'),
    $containerLiSpan = $containerLi.find('span')

전체 선택자 ( * ) 사용을 가급적 피하라

* 의 사용은 속도를 느리게 만드는 주범이다.

Bad Code

$('.container > *');

Good Code

$('.container').children();

암묵적 선택자보다는 명시적인 선택자를 활용하라

암묵적 선택자를 사용하는 것은 결국 *(전체 선택자)를 사용하는 것과 다름없다.

Bad Code

$('.someclass :radio');

Good Code

$('.someclass input:radio');

ID 선택자 사용 시에는 앞에 요소 이름을 제거하라

문서에는 단 하나의 ID 를 사용해야 하기 때문에 중복될리 만무하므로 불필요한 요소를 사용하여 탐색을 하게 할 필요가 없다.

Bad Code

$('div#myid');
$('div#footer a.myLink');

Good Code

$('#myid');
$('#footer a.myLink');

ID 내부의 ID 를 찾는 것은 어리석은 일이다

고유한 ID 영역 내부에서 탐색을 하는데 있어서 굳이 상위 영역의 식별자까지 사용하여 탐색을 하게할 필요가 없다.

Bad Code

$('#outer #inner');

Good Code

$('#inner');

가급적 최신 버전의 jQuery 를 사용하라

업그레이드된 최신 jQuery 버전이 속도, 기능면에서 좋다.

단, 2.x 버전부터는 IE 6,7,8 이 지원되지 않음에 주의( 해외는 우아한 기능 저하 철학을 추구한다. )

프로젝트의 최종단계에서는 jQuery CDN 을 사용하라

CDN(Content Delivery Network) 사용시 사용자의 가장 가까운 곳에서 데이터를 가져오기 때문에 속도 향상에 도움이 된다.

jQuery 만 사용하기 보다는 JS 와 함께 사용하라

jQuery 는 결국 JavaScript 일 뿐더러 jQuery 보다 JS 가 보다 빠르다.

출처: http://webclub.tistory.com/142?category=500543 [Web Club]

]]> http://uxcss.com/wp/archives/163/feed 0 163 미리보기의 정체, 페이스북의 오픈그래프 프로토콜 http://uxcss.com/wp/archives/155 http://uxcss.com/wp/archives/155#respond Sun, 23 Sep 2018 04:08:12 +0000 http://uxcss.com/wp/?p=155 Read More ...]]> 들어가기 전에

이 글은 링크의 미리보기 제목, 설명, 이미지의 정체에 대해서 알고 싶은 마케터들을 위해 유용한 내용을 담고 있습니다.

오늘날 페이스북이나, 네이버 블로그, 카카오톡 등에서 어떤 링크에 대한 미리보기 제목, 설명, 이미지를 제공하고 있습니다. 링크를 붙여넣을 때 생기는 미리보기 제목, 설명, 이미지는 도대체 어디에서 오는 것일까요?

 

메타태그란 무엇인가?

메타태그란 data에 대한 정보를 나타내는 태그이다.
물론 일부는 아니겠지만 우리는 서비스를 만들고 그 서비스를 최대한 노출 시키고 싶을 것이다.
그럼 그 페이지에서 어떤 내용이 중요한 줄 알고 노출을 시키지?

메타태그 사용예시

<meta name="description" content="지금 이 페이지에 관한 설명. 검색해서 나오는 설명에 해당하는 부분">
<meta name="keywords" content="페이지와 관련된 키워드, 한정, 블로그, HTML">
<meta name="author" content="작성자">

여기 까지는 기본적인 내용이다. 그럼 조금 더 나아가서는?

open-graph tag, twitter tag 들을 써보는건 어떤가?

  • 요즘은 페이스북, 카카오톡, 트위터 등에 링크를 공유하게 되면 그 링크대신 사진과 글귀가 나온다.

HTML 문서의 head와 메타정보

우리가 보고 있는 웹사이트는 기본적으로 HTML문서라는 사실을 모두 알고 계실겁니다. 이 HTML 문서는 크게는 head와 body라는 두 부분으로 구성되어 있습니다. 이 중 head에는 그 웹페이지를 구성하는 여러 가지 CSS, JavaScript 코드 조각들이나 참조 링크 등이 들어있고, 가장 중요하게는 오늘 다룰 메타 데이터들이 HTML 태그를 통해 담겨있습니다.

여기서 말하는 메타 데이터란 쉽게 말하면 해당 웹페이지를 구성하는 여러 구조화된 정보들 예컨대 제목, 설명, 이미지 등을 아예 명시적으로 웹페이지쪽에서 직접 정해서 표기해준 것을 말합니다. 예를 들어서 아래와 같습니다.

왜 이렇게 직접 표기해줘야 하는가? 크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어렵습니다. 따라서 웹사이트가 직접 저렇게 적어서 알려줘야 하는 것입니다. (아무리 머신러닝, 딥러닝, 자연어처리 기술이 발전해도 웹문서와 같이 비정형적인 정보에 대한 100% 정확도의 의미 인식은 불가합니다.)

그리고 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 방법 중 비교적 통일되고 인정된 방법으로서 우리가 알아보고자 하는 페이스북의 오픈그래프(Open Graph) 프로토콜이 있고, 이 오픈그래프 프로토콜이 우리가 보는 미리보기 화면의 실체를 구성하는 메타 데이터 표기방법입니다.

결론적으로 우리가 미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타나고 있습니다. 그 구체적인 작동 원래는 아래와 같습니다.

  1. 사용자가 링크를 입력창에 입력합니다.
  2. 페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 “링크”라는 것을 파악합니다. (흔히 말하는 정규표현식으로 해당 문자열이 링크라는 것을 알아냅니다.)
  3. 링크라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프(Open Graph) 메타 데이터를 긁어옵니다.
  4. 이중에서도 og:title, og:description, og:image가 각각 제목, 설명, 이미지의 정보를 나타냅니다.
  5. 그리고 그 정보를 바탕으로 미리보기 화면을 생성해주게 됩니다.

미리보기의 정체, 페이스북의 오픈그래프 프로토콜

오픈그래프 웹사이트에 가면 아래와 같이 오픈그래프에 대한 간단한 설명이 나와있습니다.

오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로부터 영감을 받았습니다. 이 페이지의 설계서는 버전 0.9의 Open Web Foundation Agreement 아래에서 사용 가능합니다. 이 웹사이트는 오픈소스이며, 2014년 10월 20일에 최종 업데이트 되었습니다.

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.

그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고, 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있습니다.

위에서 보듯이 기본적인 메타 데이터로는 제목(title), 설명(description), 대표 이미지(image), 표준 링크(url) 등이 있습니다. (여기서 canonicanl link, 즉 표준 링크란 같은 콘텐츠를 가리키는 여러 개의 URL 중에서 대표 하나의 URL을 말합니다. 이는 현실에 있는 실제 대상들을 가상의 그래프 기반 데이터베이스로 표현하려는 페이스북의 거대한 계획에서 중요한 요소입니다. 왜냐하면 하나의 대상은 원칙적으로 단 하나의 링크만으로 참조되어야 하기 때문입니다.)

이외에도 그 대상에 대한 구조화된(Structure) 데이터를 표현할 수 있는 여러 메타 데이터 표기용 태그들이 지원되고 있습니다. 자세한 것은 오픈그래프 웹사이트에서 확인할 수 있습니다.

웹의 세계에서 오픈그래프가 가지는 위상

오픈그래프는 웹의 세계에서 아주 높은 위상을 가지고 있습니다. 오늘날 웹페이지들이 어떤 기술을 가지고 만들어졌는지를 분석해주는 사이트 builtwith의 통계에 따르면 오픈그래프는 웹문서를 이루고 있는 여러 기술들 중에서 상당히 상위권에 포진하고 있습니다.

정말 기본적이고, 보편적인 JavaScript, CSS까지 포함해도 전체 기술 중 7번째에 올라와 있습니다. 숫자를 보면 대략적으로 상위권 10,000개의 웹사이트 중 약 4,200여 개의 사이트들이 오픈그래프를 사용하고 있는 것을 알 수 있습니다. 온갖 다양한 웹사이트 만드는 기술이 포진하고 있는 웹의 생태계에서 이 정도라면 아주 대단한 유행으로 볼 수 있을 것입니다.

좀 더 풍부한 메타데이터를 지원하는 트위터

그러나 모두가 “페이스북”의 제목, 설명, 이미지 식의 오픈그래프 사용법에 동의하는 것은 아닙니다. 비록 우리가 크게 많이 사용하는 페이스북, 네이버 블로그, 카카오톡 등 대다수의 서비스에서는 오픈그래프 프로토콜에만 준하여 미리보기를 보여주지만 트위터는 이에 더하여 자체적인 메타데이터 표기법을 가지고 있습니다.

만약 트위터에서 제공하는 메타데이터만 있을 경우 자사의 것을 먼저 참조하지만, 오픈그래프만 있을 경우 오픈그래프도 참조하고 있습니다. 그럼에도 불구하고 트위터의 메타 데이터 표기법도 결국에 오픈그래프를 참조한 것입니다.

자세한 내용은 트위터의 개발자 문서를 참조해주세요.

우리 웹사이트의 오픈그래프 적용 여부, 어떻게 알아보나?

페이스북은 오픈그래프에 대한 개발자들과 마케터들의 디버깅을 지원하기 위해 “Sharing Debugger”를 지원하고 있습니다. 사용 방법은 간단합니다.

사이트에 들어가서 검사하고 싶은 링크를 입력하면 됩니다. 그럼 아래와 같이 해당 링크에 대한 분석결과를 받아볼 수 있습니다.

개발자는 고쳤다는데, 왜 미리보기가 바뀌지 않았을까?

프로그래밍의 세계에서 캐싱(Caching)은 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 일종의 “임시”로 저장하여 다음 번에 호출될 때 더 빨리 해당 데이터를 공급해주는 것을 말합니다.

구체적으로는 데이터베이스에 저장된 어떤 정보를 한 번 불러온 후 캐시 메모리에 저장해놓거나, 어떤 HTML, CSS, JavaScript로 이뤄진 웹문서 전체 혹은 이미지 전체를 캐싱하기도 합니다. (전자에는 Memcached, Redis와 같은 시스템들이, 후자는 흔히들 “CDN”이라고 부르는 시스템들이 속할 것입니다.)

우리가 보는 모든 현대적인 웹서비스들, 앱들에는 이러한 캐싱 시스템이 구축되어 있습니다. 페이스북이나 네이버 블로그, 카카오톡 또한 예외가 아닙니다. 사용자들 입장에서는 더 빨리 웹사이트나 이미지가 로딩되서 좋고, 서비스측에서는 데이터베이스 구동에 들어가는 막대한 서버 자원을 절약할 수 있어서 좋습니다.

일반적으로 이런 캐싱에는 TTL(Time-to-Live)라는 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우 계속적으로 이미 캐싱된 데이터를 참조해서 불러올 수 있습니다.

따라서 실제로 서버에서 내려주는 HTML 웹문서 상의 오픈그래프는 바꼈을지라도, 이미 캐시된 웹문서가 내려지고 있는 상황일 수 있습니다. 즉, 저 TTL이 만료되기 전까지는 아무리 본 서버에서 개발자가 다시 개발해줘도, 미리보기는 바뀌지 않을 것입니다.

이 경우 페이스북은 다행히 캐싱을 리로드할 수 있는 버튼을 “Sharing Debugger”를 통해서 지원하고 있습니다.

카카오스토리의 경우 내부 개발자 도구를 통해서 카카오스토리 링크 정보 얻기 (/v1/api/story/linkinfo) API 호출을 통해 (외부 호출은 캐싱 번복 안됨) 캐싱을 리로드할 수 있도록 지원하고 있습니다.

이외의 서비스들은 향후 정보 습득하는대로 정리하여 업데이트하도록 하겠습니다.

클릭 2의 미스터리

미리보기 제목, 설명, 이미지와 관련된 사소한 현상입니다. 가끔 내가 바로 쓴 글을 페이스북에 올리면 바로 조회수가 2로 올라가는 현상을 볼 수 있습니다. 앞서서 말씀드린 것과 같이 크롤러가 우리 사이트를 한 번 “미리” 방문하는 현상 때문에 조회수가 1 올라갑니다.

구글과 같이 방금 방문한 사람이 크롤러라는 것을 명시해주는 경우도 있지만, 페이스북처럼 크롤러라는 것을 전혀 알 수 없게 해놓는 경우도 있습니다. 즉, 미리보기 화면이 로딩되는 것은 곧 나의 웹사이트를 페이스북에서 익명 유저가 1번 방문하는 것과 동일하다는 것을 인지해야 합니다.

결론

최근 카카오톡, 네이버 블로그 등 기존에 오픈그래프를 통한 미리보기를 지원하지 않았던 서비스들이 대거 오픈그래프를 지원하기 시작하면서 점점 더 이 미리보기 페이지에 들어가는 og:title, og:description, og:image를 넣는 것이 중요해지고 있습니다. (네이버 스마트 에디터 3.0 출시 이후부터 오픈그래프 더욱 강조하기 시작)

특히 설치링크라면 더더욱 사소한 문구 하나의 차이가 큰 설치율의 증감을 초래할 수도 있습니다.

따라서 반드시 아래와 같이 하시길 바랍니다.

  1. og:title, og:description, og:image를 HTML의 head에 반드시 넣고, 제대로 반영되었는지를 “Sharing Debugger”를 통해서 확인한다.
  2. 실제로 카카오톡, 페이스북, 네이버 블로그 등 사용하고자 하는 마케팅 채널에 링크를 넣고 미리보기 화면을 확인한다. (실제 보여지는 이미지가 사이즈가 각 서비스마다 다르기 때문에 반드시 주의할 것)
  3. 가능하다면 A/B 테스팅을 통해서 어떤 문구나 이미지가 가장 좋은 효과를 보이는지 확인한다.
  • 각 회사마다 이를 이용하기 위해 meta tag를 정의했다.
  • open graph는 카카오톡, 페이스북 등이 이를 사용한다.
<meta property="og:title" content="test"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://hanjungv.github.io/"/>
<meta property="og:description" content="설명을 적어보자!"/>
<meta property="og:image" content="/post_img/201702/16/1.png"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
  • 그럼 트위터는 어떻게 할까? 링크
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://hanjungv.github.io/">
<meta name="twitter:title" content="test">
<meta name="twitter:description" content="설명을 적어보자!">
<meta name="twitter:image" content="/post_img/201702/16/1.png">

이런 태그들을 이용하면 원하는 정보를 뽑아 그대로 출력시킬 수 있다.

조금 더~ 나아가서는???

  • 설명(description)은 간결하고 그 페이지를 명확하게 나타내주는 글로(1~2줄)
  • 가능하다면 페이지마다 다르게하자. 그게 정체성을 더 나타낼 것
  • description을 수정한다면 바로 웹페이지에 반영되지 않는다. 주기적으로 업데이트가 되는 시점 이후에 반영이 된다고한다.

 

페이스북 URL 디버거

페이스북 크롤러가 우리 페이지를 어떻게 볼 지, 다른 사람들에게 공유할 때 어떻게 보일지 미리보는 사이트가 있습니다. 페이스북 URL 디버거 를 사용하면 개발자 도구로 소스를 열어보는 것보다 오픈 그래프 태그를 쉽게 분석할 수 있습니다.

https://developers.facebook.com/tools/debug/sharing/https://developers.facebook.com/tools/debug/sharing/

URL을 입력하고 디버깅을 시작하면 해당 페이지의 미리보기도 나오고, 메타 태그만 뽑아서 보여줍니다. 수정해야할 부분이 있다면 경고를 통해 알려주니 참고해서 수정하시면 됩니다.

기본적인 오픈 그래프 태그

수정하기 전에 기본적인 오픈 그래프 태그만 간략하게 살펴보겠습니다.

Tag Description
og:url 페이지의 표준 URL (데스크탑 URL)
og:title 콘텐츠 제목
og:description 콘텐츠 설명. 미리보기에서 제목 아래에 표시
og:site_name 웹 사이트의 이름 (주소 아님)
og:image 콘텐츠를 공유 시 표시되는 이미지의 URL
fb:app_id 페이스북 인사이트를 사용하기 위한 앱 아이디
fb:admins 웹 사이트용 도메인 인사이트를 사용하기 위한 아이디

Hexo 에서 오픈 그래프 태그 추가하기

다행히 Hexo 와 Hueman 테마에서 웬만한 오픈 그래프 태그는 자동으로 만들어줍니다. 소스를 까보시면 헤더 쪽에 다음과 같은 함수로 오픈 그래프 태그를 생성하고 있습니다.

1
 
<%- open_graph([options]) %>
Option Description Default
title 페이지 제목 (og:title) page.title
type 페이지 타입 (og:type) blog
url 페이지 URL (og:url) url
image 페이지 커버 이미지 (og:image) 첫번째 이미지
site_name 사이트 이름 (og:site_name) config.title
description 페이지 설명 (og:desription) 내용의 200자
twitter_card 트위터 카드 타입 (twitter:card) summary
twitter_id 트위터 아이디 (twitter:creator)
twitter_site 트위터 사이트 (twitter:site)
google_plus Google+ 프로필 링크
fb_admins Facebook admin ID
fb_app_id Facebook App ID

 

출처:

http://blog.ab180.co/open-graph-as-a-website-preview/

https://futurecreator.github.io/2016/06/16/opengraph-social-meta-tag/

]]> http://uxcss.com/wp/archives/155/feed 0 155 파비콘(favicon) 소개 http://uxcss.com/wp/archives/153 http://uxcss.com/wp/archives/153#respond Sun, 23 Sep 2018 04:01:36 +0000 http://uxcss.com/wp/?p=153 Read More ...]]> 파비콘(favicon) 소개

파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다.

최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다.

파비콘(favicon) 기본 설정

1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root) 디렉토리에 위치해 왔다.

크로스브라우징을 염두에 둔다면, 어떠한 HTML 코드도 작성하지 않고, 자신의 웹계정 루트(root) 디렉토리에 16×16 과 32×32의 이미지를 하나에 품은(multiple sizes1) favicon.ico 파일을 위치시킴으로써, 설정을 마무리한다.

이 방법은 씨몽키(SeaMonkey) 브라우저를 제외한 모든 데스크톱 브라우저/버전에서(IE6 포함) 작동한다.

CMS의 경우에는 테마(theme) 혹은 이미지(image) 디렉토리를 이용하기도 한다.

HTML
<link rel="shortcut icon" href="/path/to/favicon.ico">

rel 속성과 type 속성 자세히

전통적으로 favicon.ico 파일은 16컬러 24비트 알파 투명도(alpha transparency) 포맷의 16×16 아이콘(ICO) 파일이다. 최근의 파비콘은 32×32를 지원하는데, 모든 주요 인기 있는 브라우저들에서 적절하게 축소되어 이를 표현해준다. IE10의 매트로(Metro)에서는 32×32 아이콘이 주소창에 사용된다.

ICO 파일을 사용할 경우 아래와 같은 크기 정도는 포함하는 것을 추천한다.

크기 용도
16×16 IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이
32×32 IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
48×48 윈도우즈 사이트 아이콘

좀 더 완벽하게 설정하길 원하고 1~3kb 쯤의 여분의 용량증가가 상관없다면 아래의 크기도 포함시켜도 된다.

크기 용도
24×24 IE9 고정된(pinned) 사이트 브라우저 UI
64×64 윈도우즈 사이트 아이콘, HiDPI/Retina 에서 Safari 나중에 읽기 사이드바

파비콘(favicon) 추가 설정

iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정이 가능하다. 고해상도 아이콘(152×152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다. 다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.

HTML
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

apple-touch-icon 세분화 대응

IE10 매트로는 타일(tile) 아이콘이 추가되었는데(apple-touch-icon과 유사한) 방문자가 고정(pins)할 경우, 시작화면에 이를 표시한다. 타일 아이콘의 크기는 144×144 PNG 파일이며, 투명한 배경을 사용해야 최상의 결과를 얻을 수 있다.

HTML
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

원하는 타일의 색상으로 content="#ffffff"부분을 수정하면 된다.

파비콘(favicion) PNG 파일 지원 사항

Chrome, Firefox, Opera 7+, 그리고 Safari 4+는 모두 PNG 파비콘을 지원하지만 Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있으면 선언된 순서에 상관없이 PNG 파비콘을 무시하고 ICO 파비콘을 사용한다. 즉, PNG 파비콘을 지원하지 않는 IE를 위해 ICO 파일을 사용하게 되는 순간, Chrome과 Safari는 PNG 파비콘을 무시하게 된다는 이야기다.

favicion.ico > favicon.png

HTML
<!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">
 
<!-- Firefox, Opera (Chrome and Safari say thanks but no thanks) -->
<link rel="icon" href="path/to/favicon.png">

ICO 파비콘은 multiple sizes를 지원하기에 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 이를 활용할 수 있지만 PNG 파비콘은 이것이 불가능하다. 그런 이유로 각각의 필요한 사이즈를 아래와 같이 모두 선언해야 한다.

HTML
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가?

  • Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다.
  • 맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32×32 파비콘을 사용한다.
  • 윈도우즈(Windows) 용 Chrome은 16×16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다.
  • 상기 옵션 중 아무것도 사용할 수 없는 경우, 양쪽 Chrome은 먼저 선언되는 파비콘을 사용하고 Firefox와 Safari는 마지막에 선언된 것이 사용된다. 사실 맥 용 Chrome은 16×16 파비콘을 무시하고 non-retina 기기에서 16×16으로 크기를 줄일때만 32×32 파비콘을 사용한다.
  • Opera는 사용가능한 아이콘 중에서 하나를 임의로 선택하게 된다.

파비콘(favicon) 실전 정리

적어도 아래의 ICO 파일은 준비한다.

크기 파일명 용도
16×16 & 32×32 favicon.ico IE를 위해 필요한 기본이다.

조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비한다.

크기 파일명 용도
152×152 favicon-152.png 일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여진다.

좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 하자.

크기 파일명 용도
32×32 favicon-32.png 일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대로 처리하지 못함.
57×57 favicon-57.png 표준 iOS 홈스크린(iPad Touch, iPhone 3G의 1세대)
72×72 favicon-72.png iPad 홈스크린 아이콘
96×96 favicon-96.png 구글TV 아이콘
120×120 favicon-120.png iPhone 레티나(retina) 터치 아이콘(Change for iOS 7: up from 114×114)
128×128 favicon-128.png Chrome 웹스토어 아이콘
144×144 favicon-144.png 고정(pinned)된 IE10 매트로 타일
152×152 favicon-152.png iPad 레티나 터치 아이콘(Change for iOS 7: up from 144×144)
195×195 favicon-195.png Opera 스피드 다이얼 아이콘
228×228 favicon-228.png Opera Coast 아이콘

파비콘(favicon)과 IE 브라우저 유의사항

  • IE8~10은 페이지의 첫 방문에 바로 파비콘을 표시해준다.
  • IE7은 첫번째 방문은 무시하고 재방문시에 파비콘을 표시해준다.
  • IE6은 사이트를 북마크를 한 후 브라우저를 다시 열면 표시해준다. IE6은 브라우저 캐시가 삭제 될 때마다 파비콘을 삭제하며, 사이트가 다시 북마크된다거나 파비콘이 어떻게든 다시 로드 될때까지 파비콘을 표시하지 않는다.

파비콘(favicon) 강제 새로고침

일반적으로는 필요치 않으나, 개발하는 동안이나 새로고침으로 파비콘이 표시되지 않을때를 고려한 방법이다.

  • 브라우저 캐시를 삭제한다(Ctrl + F5 혹은 Ctrl + Shift + R).
  • 만일 IE라면 브라우저를 닫고 다시 연다.
  • 만일 여전히 골머리를 썩고 있다면 새로운 탭을 열어보거나 How do I force a favicon refresh을 참고하라.
  • 일시적으로 명시적인 HTML 태그를 추가하고 쿼리 문자열을 추가한다. 확인이 완료된 후엔 이를 제거하자.
    HTML
    <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2">
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">

도움이 되는 도구들

  • OptiPNG : ICO 파일안에 넣을 PNG 파일들을 최적화 한다.
  • x-icon editor : ICO 파일을 만들수 있는 웹용 도구이다.
  • Favicon & App Icon Generator : PNG 파비콘을 다양하게 생성해준다(위에서 다룬 apple-touch-icon을 크기별로, IE10용 타일 파비콘을 생성).

참고문헌 및 관련링크.

  1. favicon-cheat-sheet
  2. understand-the-favicon

출처: http://webdir.tistory.com/337#footnote_link_337_1 [WEBDIR]

]]> http://uxcss.com/wp/archives/153/feed 0 153 HTML5.2 권고안이 2017년 12월 14일 발표(HTML5.3초안 공개) http://uxcss.com/wp/archives/140 http://uxcss.com/wp/archives/140#respond Thu, 21 Dec 2017 00:28:31 +0000 http://uxcss.com/wp/?p=140 Read More ...]]> HTML5.2 권고안이 2017년 12월 14일 발표되었습니다.
HTML5.1 이후 변경 사항을 간략하게 확인해보고 개발할 때 참고해야겠습니다.

2016년 1월 12일 이후 모든 변경 사항에 대한 자세한 내용은 다양한 편집 및 링크 수정을 포함하여 w3c/html Github 저장소 의 commit log를 통해 제공됩니다.

새로운 기능(New features)

 

삭제된 기능(Features removed)

  • keygen, menu, menuitem 요소
  • <input> 요소의 텍스트 타입에서 inputmode 와 dropzone 속성
  • showModalDialog 메소드
  • Plugin API

 

버그 수정 및 개선(Fixing bugs and matching reality better)

  • load 이벤트 지연 방지를 위해 네트워크 이외의 소스에서 미디어 리소스 요청 중지
  • 새로고침 빈도에 대한 임의의 상한 값을 제거
  • isMap 에서 image border 값을 계산 안함
  • accesskey 정의를 출력 가능한 글자가 필요하도록 업데이트
  • <summary> 활성화 알고리즘 개선
  • <table> 에 대한 행(row)과 열(column) 머리 글을 결정하는 알고리즘 수정
  • <summary> 렌더링 업데이트
  • 손상된 URL은 파싱되지 않은 값을 반환
  • currentScript 는 SVGScriptElement 를 반환 가능
  • <textarea> 요소를 재설정하면 dirty value flag 도 재설정
  • document.open() 와 document.close() 는 XML 문서 확인
  • HashChangeEvent URL은 DOMString 대신 USVString 사용
  • selection 의 member 타입에 null 사용 가능
  • data: URL은 별도의 출처로 취급
  • tabindex 이벤트로 포커스가 발생하는 요소에는 포인터가 아닌 장치일때 click 이벤트가 발생 안함
  • 샌드박스 컨텍스트에 대한 네비게이션
  • [html-aria] 에 허용 role 업데이트

 

지금부터 유효한 HTML 구문:

  • <body> 안에 <style> 사용 가능
  • DOM에 <main>요소가 1개만 표시된다면 <main> 요소를 여러개 사용 가능
  • img 요소에 presentation role 사용 가능
  • dl 의 자식 요소로 div 요소 사용 가능
  • li 의 자식 요소로 dfn 요소 사용 가능
  • fieldset 요소 안의 legend 요소 안서 Headings(h1-h6) 요소 사용 가능
  • datalist 요소의 자식 요소 option 에서 빈 값 사용 가능
  • 주석에서 2개의 연속된 하이픈 혹은 1개의 하이픈으로 끝나는 구문 사용 가능
  • BiDi 알고리즘 섹션의 제한 제거

 

지금부터 유효하지 않은 HTML 구문:

  • <caption> 요소의 role 속성 사용 불가
  • <p> 요소 하위의 Inline blocks, inline tables, floated, positioned block-level 요소 사용 불가
  • 문서 형식 선언(<!DOCTYPE>)에 HTML4 또는 XHTML1 strict 사용 불가

 

새로운 개념(New concepts)

 

편집 설명(Editorial clarifications)

  • Browsers should represent punycode addresses as natural unicode text for the email input type.
  • 브라우저는 <input> 요소의 email 타입에 punycode 주소를 유니 코드 문자로 나타내야 한다.
  • seekable IDL 속성에 대한 마지막 프레임 시간 개념을 명확히 한다.
  • suggestions source element 를 사용하여 제안을 필터링하는 브라우저는 label 속성에 부분 문자열 일치를 구현해야 한다.
  • 사용자는 포인팅 장치 사용 여부와 상관 없이 <area> 요소와 상호 작용할 수 있어야 한다.

[출처]

W3C: HTML 5.2

W3C: HTML 5.2 Changes

W3C: HTML 5.2 IS DONE, HTML 5.3 IS COMING

http://blog.gaerae.com/2017/12/html5-changes.html?m=1

 

https://mulder21c.github.io/2017/12/26/understanding-html-52-changes/

]]> http://uxcss.com/wp/archives/140/feed 0 140