META 태그 속성

  1. http-equiv="항목명"
    웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.
  1. content="정보값"
    meta 정보의 내용을 지정합니다.
  2. name="정보 이름"
    몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.

META 태그 사용법

<html>
    <head>
        <meta name="subject" content="toy code project" />
        <meta name="description" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />
        <title>TOY CODE</title>
    </head>
    <body>
        //...code
    </body>
</html>

META 태그 종류

  1. KEYWORD
    검색이 되는 단어들을 정의합니다.

     <meta name="Keywords" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />

  2. DESCRIPTION
    검색 결과에 표시되는 단어를 정의합니다.

      <meta name="Description" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />

  3. ROBOTS
    검색 로봇을 제어합니다.

    • All (Default) : 'index, follow' 를 지정한 것과 같습니다.
    • None : 'noindex, nofollow' 를 지정한 것과 같습니다.
    • Index : 이 페이지를 수집 대상으로 지정합니다.
    • Follow : 이 페이지를 포함, 링크가 걸린 모든 페이지를 수집 대상으로 지정합니다.
    • Noindex : 이 페이지를 수집 대상에서 제외합니다.
    • Nofollow : 이 페이지를 포함, 링크가 걸린 모든 페이지를 수집 대상에서 제외합니다.
    • 아래와 같은 속성도 사용되지만 웹표준에서 인정하지 않는, 권고되지 않은 방식입니다.
    • Noarchive : 그 페이지를 캐시하지 않습니다.
    • Noimageindex : 그 페이지에 포함된 이미지를 검색 대상에서 제외합니다.
    • Noimageclick : 그 페이지에 포함된 이미지의 링크를 방지합니다.
      <meta name="Robots" content="index, follow" />

  4. CONTENT-TYPE
    문자 인코딩을 설정합니다.

    • EUC-KR / ISO-2022-KR : 한국어 문자 인코딩
    • EUC-JP / ISO-2022-JP : 일본어 문자 인코딩
    • GB2312 : 중국어 문자 인코딩
    • ISO-8859-1 : 북미, 서부유럽, 라틴 아메리카, 카리브해, 캐나다, 아프리카
    • ISO-8859-2 : 동유럽
    • ISO-8859-3 : 남동유럽, 에스페란토
    • ISO-8859-4 : 스칸디나비아, 발트 연안국
    • ISO-8859-5 : 불가리아어, 벨로루시어, 러시아어, 마케도니아
    • ISO-8859-6 : 아랍문자
    • ISO-8859-7 : 현대 그리스문자 언어뿐 만 아니라 수학 기호
    • ISO-8859-8 : 히브리어 문자를 사용하는 언어
    • ISO-8859-9 : 터키어
    • ISO-8859-10 : 에스키모, 북유럽 언어
    • UTF-8, UTF-16, UTF-32 : 모든 언어의 문자를 지원하는 인코딩
    • ISO-* 타입의 문자 설정은 크기의 제한이 있습니다. 또한 다국어 환경 ( 영문과 중문, 일문, 한글을 함께 사용하는 경우 )에서 호환되지 않기 때문에 유니코드 컨소시엄이 개발한 유니코드 표준 문자로 지정해야합니다. ( 대표적으로 UTF )
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  5. DATE
    사이트를 생성한 날짜를 명시해 줍니다.사용할 때 content '+09:00' 은 GMT(그리니치 표준시)로 부터의 시차이며, 한국은 '+09:00', 미국 동부는 '-05:00'(서머타임 때에는 -04:00)이 되며 나라/지역에 따라 결정됩니다.

      <meta name="Date" content="2021-08-04T07:45:37+09:00" />

  6. SUBJECT
    홈페이지의 주제를 지정해 줍니다.

      <meta name="Subject" content="TOY CODE PROJECT" />

  7. TITLE
    홈페이지의 제목을 지정해 줍니다.

      <meta name="Title" content="TOY CODE" />

  8. AUTHOR
    페이지를 제작한 제작자 이름을 지정해 줍니다.

      <meta name="Author" content="eaim93k" />

  9. PUBLISHER
    페이지를 제작한 제작사의 명칭을 지정해 줍니다.

      <meta name="Publisher" content="toy project" />

  10. OTHER AGENT
    페이지의 책임자를 지정해 줍니다.

      <meta name="Other Agent" content="eaim93k" />

  11. GENERATOR
    페이지의 제작도구를 지정해 줍니다.

      <meta name="Generator" content="VUE.JS 3.X" />

  12. EMAIL, REPLAY-TO
    이메일 주소를 지정해 줍니다.

      <meta name="Replay-To" content="email@eamil.com" /> <meta name="Email" content="email@eamil.com" />

  13. FILENAME
    이 페이지의 파일 이름을 지정해 줍니다.

      <meta name="Filename" content="index.html" />

  14. LOCATION
    회사의 위치를 지정해 줍니다.

      <meta name="Location" content="서울특별시" />

  15. DISTRIBUTION
    이 페이지를 배포한 사람을 지정해 줍니다.

      <meta name="Distribution" content="eaim93k" />

  16. COPYRIGHT
    이 페이지의 저작권을 지정해 줍니다.

      <meta name="Copyright" content="eaim93k" />

  17. REFRESH
    새로고침이나 페이지를 전환할 때 사용합니다.

      <!-- 120초 후에 페이지를 새로고침 -->
  <meta name="Refresh" content="120" />
  <!-- 10초 후에 페이지를 지정 URL로 이동 -->
  <meta name="Refresh" content="10;url=naver.com" />

  18. PAGE-ENTER
    페이지 진입시 전환 효과를 지정해 줍니다.

    • Box out : 네모난 박스가 안쪽에서 바깥쪽으로
    • Circle in : 원이 바깥에서 안쪽으로
    • Circle out : 원이 안쪽에서 바깥쪽으로
    • Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
    • Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
    • Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
    • Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
    • Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
    • Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
    • Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
    • Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
    • Random dissove : 안개와 비슷한 형태로 전환
    • Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
    • Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
    • Split Horizontal in : 양쪽에서 중앙으로 수평 이동
    • Split Horizontal out : 중앙에서 양쪽끝으로 수직이동
    • Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
    • Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
    • Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
    • Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
    • Random bars horizontal : 수평선이 무작위로 생성
    • Random bars vertical : 수직선이 무작위로 생성
    • Random : 임의로 생성
      <meta name="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />
