[Day6] CSS 6 - 텍스트효과, 웹글꼴, 2D 3D, 전환, 애니메이션, 툴팁, 뷰포트, 미디어쿼리

[Day6] CSS 6 [11/17]

--복습--

<style>
  .sticky{                             //  sticky 클래스 선택자
    position: fixed;               //  고정
    top:0;                              //  0
    width: 100%;                   // 부모 100%
}
</style>

<script>
  var navbar = document.getElementById("navbar");   // 
  // DOM 메서드 getElementById() : 아이디명으로 요소를 얻어와서 변수 저장
  
  console.log( navbar.offsetTop );           
       
  var nbOtop = navbar.offsetTop;            
      
  window.onscroll = function (){	              
	  if (  window.pageYOffset  >= nbOtop ) {
		navbar.classList.add("sticky");             
	} else {
		navbar.classList.remove("sticky");      
	}
  };  
</script>

* 스크롤 내려서 sticky

css 텍스트 효과

1. 텍스트 오버플로( text-overflow )

2. 자동 줄 바꿈 ( word-wrap )

- 하나의 단어가 너무 길이서 너비 보다 오버플로워 발생.

- 강제 줄 바꿈 시켜야 겠다.

3. 줄바꿈 규칙 ( word-break )

<style>
   p{
      width: 200px;
      border: 1px solid black;
   }
   
   p.test1{
      /* 텍스트 오버플로워 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;  /* 클립, 잘라내다 */
   }
   p.test2{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;    /* 생략하다         ...  */
      
      /* 긴문자열.substring(0,25).concat("...") */
   }
   
   /* 마우스를 올릴때 오버플로된 콘텐츠를 표시하는 방법 */
   p.test2:hover{
      overflow: visible;
   }
</style>
<style>
   p.test3{
      word-wrap:break-word;
      
      word-break:break-all; 
   }
</style>

 <!-- p.test$*2>lorem10 -->
 <p class="test1">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro adipisci!
 </p>
 <p class="test2">
   Dolor asperiores doloribus amet architecto sint et eius provident quisquam!
 </p>
 
 <p class="test3">
   Dolorum deserunt ducimusquoconsequunturalias esse ex quaerat dignissimos!
</p>

* white-space : nowrap - 자동 개행하지 않고 줄글로 쫙

* text-overflow : ellipsis - 오버플로우 된 부분 생략됨

text-overflow : clip - 잘라냄

4. writing-mode 수평/수직 텍스트 배치(출력) 지정 속성

<style>
     p.test1{
        writing-mode:horizontal-tb;   /* 가로 쓰기 모드 */
     }
     p.test3{
        writing-mode:vertical-rl;   /* 세로 쓰기 모드 */
     }
     p.test2 > span{
         writing-mode:vertical-rl;
     }
</style>

<p class="test1">Lorem ipsum dolor sit amet.</p>
<p class="test2">Sequi <span>laborum</span> reprehenderit ipsum dolorem.</p>
<p class="test3">Repudiandae illo dicta quae ad.</p>

css 웹 글꼴

[ css 웹 글꼴 ]

클라이언트에 설치 되지 않은 글꼴 -> 웹 글꼴

자동으로 웹 서버에서 글꼴 다운로드 -> 클라이언트에서 글꼴 사용.

[다양한 글꼴 형식]

1. 트루타입글꼴( TTF ) - 1980년대 후반 Apple/MS 개발한 표준 글꼴 형식

2. 오픈타입글꼴( OTF ) - TTF 형식 기반의 확장 가능한 글꼴 형식( MS 등록 상표 )

3. 웹 오픈 글꼴형식( WOFF ) - 웹 페이지에서 사용하기 위한 글꼴 형식

4. SVG 글꼴

5. 임베디드 오픈 타입( EOT)

<style>
   @font-face{
      font-family: myFirstWebFont;
      src:url('../images/sansation_bold.woff');
      font-weight: bold;
   }
    *{
       font-family: myFirstWebFont;
    }
