Dust

짠

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

https://min-ji07.tistory.com/entry/%EC%9E%84%EC%8B%9C?category=905135 

지원되는 브라우저

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.

끗

지원되는 브라우저

chrome4.0+, edge9.0+, Firefox3.5+, internet Expolrer, opera7.0+, safari6.0+, samsung internet

객체를 다른 위치로 드래그 할 때 사용

기본적으로 텍스트 선택 영역, 이미지, 링크 외 드래그 불가능,

하지만 draggable="true" 속성을 설정할 경우 어떤 요소에서도 사용 가능하다

XUL 요소에 대해서는 draggable 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능하다

다른 요소에 드래그 앤 드롭을 적용하려면 이벤트 처리가 필요함

해당 속성으로(드래그 앤 드롭) 사용

- 파일 업로드

- 데이터 삭제 또는 추가

- 그 외 

예시

<p draggable="true">가능</p>
<!-- 요소 드래그 가능 -->
<div draggable="false">불가능</div>
<!-- 드래그 불가능 -->
<div draggable="auto">a, img 태그만 가능</div>
<!-- 브라우저의 기본 동작을 따름(href 속성이 지정된 a, src 속성이 지정된 img는 드래그 가능) -->

확인하기

<script>
    // 드롭 영역
    function allowDrop(event) {
        event.preventDefault();
        // 드롭을 허용하려면 요소의 기본 처리를 방지해야함
        // 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정 
        // 기본적으로 데이터/요소는 다른 요소에 삭제할 수 없음
    }
    function drop(event) {
        event.preventDefault();
        // 기본 처리 방지를 위해 호출(기본값은 드롭 시 링크로 열려 있음)
        // 드랍 될 요소에 해당 메소드가 없을경우 브라우저에서 드랍 이벤트를 허용하지 않을 수 있음
        var data = event.dataTransfer.getData("text");
        // 드래그 한 데이터를 가져옴
        event.target.appendChild(document.getElementById(data));
        // 객체의 아이디값, 아이디값을 드롭 요소에 추가
    }
    // 개체 영역
    function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
        // 데이터의 유형과 값을 설정
        // 데이터 유형은 text, 드래그 요소의 아이디값(예시, drag1, drag2)
    }
    
</script>

<style>
  .div{
    position: relative; 
    width: 100%; height: 100%; 
    display: flex; justify-content: space-between; align-items: center; 
    margin: 0 auto;
  }
  .drag{
    display: inline-flex; align-items: center; justify-content: center; 
    background: rgba(252, 216, 213, .3); 
    width: 80px; height: 80px; 
    border-radius: 50%;
  }
</style>
<body>
  <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
    <span class="drag" id="drag1" draggable="true" ondragstart="drag(event)">가능</span> 
    <span class="drag" id="drag2" draggable="true" ondragstart="drag(event)">불가능</span> 
    <span class="drag" id="drag3" draggable="true" ondragstart="drag(event)">auto</span> 
    <a class="drag" id="drag4" href="#" draggable="true" ondragstart="drag(event)">a tag auto</a>
  </div>
</body>

- 드래그 할 수 있는 부분과 할 수 없는 부분으로 나누기( 드래그 할 객체, 드래그 할 객체 드랍 영역)

- 드래그 할 영역은 draggable="true" 속성 추가

- 드랍 될 영역은 event.preventDefault() 추가

- 요소에 position: absolute 있으면 안움직임

ondragstart();
// 사용자가 요소를 끌어 시작할 때 발생
ondrag();
// 요소가 드래그 될 때 발생
ondragend();
// 드래그가 완료되면 발생
ondragenter();
// 드래그 소자 드롭 타겟을 입력 할 때마다
ondragover();
// 드래그 요소가 드롭 영역 위에 있을 때 발생
ondrop();
// 드래그 요소가 드롭 영역내에 드롭 될 때 발생
ondragleave();
// 드래그 요소가 드롭 대상을 떠날 때 발생

좀더 자연스럽게 원하는 위치에 옮기기

- jquery ui 를 써야하나본디,, 

참고

https://gahyun-web-diary.tistory.com/21

https://shxrecord.tistory.com/165

event.preventDefault();

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

http://www.w3bai.com/ko/html/html5_draganddrop.html

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

html 드래그 앤 드롭 api

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

https://www.w3schools.com/html/html5_draganddrop.asp

https://webisfree.com/2019-11-22/html5%EC%9D%98-%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%9E%8D-%EA%B5%AC%ED%98%84-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-drag-and-drop

https://jqueryui.com/draggable/

https://api.jqueryui.com/draggable/#event-drag