20180607 회전갤러리, 폰트적용, 스타일시트가져오기(import방식,링크방식)

*회전갤러리 만들기 <a href="http://cafe.daum.net/kjangik/i3Qw/91" target="_blank" rel="noopener noreferrer" class="tx-link">참고:http://cafe.daum.net/kjangik/i3Qw/91</a> 소스 보기<div class="txc-moreless" more="더보기" less="접기"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="prefixfree.min.js"></script> <style>header{ position: absolute; left:0; top:0; right:0; height: 50px; background:black; z-index: 2;}#wheel{ position: absolute; left:50%; top:50%;/*가로 세로 가운데 위치*/ transform-style: preserve-3d;/*3차원*/ animation: rint 10s infinite linear; /*애니메이션 이름 재생시간 무한반복 일정한 속도*/ z-index: 1;}#wheel{animation-play-state: paused; cursor: pointer;}@-webkit-keyframes rint{from{-webkit-transform:rotateX(-20deg) rotateY(0deg);}to{-webkit-transform:rotateX(-20deg) rotateY(360deg);}}.item{ position: absolute;/*절대위치*/ margin-left:-100px; margin-top:-100px; width:190px; height:190px;/*가로 세로 크기*/ border:5px solid black;/*테두리*/ background:green;/*배경 색상*/}#wheel:hover{animation-play-state: paused; cursor:pointer;} .item:nth-child(1){transform: rotateY(0deg) translateZ(-200px); background-image: url(1.jpg); background-size: 100% 100%;}.item:nth-child(2){transform: rotateY(60deg) translateZ(-200px);  background-image: url(2.jpg); background-size: 100% 100%;}.item:nth-child(3){transform: rotateY(120deg) translateZ(-200px);background-image: url(3.jpg); background-size: 100% 100%;}.item:nth-child(4){transform: rotateY(180deg) translateZ(-200px); background-image: url(4.jpg); background-size: 100% 100%;}.item:nth-child(5){transform: rotateY(240deg) translateZ(-200px); background-image: url(1.jpg); background-size: 100% 100%;}.item:nth-child(6){transform: rotateY(300deg) translateZ(-200px); background-image: url(2.jpg); background-size: 100% 100%;} </style></head><body> <header></header> <div id="viewport"> <div id="wheel"> <div class="item"></div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </div></body></html></div> *폰트 적용하기/*폰트를 같은 폴더에 넣어주기*/★상위루트: ../파일명.확장자★소스보기<div class="txc-moreless" more="더보기" less="접기"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title><style type="text/css"> @font-face{ font-family:'AAA'; src:local('TmonMonsori'),/*PC 글꼴*/ url('TmonMonsori.eot'), url('NanumGothic.ttf'), url('TmonMonsori.woff'); } /*@(골뱅이):하나의 규칙을 말합니다.*/*{font-family:'AAA'; font-size: 50px;} </style></head><body> <h1>몬소리 검정</h1>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세이기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 </body></html> </div> *스타일 시트 가져오기(import방식)소스보기 <div class="txc-moreless" more="더보기" less="접기"><!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>Import Query Basic</title><style type="text/css"> @import‎ url(StyleSheetA.css); @import‎ url(StyleSheetB.css); h1{color:white;} </style></head><body> <h1>나눔 고딕</h1>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세이기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 </body></html> *StyleSheetA.css body{ color:red;} *StyleSheetB.css body{ background:black;}</div> *스타일시트가져오기(링크연결)소스보기 <div class="txc-moreless" more="더보기" less="접기"><!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>Import Query Basic</title> <link rel="stylesheet" href="css/StyleSheetA.css";> <link rel="stylesheet" href="css/StyleSheetB.css";>  </head><body> <h1>나눔 고딕</h1>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세이기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 </body></html></div> * StyleSheet에 배경이 이미지 넣기 소스 보기  <div class="txc-moreless" more="더보기" less="접기">body{ background-image:url('../img/4.jpg');/*상위루트에 있는 img 폴더의 4.jpg를 찾아감*/       background-size:cover;/*cover; 배경이미지의 크기를 박스의 가로크기에 맞춤*/}</div>