</style>

- 서버에서 받아서 사용하겠다는 것

<h1>@font-face 규칙(Rule)</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto molestias.</div>
<p><b>Note : </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo optio dolor a consequatur error eaque laborum in doloribus fugit nesciunt praesentium provident possimus esse laboriosam ducimus dolorum vero saepe libero.</p>

css 2D 변환 (transform)

css 2D 변환 - 요소를 이동, 회전, 비율 조정, 기울기.

transform 속성

1) translate() 이동

2) rotate() 회전

  div{
     width: 300px;
     height: 100px;
     background-color: yellow;
     border:1px solid black;
     
     /* 1. 요소 이동 :   transform : translate()     수평, 수직 이동 */
     /*
     transform: translate(  50px, 100px );
     -ms-transform: translate(  50px, 100px );
     */
     
     /* 2. 요소 회전 rotate()     시계방향 + , 반시계방향 -  각도    회전 */
     /* transform:rotate( 20deg ); */
     /* transform:rotate( -20deg ); */
   }

<input type="radio" name="direction" value="1" checked="checked">시계방향
<input type="radio" name="direction" value="-1">반시계방향

<br>
<button>회전 시작</button>
<button>회전 멈춤</button>
<p>.</p>
<p>.</p>
<p>.</p>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Saepe fuga sit aut facere doloremque architecto.
 </div>

<script>
   var angle = 1;  // 회전 시킬 각도
   var direction = 1;   // 회전 시킬 방향     1(시계)   -1(반시계)
   var timer;
   // [ 회전 시작 버튼 ]
   // 1번 클릭 
   document.querySelector("button:first-of-type").onclick = function (){
	   //alert("first");
	   // [ 체크된 라디오 버튼의 value 속성 ]
	   // direction =  라디오버튼 시, 반시;
	   
	   // 1. 모든 라디오 버튼 
	   // document.getElementsByTagName("input")
	   // var radios = document.getElementsByName("direction");
	   var radios = document.querySelectorAll("input[name=direction]");
	   // alert( radios.length );
	   for (var i = 0; i < radios.length; i++) {
		  //console.log(   radios[i].checked  +"/" + radios[i].value );
		  if(  radios[i].checked == true){
			  direction = radios[i].value;
		  } // if
		  
	  } // 
	   
	                                    // 함수 등록
	  timer = setInterval( div_rotate , 10)
	  
	  this.disabled = "true"; // 비활성화
	  document.querySelector("button:last-of-type").disabled = false;
   }
   
   document.querySelector("button:last-of-type").onclick = function (){
	   //alert("last");
	   clearInterval(timer);
	   
	   this.disabled = "true"; // 비활성화
	   document.querySelector("button:first-of-type").disabled = false;
   }

   function div_rotate(){
	  var target = document.querySelector("div");
	  // css transform:rotate( 20deg );      -> js
	  target.style.transform = "rotate( " + angle + "deg )";
	  
	  // js   "1" -> 1 변환
	  // java    Integer.parseInt()
	  angle +=  parseInt( direction   );   //  js     += 복합대입연산자.
	  console.log( "> angle = " + angle );
   }
</script>

3) scaleX() / scaleY() / scale() 비율 조정

4) skewX() / skewY() / skew() 기울기

5) matrix() 약식

<style>
    div{
        width: 300px;
        height: 100px;
        background-color: yellow;
        border:1px solid black;
        
        /*  1  2  0.5 배 */
        /* 
        transform:scaleX(1.5);
        transform:scaleY(1.5);
         */
        /*  
        transform:scale( 2 ,  0.5 );
         */
         
         /* 지정된 각도만큼 X 축을 따라 요소를 기울인다. */
         /* transform:skewX( 30deg ); */
         /* transform:skewX( 90deg ); */
         
         /* transform:skewY( 40deg ); */
         
         /* transform:skew( 20deg , 10deg); */
         /* transform:skew( 20deg ); == skew( 20deg, 0) */
      
      
             /* matrix == 행렬 , 망 , 2D(이동,회전X,비율조정,기울기) + 결합*/
             /* 회전 X */
             /* transform:matrix(scaleX, skewY, skewX, scaleY, tranlateX, translateY) */
             transform:matrix(1, -0.3, 0, 1, 0, 0);
    }
