All
[HTML] html5 tag 정리
: 주석 // a : 링크연결target="" _blank : 새창열기 _parent : 부모창에 열기 _self : 자신의 창에서 열기 _top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기 [name] : 지정된 이름에 링크 열기 : 생략어/스펠링(요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)The WHO was founded in 1948. : 두문자어/단어 (요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)Can I get this ASAP? : 연락처 : 이미지맵의 영역 : 문서내에서 독립적인 컨텐츠 : 사이드 바 : 오디오 파일 재생 // b : 텍스트 굵게 : html문서의 기준 URL을 명시(head요소 안에서 사용)..
[자바스크립트] 모바일 웹일 때 주소창이 사라지게 설정
위 소스를 모바일 사이트에서 사용자의 편의성을 고려하기 위해 주소창을 가리는 방법이다.이는 사실 주소창이 사라지는 것이 아니라 페이지의 x, y 값을 0, 0으로 설정해 주소창이 사라지는 것처럼 보이게 하는 것으로 사용자에게는 편의성을 제공할 수 있다. 다만 페이지 로딩이 느리면서 주소창이 있는 상태로 로딩되다가 갑자기 페이지가 위로 올라가기도 하는데, 이 사이에 사용자가 화면을 터치하며 원하지 않는 곳으로 페이지가 이동할수고 있으니 주의해야한다. ★ CDATA는 SGML이나 XML에서 문자열(string)을 표현할 때 사용하는 기본 요소이다. 안에 들어있는 내용은 문자열 데이터라는 뜻이다. 하위 태그는 무시해도 되는 태그라는 것을 파서에게 알려주므로 오동작이나 오류를 막을 수 있다.
[반응형] 반응형 웹 디자인
★ 반응형을 위한 기본 HTML 설정 => 문서의 인코딩은 utf-8로 설정하고, 부포트는 간단하게 가로값(width)을 디바이스의 기본 가로값(device-width)으로 유지하고 비율은 1.0으로 설정해 디바이스로 접속했을 때 디바이스의 웹 브라우저 해상도로 보이게 한다. ★ 파비콘 http://www.favicon.cc/=> 파비콘 사이트 ★ 해상도 1. 대형 모니터2. 와이드 모니터3. 일반 모니터4. 태블릿 PC5. 소형 태블릿 PC6. 스마트폰 모니터 해상도(스크롤 포함) 1024*7681280*9601920*12002560*1600 모바일 해상도(최저)아이폰 - 320갤럭시S3 - 360갤럭시 노트 - 400 https://en.wikipedia.org/wiki/Lists_of_display..
[AJAX] ajax에서 jquery찾기
ajax에서 jquery $(document).on('click', '선택자이름', function(){ }); ===>>> ajax 동적으로 클래스가 생기기 때문에문서가 로딩이 된 후에 클래스가 생겨서 그걸 못읽음
[AJAX] ajax기본
$.ajax({ url: 'product_list_append.php', //url주소 dataType: 'html', //타입:html or json type: 'GET', //호출 타입 :GET,POST.. data:{ code : "", s_code : "", page : page }, //보내고자 하는 데이터. 이건 개발자와 상의해야함 beforesend : function(){ $('.roading').show(); }, //보내기전 success: function(html) { $('#appendProduct').append(html); } });
[CSS] animation
@keyframes 와 애니메이션 소개CSS 애니메이션에서 가장 중요한 요소는 @keyframes 입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어지는 부분입니다. @keyframes 를 타임라인 안의 하나의 스테이지(구간)들 이라고 생각하세요. @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있습니다.다음으로 CSS 애니메이션이 작동하도록 @keyframes 를 선택자로 묶어주세요. 이것은 마지막에 @keyframes 선언 안의 모든 코드를 분석하고 초기의 스타일을 각 스테이지에 따라 새로운 스타일로 변경시킬 것입니다.@keyframes여기서 우리는 애니메이션 스테이지들을 정할 것입니다. 우리의 @keyframes 속성은:우리가 정..
[HTML] 시맨틱태그
header위에서 언급한 는 바로 밑에 쓰이지만 는 안에 있기 때문에 둘은 전혀 다릅니다. 는 주로 머리말, 제목을 표현하기 위해 쓰입니다. navHTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당합니다. 는 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능합니다. section영역은 콘텐츠를 ,,의 3가지 공간에 콘텐츠를 저장하는데요. 그 중 은 본문 콘텐츠를 담고 있습니다. 안에 을 넣는 것도 가능합니다. 그리고 반드시 제목 요소(h1~h6)을 가져야 합니다. article이 콘텐츠를 분류한다면 이 태그안에는 실질적인 내용을 넣습니다. 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 이고, 정..
[CSS] 선택자
https://jsfiddle.net/Kimara/b7s0qvyy/13/ 동위 선택자(sibling selector)동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 동위 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미합니다.이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 합니다. 일반 동위 선택자(general sibling selector)일반 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 다음 예제는 모든 태그와 동위 관계에 있는 요소 중에서 태그보다 뒤에 존재하는 태그를 모두 선택하는 예제입니다. 예제 : ..
[CSS] 플렉서블 박스 레이아웃
플렉서블 박스 레이아웃플렉서블 박스(flexible box) 레이아웃플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다. 플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다. 1. display2. flex-direction3. justify-content4. align-items5. flex-wrap6. flex-flow7. align-content 또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다. 8. order9. align..