Dust

지원되는 브라우저

chrome1.0+, edge, firefox, Internet Explorer, opera7.0+, safari1.0+, samsung internet

요소에 장식용 컨텐츠를 추가할 때 사용

html 파일에서 확인 할 수 없는 가상요소임

속성 content를 써주어야 하며 속성내에 텍스트나 이미지를 추가할 수 있음

::before, ::after 사용예시

a::before{
  content:'before';
  /* a태그 앞에 before가 붙음 */
}
a::after{
  content:'after';
  /* a태그 뒤에 after가 붙음 */
}

before 예시

::before는 해당 요소 앞에 붙음

after 예시

::after는 해당 요소 뒤에 붙음

- 위에 예시를 개발자도구(f12)로 확인가능하며 해당 css도 확인할 수 있다

가상요소에 html 속성 값, 이미지 넣기

.text-tag::after{
  display: inline-block;
  content: attr(data-content);
  /* 
  html 파일의 data-content 가져옴 
  ex) content: attr(class); 일 경우 
    -> attr에는 class명(text-tag)가 들어와 태그 뒤에 text-tag가 붙는다
    
  ex) content: url('이미지경로');
    -> 원하는 이미지 출력(크기조절 불가능)
    -> 원하는 이미지 출력(크기조절 가능은 밑에 활용예시 참고
  */
  color: red;
}

::after 활용예시(이미지)

nav 상단에 new tag는 가상요소 / 가상요소의 css

- width, height로 크기 조절 해준 후 background에 이미지를 깔아줌

- background-size 로 이미지 크기를 조절 할 수 있음

<div>
  <p class="text-tag" data-content="여기서부터 가상요소 텍스트 입니다! 색도 바꿨어요">가상요소 테스트 /</p>
</div>

가상요소 테스트 /

가상요소 텍스트 줄 바꿈

.enter::after{
  content: '텍스트\A줄바꿈';
  /* 줄바꿈 원하는 곳에 \A 추가 */
  background: white;
  white-space:pre;
  /* (넘칠경우 자동줄바꿈) */
  text-align: center;
}

+ 추가로 가상요소에 html 태그 삽입 

html 속성값을 가상요소에 넣고 줄바꿈 하고 싶었는데 부트스트랩이 아니면 불가능한 것 같았다,,

결국 패딩값이랑 max-width, min-width 사용해서 임시로 만들어놓음 ,, 

가상요소 content 속성 내에 html 태그 삽입은 불가능

참고

https://stackoverflow.com/questions/14459691/bootstrap-popover-hides-line-breaks

https://dasima.xyz/css-content/

웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의함

head tag 사이에 입력하는 특수 태그

사이트의 디자인에는 영향을 미치지않으며 문서가 어떤 내용을 담고 있는지, 키워드, 저자 등의 문서 자체의 특성을 담는다

(저자와 설명, 항목명을 추가(name, content, http-equiv))

검색엔진 결과 페이지에서도 사용됨

복수 지정시 콤마, 사용

종류

모바일 접속시 모바일 크기에 맞춤

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!-- initial-scale=1.0 은 초기 로드 시 줌 레벨 설정 -->
<!-- user-scalabl=yes 는 화면 확대 및 축소 여부 설정 (no설정 시 확대 및 축소 불가능) -->

문서 인코딩 방식 지정

<meta charset="utf-8" />

검색 엔진에 의해 검색되는 단어

<meta name="Keywords" content="키워드1, 키워드2, 키워드3, ..." />

검색 결과에 표시되는 문자를 지정

<meta name="Description" content="키워드1, 키워드2 ~ 를 활용한 페이지 만들기(웹페이지 설명에 대한 정의)" />

검색 로봇 제어

<meta name="Robots" content="noindex, nofollow" />
<!-- noindex(index 하지 않도록 함), nofollow(문서에 링크된 다른 문서를 긁어가는 것을 건너뜀) -->
<meta name="robots" content="index, follow" />
<!-- 문서, 링크 긁어감 -->
<meta name="robots" content="noindex, follow" />
<!-- 문서는 긁어가지 않음, 링크 긁어감 -->
<meta name="robots" content="index, nofollow" />
<!-- 문서는 긁어감, 링크 안 긁어감 -->

페이지 전환(자동으로 새로고침)

<meta http-equiv="refresh" content="10" url="https://www.naver.com" />
<!-- content 에 딜레이 값 입력, url에 띄워줄 주소 입력 -->
<!-- 접속자가 많을 때 임시방편으로 사용가능, 10초 후 해당 url 주소로 이동 -->
<meta http-equiv="refresh" content="30">
<!-- 30초마다 문서 새로고침 -->

브라우저 호환성

<meta http-equiv="X-UA-Compatible" content="IE-edge" />

홈페이지 주제

<meta http-equiv="Subject" content="먼쥐 블로그" />

문서 제목

<meta name="title" content="문서의 제목" />

페이지 작성자 정의

<meta name="author" content="minji07" />

모바일 홈 화면 추가 시 어플 이름을 지정, 웹 애플리케이션이 아닌 때에는 이 속성을 사용할 수 없으며 문서 내에서 한번만 지정 가능함

<meta name="application-name" content="어플이름" />

결과만 보여줄 수도 있고 css, js 화면 탭을 기본으로 보여줄 수 있음