</style>

3D 변환( x,y,z )

1. 요소 이동

transform:translateX(),

transform:translateY(),

transform:translateZ(),

transform:translate3d(x,y,z)

2. 요소 회전

transform:rotateX()

transform:rotateY()

transform:rotateZ()

transform:rotate3d()

3. 요소 비율 조정

transform:scaleX()

transform:scaleY()

transform:scaleZ()

transform:scale3d()

4. 요소 기울기 X

5. transform:matrix3d(,,,,,,,);

<script>
     var angle = 1;  // 회전 시킬 각도     
     var timer;
   
     document.querySelector("button:first-of-type").onclick = function (){
    	 timer = setInterval(function() {
    	 	var target = document.getElementById("demo");
    	 	// transform:translateX(),
    	 	/* target.style.transform = "rotateX("+  angle  +"deg)"; */
    	 	/* target.style.transform = "rotateY("+  angle  +"deg)"; */
    	 	target.style.transform = "rotateZ("+  angle  +"deg)";
    	 	
    	 	angle++;   // js    ++,-- 증감연산자.
    	 }, 10);    	 
     }
</script>

2D 3D 비교

<style>
   #rotate2D, #rotate3D{
      width:80px;
      height:70px;
      color:white;
      position:relative;
      font-weight: bold;
      font-size: 15px;
      padding: 10px;
      float: left;
      margin-right:50px;
      border-radius: 5px;
      border:1px solid #000;
      background-color: red;
      margin:10px;  
   }
</style>

<div style="height: 80px;">
	<div id="rotate2D"  onmouseover="rotateDiv1();">2D rotate</div>
	<div id="rotate3D"  onmouseover="rotateDiv2();">3D rotate</div>
</div>

<script>
   var div2D;  // div   id="rotate2D" 
   var div3D;  // div    id="rotate3D" 
   var timer2D;
   var timer3D;
   var angle2D = 0;
   var angle3D = 0;
   
   function  rotateDiv1(){
	   // 2D 회전
	   div2D = document.getElementById("rotate2D");
	   clearInterval(timer2D);
	   timer2D = setInterval(function() {
	   	    angle2D++;
	   	 div2D.style.transform = "rotate("+  angle2D+"deg)";
	   	 div2D.style.webkitTransform = "rotate("+  angle2D+"deg)";
	   	 div2D.style.OTransform = "rotate("+  angle2D+"deg)";
	   	 div2D.style.MozTransform = "rotate("+  angle2D+"deg)";
	   	  
	   	 if( angle2D == 180 || angle2D == 360 ){
	   		 clearInterval(timer2D);
	   	     if( angle2D == 360)
	   		   angle2D = 0;
	   	 }
	   }, 10);
   }
   function  rotateDiv2(){
	   div3D = document.getElementById("rotate3D");
	   
	   clearInterval(timer3D);
	   timer3D = setInterval(function() {
	   	    angle3D++;
	   	 div3D.style.transform = "rotateY("+  angle3D+"deg)";
	   	 div3D.style.webkitTransform = "rotateY("+  angle3D+"deg)";
	   	 div3D.style.OTransform = "rotateY("+  angle3D+"deg)";
	   	 div3D.style.MozTransform = "rotateY("+  angle3D+"deg)";
	   	 
	   	if( angle3D == 180 || angle3D == 360 ){
	   		 clearInterval(timer3D);
	   	     if( angle3D == 360)
	   		   angle3D = 0;
	   	 }
	   	 
	   }, 10);
   }
</script>