저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] 버튼 클릭으로 이미지 다운로드  (0) 2017.12.27
[HTML] link 태그 사용법  (0) 2017.12.12
[HTML] 메타(meta) 태그  (0) 2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그)  (0) 2017.12.05
[HTML] class와 id의 정의  (0) 2017.12.05



예전 글이나 돌아다니는 글들을 보면

 

str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

 

이런 형태로 천단위 콤마를 찍는 경우가 많다.

하지만 더 간단한 방법이 있다.

 

str.toLocaleString();

 

을 사용하면 된다.

저작자표시

'WEB > JS' 카테고리의 다른 글

[JavaScript] 자바스크립트 제이쿼리 ready 함수 대체 할 수 있는 함수  (0) 2018.11.07
[JavaScript] 자바스크립트 브라우저 창 크기 구하기  (0) 2018.11.06
[JavaScript] 자바스크립트로 스크롤 이벤트 제어  (0) 2018.10.25
[JavaScript] JavaScript에서 현재 url 얻기  (0) 2017.12.08
[JavaScript] 자바스크립트 버튼 클릭시 실행여부 확인창 뜨게하기  (0) 2017.11.28



ajax를 사용하려면 jquery를 불러오는건 필수다.

 

그렇지 않게 하려면 순수 자바스크립트로 짜야하는데 그 방법은

XMLHttpRequest을 사용하면 된다.

 

기본 사용 법은 간단하다.


var xhr = new XMLHttpRequest();

xhr.open('post', 'url');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {

            console.log(xhr.responseText);
        } else alert("요청오류 : " + xhr.status);
    }
}
xhr.send(form);

저작자표시

'WEB > 비동기 통신' 카테고리의 다른 글

[Ajax] 기본  (0) 2017.11.28



https://easings.net/ko

사이트에 잘 정리되어있다.

저작자표시

'WEB > JQUERY' 카테고리의 다른 글

[jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기  (0) 2018.11.06
[jQuery] 항상 최신버전의 제이쿼리 가져오기  (0) 2018.10.23
[jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 )  (0) 2017.12.27
[jQuery] 제이쿼리 불러오기  (0) 2017.12.13
[jQuery] 클릭한 id값 가져오기  (0) 2017.11.28



제이쿼리는 일반적으로

$(document).ready( function () {} ); 을 사용하거나 $( function () {} ); 을 사용한다.


순수 자바스크립트로 대체하려면

document.addEventListener( "DOMContentLoaded", function () {} ); 을 사용하면 된다

저작자표시

'WEB > JS' 카테고리의 다른 글

[JavaScript] 숫자 포맷(천 단위로 콤마 찍기) 설정하기  (0) 2021.11.29
[JavaScript] 자바스크립트 브라우저 창 크기 구하기  (0) 2018.11.06
[JavaScript] 자바스크립트로 스크롤 이벤트 제어  (0) 2018.10.25
[JavaScript] JavaScript에서 현재 url 얻기  (0) 2017.12.08
[JavaScript] 자바스크립트 버튼 클릭시 실행여부 확인창 뜨게하기  (0) 2017.11.28



$(function () {

var navOffset = $(".menu-section").offset().top;

$(window).scroll( function() {

var scrollTop = $(document).scrollTop();

if (navOffset < scrollTop) {

$(".menu-section").addClass('nav-fixed');

$(".menu-section").addClass('top-zero');

} else {

$(".menu-section").removeClass('nav-fixed');

$(".menu-section").removeClass('top-zero');

}

});

});

저작자표시

'WEB > JQUERY' 카테고리의 다른 글

[jQuery] 제이쿼리 애니메이션 이동효과  (0) 2018.11.19
[jQuery] 항상 최신버전의 제이쿼리 가져오기  (0) 2018.10.23
[jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 )  (0) 2017.12.27
[jQuery] 제이쿼리 불러오기  (0) 2017.12.13
[jQuery] 클릭한 id값 가져오기  (0) 2017.11.28



// 가로길이 document.body.offsetWidth  document.body.scrollWidth // (문서 전체의 크기) document.body.clientWidth // (창의 크기) // 세로길이 document.body.offsetHeight document.body.scrollHeight //(문서 전체의 크기) document.body.clientHeight // (창의 크기) // 가로 길이 window.innerWidth // 브라우저 윈도우 두께를 제외한 실질적 가로 길이 window.outerWidth // 브라우저 윈도우 두께를 포함한 브라우저 전체 가로 길이 //세로길이 window.innerHeight // 브라우저 윈도우 두께를 제외한 실질적 세로 길이 window.outerHeight // 브라우저 윈도우 두께를 포함한 브라우저 전체 세로 길이

저작자표시

'WEB > JS' 카테고리의 다른 글

[JavaScript] 숫자 포맷(천 단위로 콤마 찍기) 설정하기  (0) 2021.11.29
[JavaScript] 자바스크립트 제이쿼리 ready 함수 대체 할 수 있는 함수  (0) 2018.11.07
[JavaScript] 자바스크립트로 스크롤 이벤트 제어  (0) 2018.10.25
[JavaScript] JavaScript에서 현재 url 얻기  (0) 2017.12.08
[JavaScript] 자바스크립트 버튼 클릭시 실행여부 확인창 뜨게하기  (0) 2017.11.28



$(window).bind('mousewheel', function(event) {

event.preventDefault();

var timeNow = new Date().getTime()

if(timeNow - lastAnimation < 1500) {

console.log('stop scroll');

return;

}

if (event.originalEvent.wheelDelta >= 0) {

console.log('Scroll up');

}

else {

console.log('Scroll down');

}

lastAnimation = timeNow;

});

저작자표시

'WEB > JS' 카테고리의 다른 글

[JavaScript] 자바스크립트 제이쿼리 ready 함수 대체 할 수 있는 함수  (0) 2018.11.07
[JavaScript] 자바스크립트 브라우저 창 크기 구하기  (0) 2018.11.06
[JavaScript] JavaScript에서 현재 url 얻기  (0) 2017.12.08
[JavaScript] 자바스크립트 버튼 클릭시 실행여부 확인창 뜨게하기  (0) 2017.11.28
[JavaScript] 자바스크립트를 이용해서 문자열 자르기  (0) 2017.11.28



<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<head></head> 사이에 넣어도 되고

</body>

위 스크립트가 집결되어있는 곳에 제일 상단에 넣어도 된다.


이렇게 쓰면 항상 최신 버전의 제이쿼리를 가져오지만 새로 사용되면서 사용이 더이상 지원되지 않는

함수들도 있기에 유지보수 관리를 좀 더 철저히 하기 바란다.

저작자표시

'WEB > JQUERY' 카테고리의 다른 글

[jQuery] 제이쿼리 애니메이션 이동효과  (0) 2018.11.19
[jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기  (0) 2018.11.06
[jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 )  (0) 2017.12.27
[jQuery] 제이쿼리 불러오기  (0) 2017.12.13
[jQuery] 클릭한 id값 가져오기  (0) 2017.11.28



function clipboard(str){ 
    $('#clip_target').val(str); 
    $('#clip_target').select(); 
    try { 
        var successful = document.execCommand('copy');  
        alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.'); 
    } catch (err) { 
        alert('이 브라우저는 지원하지 않습니다.'); 
    }
}

저작자표시

'WEB > JQUERY' 카테고리의 다른 글

[jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기  (0) 2018.11.06
[jQuery] 항상 최신버전의 제이쿼리 가져오기  (0) 2018.10.23
[jQuery] 제이쿼리 불러오기  (0) 2017.12.13
[jQuery] 클릭한 id값 가져오기  (0) 2017.11.28
[jQuery] 스크롤 맨 위로 부드럽게 이동  (0) 2017.11.28

+ Recent posts

티스토리툴바