원하는 위치에 붙여넣기

See the Pen Untitled by min-ji07 (@min-ji07) on CodePen.

끗

onclick

onclick 요소를 클릭할 때 이벤트 발생

확인하기

<div onclick="alert('안녕하세요')">클릭</div>
<div onclick="myFunction();" class="click">클릭</div>
<!-- myFunction() 메소드를 불러옴 -->

var click = document.querySelector('.click');
click.onclick = function(){
  // 원하는 내용
  // ex) 글꼴 색상 변경시
  click.style.color = 'red';
}

document.onclick = clickEvent;
function clickEvent(){
  // 원하는 내용
}

alert

메세지를 지정할 수 있는 모달창을 띄움

window.alert('alert를 클릭했습니다.');
alert('alert를 클릭했습니다.');
// 둘 다 같은 내용으로 window 창을 켰을 때 확인할 수 있음

prompt

텍스트 입력 가능한 모달창을 띄움

사용자가 입력한 문자열을 반환, 취소 또는 Esc 클릭시 null을 반환함

window.prompt('prompt를 클릭했나요?', '네');

var name = prompt('당신의 이름은?','');
window.alert('당신의 이름은 ' + name + ' 입니다.');
// 당신의 이름은 ㅇㅇㅇ 입니다.

confirm

확인, 취소 버튼이 있는 모달창을 띄움

사용자가 확인 버튼을 누르면 true, 취소 또는 Esc 클릭시 false를 반환함

window.confirm('취소, 확인을 확인해보세요.');
// ex)
if(window.confirm('카테고리로 이동하시겠습니까?')){
    window.open('https://min-ji07.tistory.com');
}

모달창이 떠있는 경우 스크립트의 실행이 일시 중단되며 창을 닫기 전까진 상호작용이 불가능함

모달창의 위치는 브라우저가 결정하며 모양은 브라우저마다 다름

var lastScrollTop = 0;
    var delta = 5;
    var fix = document.querySelector('.category-banner');
    var fixWrap = document.querySelector('.wraper');
    var fixHeight = fix.offsetHeight;
    var didScroll;

    window.onscroll = function(e){
        didScroll = true;
    }
    // 반복 0.25초마다 스크롤 여부 체크하여 scroll() 호출
    setInterval(function(){
        if(didScroll){
            scroll();
            didScroll = false;
        }
    }, 250);
    function scroll(){
        var nowScrollTop =  window.scrollY;
        console.log(nowScrollTop);
        if(Math.abs(lastScrollTop - nowScrollTop) <= delta){
            return;
            // 0 - 세로 높이가 크거나 같을경우 숫자 반환?
        }
        if(nowScrollTop > lastScrollTop && nowScrollTop > fixHeight){
            // 세로 높이 > 0 and 세로높이 > body 높이
            // 상단 고정 헤더 효과 주기
            fix.classList.add('active');
            fixWrap.classList.add('active');
        }else{
            if(nowScrollTop + window.innerHeight < document.body.offsetHeight){
            // 세로 높이 + 브라우저 창의 높이(창의 크기) < body 값(body의 컨텐츠가 많아지면 커짐)
                fix.classList.remove('active');
                fixWrap.classList.remove('active');
            }
        }
        lastScrollTop = nowScrollTop;
    }

HTMLElement.offsetHeight();

offsetHeight 의 속성은 읽기 전용

정수로서 수직 패딩 및 경계를 포함하는 요소의 높이를 반환

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

브라우저 관련 

https://baeharam.github.io/posts/javascript/js-window/

setInterval();

각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 조각을 실행

나중에 호출하여 제거할 수 있음 - clearInterval();

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

window.scrollY

window 문서가 세로로 된 픽셀 수 반환

window.scrollW

가로로 된 픽셀 수 반환

math.abs()

함수 수치의 절대 값을 반환 - 반환 값(주어진 숫자의 절대값)

math.abs(x)

Math.abs('-1');     // 1
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('string'); // NaN
Math.abs();         // NaN

function test(a,b){
  return Math.abs(a, -b);
}

console.log(test(3,5));
// 2
console.log(test(5,3));
// 2
console.log(test(1.23456, 7.89012));
// 6.655555~

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs

Element.classList

읽기 전용 속성

클래스 목록을 조작하는데 사용

var elementClass = element.classList;

classList.add
// 클래스 값 추가, 추가하려는 클래스가 class 속성에 존재한다면 무시
classList.remove
// 클래스 값 제거, 존재하지 않는 클래스 제거 시 에러발생하지 않음
classList.item(number);
// 콜렉션의 인덱스를 이용하여 클래스 값 반환
classList.toggle(String)
// 클래스 값을 토글(클래스 값이 존재한다면 제거 후 false 반환, 존재하지 않으면 추가하고 true를 반환한다)
// 두번째 인수가 있을 때 - 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거
classList.contains(String)
// 지정한 클래스 값이 element의 class 속성에 존재하는지 확인
classList.replace(oldClass, newClass);
// 존재하는 클래스를 새로운 클래스로 교체한다

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

비슷하게 Element.className로 대체할 수 있음

클래스명을 변경할 수 있음

var el = document.getElementById('item');

if (el.className === 'active'){
  el.className = 'inactive';
} else {
  el.className = 'active';
}

빈속성이 있는 경우 가반환 됨 ?