[ 전환( transition) ]

1) 지정된 기간동안 속성 값을 원할하게 변경하는 것.

width:0px; -> :hover -> width:180px

예) transition: 0.5s ease;

예) transition: width 0.5s ease;

2) transition 약식

- transition-delay 속성 X

- transition-duration 속성 : 0.5s

- transition-property 속성 : width

- transition-time-function 속성 : ease

3) 전환 효과를 만들려면 2가지 설정.

(1) 효과를 추가하려는 css 속성

(2) 효과를 지속 시간

( 지속 시간을 지정하지 않으면 기본값은 0 으로 적용된다. )

<style>
    div{
       background: red;
       width:100px;
       height:100px;
       
       /* ease 효과:  시작(천천히) -> 빨라지고-> 종료( 천천히) */
       /* transition:width 2s ease, height 2s ease-in; */
       /* transition: 2s ease; */
       
       /* 전환 지연 시간 */
       transition-delay:1s;
       
       transition-property:width;  /* 전환속성 */
       transition-duration: 2s;       /* 전환기간 */
       transition-timing-function:ease;  /* 전환속도곡선 */
    }
    
    div:hover{
       width: 300px;
       height:200px;
    }
</style>

전환 속도 곡선 : ease 효과
        1. ease : 천->빨->천 ( 기본값)
        2. linear: 등속
        3. ease-in : 느린 시작으로 ~
        4. ease-out : 느린 종료..
        5. ease-in-out : 천 시작~ 천 종료

  div:nth-of-type(1){  transition-timing-function:ease; }
  div:nth-of-type(2){  transition-timing-function:linear; }
  div:nth-of-type(3){  transition-timing-function:ease-in; }
  div:nth-of-type(4){  transition-timing-function:ease-out; }
  div:nth-of-type(5){  transition-timing-function:ease-in-out; }

[ 변환( transform) - 이동, 회전, 크기 비율조정, 기울기 ]

변환(transform) + 전환(transition)

   div{
      width: 100px;
      height: 100px;
      background-color: red;
      
      transition:width 2s ease, height 2s ease, transform 2s;
      
      display: inline-block;
   }
   div:hover{
      width: 300px;
      height: 300px;
      
      /* 변환 - 이동, 회전, 크기 조정, 기울기 (  transform속성  )*/
      transform:rotate(180deg);
   }

css 애니메이션

- js 또는 Flash를 사용하지 않고, html 요소의 애니메이션을 처리.

- 애니메이션 ? 한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

- css 속성

@keyframes

animation-name

animation-duration

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation 약식 속성.

keyframe(키 프레임) ? 특정 시간에 가지는 요소의 스타일

keyframe(키 프레임) + ..... 여러 개 선언...

<style>
  
   div{
      width: 100px;
      height:100px;
      background: red;
      
      animation-name:sample;
      animation-duration:4s; /*  애니메이션을 완료하는 데 걸리는 시간 설정 */
      animation-timing-function:linear;  
      /* 
       애니메이션이 재생되지 않을 때  ( 시작전, 종료후) 요소의 스타일 지정
          : forwards  - 마지막    키프레임의 스타일 유지
          , backwards - 첫 번째 키프레임의 스타일 유지
          , both, none 
        */
      animation-fill-mode: backwards;
      
      /* animation-delay:2s;  */ /* 애니메이션 2초 후에 재생 */
      /* animation-delay:-2s; */ /*  애니메이션 이미 2초 재생된 후~ 시작 */ 
      /* animation-iteration-count:3;  */  /* 애니메이션 반복 횟수 */
        animation-iteration-count: infinite; /* 무한 반복 */
      
      /* 
      애니메이션 방향 
      : normal ( 기본값)
      : reverse( 역방향)
      :alternate( 앞->뒤-> 앞)
      :alternate-reverse
       */
      /* animation-direction: reverse; */
      animation-direction: alternate;
      
      /* div 요소를 이동 - left, top  */
     position: relative;
   }
   
   @keyframes sample {
      /* 
	  from {background-color: red }
	  to {background-color: yellow }
	   */
	   
	  0% {background-color: red;  left:0 ; top:0; }
	  25% {background-color: green;  left:200px ; top:0; }
	  50% {background-color: blue;  left:200px ; top:200px; }
	  75% {background-color: yellow;  left:0 ; top:200px; }
	  100% {background-color: red;  left:0 ; top:0;}
	}
