• Q&A
  • 수강신청
  • 회원가입
  • 로그인

[selector] CSS - :target 가상선택자 - 내부링크목적지요소 (= :target선택자 = 타겟선택자 = 목적지선택자, IE9) ※ 탭/모달/열기닫기

:target 예제

 

<style>

:target {

  border: 1px solid gray;

  background-color: yellow;

  padding:20px;

}

</style>


<h1>홈짱닷컴</h1>

<p><a href="#hz1">사이트주소</a></p>

<p><a href="#hz2">사이트소개</a></p>

<p id="hz1"><b>Homzzang.com</b></p>

<p id="hz2"><b>홈페이지제작관리</b></p>


결과보기

 

 

:target 정의

 

문서 내부 링크의 현재 활성화 된 목적지요소 (= 대상요소 = 타겟요소) 의미.

 


 

1.

# 다음에 앵커 이름 있는 URL은 문서 내 특정 요소에 연결되는데, 그 링크되는 요소가 대상 요소 의미.

 

2.

IE9 이상 주요 최신브라우저 지원.

 

 

 

:target 구문

 

selector:target {

  css 선언 내용;

}

 

 

:target 예제 - Tab()

 

<style>

.tab div {

  display: none;

}


.tab div:target {

  display: block;

}

</style>


<div class="tab">

    <a href="#link1">HTML</a>   

    <a href="#link2">CSS</a>

    <a href="#link3">JS</a>


    <div id="link1">

      <h3>HTML</h3>

      <p>기본골격</p>

    </div>


    <div id="link2">

      <h3>CSS</h3>

      <h4>세부디자인</h4>

    </div>


    <div id="link3">

      <h3>JS</h3>

      <p>동적기능</p>

    </div>

</div>

 

결과보기

 

 

:target 예제 - Modal (모달)

 

<style>

/* Chrome, Safari, Opera */

@-webkit-keyframes hz {

  from {top:-100px;opacity: 0;}

  to {top:0px;opacity:1;}

}


@keyframes hz {

  from {top:-100px;opacity: 0;}

  to {top:0px;opacity:1;}

}


/* 모달배경 */

.modal {

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 0.4);

}


/* 타겟 시 Modal 노출 */

.modal:target {

  display: table;

  position: absolute;

}


/* modal 상자 */

.modal-dialog {

  display: table-cell;

  vertical-align: middle;

}


/* modal 내용 */

.modal-dialog .modal-content {

  margin: auto;

  background-color: #f3f3f3;

  position: relative;

  padding: 0;

  outline: 0;

  border: 1px #777 solid;

  text-align: justify;

  width: 80%;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


  -webkit-animation-name: hz; /* Chrome, Safari, Opera */

  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */

  animation-name: hz;

  animation-duration: 0.5s;

}


/* The button used to close the modal */

.closebtn {

  text-decoration: none;

  float: right;

  font-size: 35px;

  font-weight: bold;

  color: #fff;

}


.closebtn:hover,

.closebtn:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}


.container {

  padding: 2px 16px;

}


header {

  background-color: #5cb85c;

  font-size: 25px;

  color: white;

}


footer {

  background-color: #5cb85c;

  font-size: 20px;

  color: white;

}

</style>


<a href="#open">Modal 열기</a>


<div id="open" class="modal">

  <div class="modal-dialog">

    <div class="modal-content">

      <header class="container">

        <a href="#" class="closebtn">×</a>

        <h2>홈짱닷컴</h2>

      </header>

      <div class="container">

        <p>코딩언어 그누보드 서버관리</p>

        <p>홈페이지 제작/유지보수관리</p>

      </div>

      <footer class="container">

        <p>Homzzang.com</p>

      </footer>

    </div>

  </div>

</div>


결과보기

 

 

:target 예제 - 열기 닫기 (= 보이기 숨기기 

 

<style>

#intro {display: none;}

#intro:target {display: block;}

</style>

 

<div>

    <p>홈짱닷컴 (Homzzang.com) 소개</p>

    <p id="intro">

        코딩언어 그누보드 서버관리 강의

     <a href="#">닫기</a>

    </p>

</div>


<a href="#intro">열기</a>

 

결과보기

https://codepen.io/enmanuelduran/pen/LYPawYY

 


Since 2012