</style>

좀 더 쉽게 속성값으로 표현

   div{
      width: 100px;
      height:100px;
      background: red;
                 /* 6 개의 속성 */
                  /* name  , duration, timing function, delay, iteration-count, direction */
      animation:sample 4s linear 2s infinite alternate;   
      
      /* div 요소를 이동 - left, top  */
     position: relative;
   }
   
   @keyframes sample {
	  0% {background-color: red;  left:0 ; top:0; }
	  25% {background-color: green;  left:200px ; top:0; }
	  50% {background-color: blue;  left:200px ; top:200px; }
	  75% {background-color: yellow;  left:0 ; top:200px; }
	  100% {background-color: red;  left:0 ; top:0;}
	}

로딩 & 흔들기

<style>
   .loader{
       width: 120px;
       height:120px;
       border:16px solid #f3f3f3;
       border-top-color: red;
       
       border-radius: 50%;
       
       animation:spin 1.5s linear infinite;
   }
   
   @keyframes spin{
       from{ transform:rotate(0deg); }
       to { transform:rotate(360deg); }
   }
</style>
<style>
   img{
     width:150px;
     border: 1px  solid #ddd;
     padding:5px;
     border-radius: 4px;
   }
   img:hover{
     box-shadow: 0 0 2px  1px   rgba(0, 240, 186, 0.5);
     
     /* css 애니메이션 처리 : 이미지(창) 흔들기 */
     animation:shake 0.5s infinite;
   }
   
   @keyframes shake{
       0% { transform:translate(1px, 1px) rotate(0deg); }
      10% { transform:translate(-1px, -1px) rotate(-1deg); } 
     20% { transform:translate(3px, 0px) rotate(1deg); } 
     30% { transform:translate(3px, 2px) rotate(0deg); } 
     40% { transform:translate(1px, -1px) rotate(1deg); } 
     50% { transform:translate(-1px, 1px) rotate(-1deg); } 
     60% { transform:translate(2px, -1px) rotate(0deg); } 
     70% { transform:translate(-1px, 1px) rotate(1deg); } 
     80% { transform:translate(3px, -1px) rotate(-1deg); } 
     90% { transform:translate(1px, 3px) rotate(0deg); } 
     100% { transform:translate(1px, -2px) rotate(-1deg); } 
   }
 </style>

css 툴팁(tooltip)

[css 툴팁(tooltip)]

요소 위에 마우스 포인터를 이동할 때

그 요소의 추가 정보를 풍선도움말로 나타내는 것.

== 드롭다운 메뉴

<style>
   body{
      text-align: center;
   }
   .tooltip{
      position: relative;
      border-bottom: 1px dotted black;
      display: inline-block;
   }
   .tooltip .tooltiptext{
      position: absolute;
      z-index:1;
      left:50%;
      /* top:100%; */ 
      bottom:130%;
      
      /*  변환(transform) - 이동, 회전, 크기비율조정, 기울기 */
      transform:translateX(-50%);
      
      background-color: black;
      color:white;
      width: 120px;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      
      visibility: hidden;
   }
   
    .tooltip .tooltiptext::after{
       content:"";
       
       border-style: solid;
       border-width: 5px;
       border-color:black transparent transparent transparent;
       
       position:absolute;
       top:100%;
       left:50%;
       transform:translateX(-50%);
    }
   
   .tooltip:hover .tooltiptext{
      visibility: visible;
   }
</style>

- after 부분이 툴팁 뾰족

<!-- p*5>{.} -->
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>

<!-- .tooltip>span.tooltiptext -->
<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip Text Sample</span>
</div>

ex2) 툴팁 뾰족 만들기

<style>
  div{
     box-sizing: border-box;
     width: 40px;
     height: 40px;
     /* 
     border-top: 20px solid red;
     border-right: 20px solid green;
     border-bottom: 20px solid blue;     
     border-left: 20px solid yellow;
      */
      
     border-style:solid;
     border-width:20px; 
     /* transparent == 투명한 */
     border-color: red transparent  transparent  transparent;
  }
</style>

ex3 위치조정)

<style>
   body{
      text-align: center;
   }
   .tooltip{
      position: relative;
      border-bottom: 1px dotted black;
      display: inline-block;
   }
   .tooltip .tooltiptext{
      position: absolute;
      z-index:1;
      left:110%;
      top: -50%;
      
      
      background-color: black;
      color:white;
      width: 120px;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      
      /* visibility: hidden; */
   }
   
    .tooltip .tooltiptext::after{
       content:"";
       
       border-style: solid;
       border-width: 5px;
       border-color: transparent  black transparent transparent;
       
       position:absolute;
       right: 100%;
       top:50%;
       
       transform:translateY(-50%);
       
    }
   
   .tooltip:hover .tooltiptext{
      visibility: visible;
   }
</style>

뷰포트(viewport), 미디어 쿼리

[뷰포트(viewport)]

1. 웹 페이지에서 사용자가 볼 수 있는 영역

2. 표시 영역은 디바이스(장치)에 따라 화면의 크기가 다르다.

3. 스마트폰, 테블릿, 컴퓨터 화면 - 뷰포트 X

4. 여러 장치에서 브라우저를 사용해서 웹 페이지를 장치화면에 맞게 축소, 확대..

5. 장치의 크기 배율에 맞게 웹페이지의 크기 제어...

뷰포트 설정.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- width=device-width 장치의 화면 너비를 따라서 웹 페이지 너비 설정.

- initial-scale=1.0 브라우저에서 페이지를 처음 로드할 때의 초기 확대/축소 수준 설정

[미디어 쿼리]

1. css2 에 도입 @media규칙

2. 다양한 미디어 유형에 따라 서로 다른 스타일 적용 정의

다양한 미디어 유형 ? 컴퓨터 화면용, 프린터 용, 휴대폰, 텔레비젼 등등

3. css3 = css2 미디어 유형 + 확장

4. 미디어 쿼리는 [무언가를 확인] 후 사용할 수 있다.

1) 뷰포트의 너비, 높이

2) 장치의 너비, 높이

3) 방향( 테블릿, 휴댚노의 가로 또는 세로 모드)

4) 등등

5. 미디어 쿼리를 사용해서 반응형 웹 구현...

6. 미디어 쿼리 구문 형식 첫번째

@media not|only 미디어장치유형 and ( true/false 표현식){

css 코딩;

}

예) @media only screen and ( max-width:700px ){

css 코딩

}

@media ( max-width:700px ){

css 코딩

}

ㄱ. 미디어장치유형 : screen, print, speech 등등

6. 미디어 쿼리 구문 형식 두 번째

<link red="stylesheet" href="screen.css" media="not|only 미디어장치유형 and ( true/false 표현식" >

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day2] JS 2 - 변수, 연산자, 자료형, 키보드 (0)	2022.11.22
[Day1] JS 1 - 개요 (0)	2022.11.21
[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral.. (0)	2022.11.17
[Day4] CSS 4 - overflow, 팝업폼, display, prev\|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운 (0)	2022.11.16
[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index (0)	2022.11.15

[Day6] CSS 6 - 텍스트효과, 웹글꼴, 2D 3D, 전환, 애니메이션, 툴팁, 뷰포트, 미디어쿼리

[Day6] CSS 6 [11/17]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day6] CSS 6 [11/17]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바