HTML5, CSS3/HTML5, CSS3

23-02-21 CSS3 (position, transition, transform, FlexBox, 미디어 쿼리, seletor)

모건이삼촌 2023. 2. 21. 17:47

1. position

 - 기본값 static

 - static을 제외한 속성은 위치지정값을 사용 가능

 -  absolute, fixed는 static보다 앞에온다

 

 

 1-1) 상대 위치 지정 요소

 

 1-2)절대 위치 지정요소

  - absolute, fixed

  - 세로축 포지션은 top, bottom 가로축 포지션은 left, right

  - absolute는 스크롤바의 영향을 받음

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    body {height: 5000px;}
    .wrapper {width: 500px; height: 500px; border: 1px solid; margin: 0 auto; position: relative;}
    .box {width: 100px; height: 100px;}
    .box1 {background-color: red;}
    .box2 {background-color: orange; position: relative; left: 50px; bottom: -50px;}
    .box3 {background-color: yellow; position: absolute; bottom: 0; right: 0; z-index: 0;}
    .box4 {background-color: green; position: fixed; right: 0; bottom: 0;}
    .box5 {background-color: blue; position: absolute; bottom: 50px; right: 50px; z-index: -1;}
    .box6 {background-color: purple; position: absolute; top: 0; left: 50px; z-index: -1;}
    
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
  </div>
</body>
</html>

 

2. transition

 - 전환효과가 적용되는 css속성의 이름을 지정

 - 저장된 css 속성이 변경되면 전환효과가 시작됨

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 
      transition 4가지
      css요소(property)
      duration
      timing-function(시간함수) 
      delay
    */
    .box {
      width: 100px; height: 100px; background-color: red;
      transition: all 1.2s cubic-bezier(.34,-0.3,.19,1.07) .2s;
    }
    body div:hover .box{width: 300px; margin-left: 300px;
    }
    .ease {background-color: orange; transition-timing-function: ease;}
    .linear {background-color: yellow; transition-timing-function: linear;}
    .ease-in {background-color: green; transition-timing-function: ease-in;}
    .ease-out {background-color: blue; transition-timing-function: ease-out;}
    .ease-in-out {background-color: violet; transition-timing-function: ease-in-out;}
  </style>
</head>
<body>
  <div>
    <div class="box"></div>
    <div class="box ease"></div>
    <div class="box linear" ></div>
    <div class="box ease-in"></div>
    <div class="box ease-out"></div>
    <div class="box ease-in-out"></div>
  </div>
</body>
</html>

3. transform

 - scale(x, y, z), rotate(x, y, z), skew(x, y, z), translate

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    .clearfix::after {content: ''; display: block; clear: both;}
    .img-wrap {border: 1px solid; width: 200px; height: 200px; float: left; perspective: 200px;}
    img {transition: all .2s;}

    .scale:hover {transform: scale(.8);}
    .scalex:hover {transform: scalex(.9);}
    .scaley:hover {
      transform: scaley(1.2);
      /* width: 200px;
      height: 250px;
      margin-top: -25px; */
    }
    .translate:hover{transform: translate(30px, -50px);}

    .rotate:hover{transform: rotate(45deg);}
    .rotatex:hover{transform: rotatex(45deg);}
    .rotatey:hover{transform: rotatey(180deg);}
    .rotatey {backface-visibility: hidden;}

    .skew:hover{transform: skew(45deg);}
    .skewx:hover{transform: skewx(45deg);}
    .skewy:hover{transform: skewy(45deg);}

  </style>
</head>
<body>
  <div class="scale clearfix">
    <h2>scale</h2>
    <div class="img-wrap">
     <img src="../img/ban1.gif" class="scale">
    </div>
    <div class="img-wrap">
     <img src="../img/ban1.gif" class="scalex">
    </div>
    <div class="img-wrap">
     <img src="../img/ban1.gif" class="scaley">
    </div>
   </div>
   <hr>
   <div class="scale clearfix">
    <h2>translate</h2>
    <div class="img-wrap">
     <img src="../img/ban1.gif" class="translate">
    </div>
   </div>
   <hr>
   <div class="scale clearfix">
    <h2>rotate</h2>
    <div class="img-wrap">
     <img src="../img/ban2.gif" class="rotate">
    </div>
    <div class="img-wrap">
     <img src="../img/ban3.gif" class="rotatex">
    </div>
    <div class="img-wrap">
     <img src="../img/ban4.gif" class="rotatey">
    </div>
    <div class="img-wrap">
      <h2 class="rotatey">텍스트</h2>
    </div>
   </div>
   <hr>
   <div class="scale clearfix">
    <h2>skew</h2>
    <div class="img-wrap">
     <img src="../img/ban2.gif" class="skew">
    </div>
    <div class="img-wrap">
     <img src="../img/ban3.gif" class="skewx">
    </div>
    <div class="img-wrap">
     <img src="../img/ban4.gif" class="skewy">
    </div>
   </div>
   <hr>
</body>
</html>

* transition과 animation의 차이

transition은 사용자의 동작이 필요하지만 animation은 동작이 필요없음

 

4. animation(잘 안씀)

  - 키프레임 (Key Frame)

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
     @keyframes ani {
        16% {
          background-color:  orange;
        }
        33% {
          background-color: yellow;
          transform: rotate(120deg);
        }
        50% {
          background-color: green;
          /* transform: translate(200px, 300px); */
        }
        66% {
          background-color: blue;
          transform: rotate(240deg);
        }
        83% {
          background-color: navy;
        }
        to {
          transform : 
          /* translate(400px, 0)  */
          rotate(360deg);
          
          background-color: purple;
        }
      }

    .circle {
     width: 200px;
      height: 200px;
      line-height: 200px;
      border-radius: 50%;
      background-color: red;
      color: white;
      text-align: center;
      font-size: 30px;
      animation: ani .3s linear infinite;
    }
  </style>
</head>
<body>
  <div class="circle">animation</div>
</body>
</html>

※ bxslider

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <style>
      .slider-wrapper {width: 500px; margin: 0 auto;}
     </style>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider({
      pager:false,
      controls:false,
      auto:true
     });
    });
  </script>

</head>
<body>
  <div class="slider-wrapper">
    <div class="slider">
      <img src="../img/blog-post-img1.jpg">
      <img src="../img/blog-post-img2.jpg">
      <img src="../img/blog-post-img3.jpg">
      <img src="../img/blog-post-img4.jpg">
      <img src="../img/blog-post-img5.jpg">
      <img src="../img/blog-post-img6.jpg">
    </div>
  </div>

</body>
</html>

5. FlexBox

 - flexbox 인터페이스 내의 아이템 간 공간배분과 강력한 정렬 기능을 제공하기 위한 2차원 레이아웃 모델

 - 복잡한 계산 없이 욧의 크기와 순서를 유연하게 배치할 수 있다.

 - flex container : 부모의 대상 

 - flex item : 자식의대상

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    .wrapper {width: 600px; border: 5px solid; margin: 0 auto; display: flex;
      flex-direction: row; 
      flex-wrap: wrap; 
      justify-content: space-evenly;
      align-items: start;
      align-content: space-evenly;
    }
    .box {width: 200px; height: 200px;}
    .box1{background-color: red;
       /* height: 50px; */
      }
    .box2{background-color: orange;
      /* height: 250px; */
    }
    .box3{background-color: yellow;
      /* height: 150px; */
      order: 2;
    }
    .box4{background-color: green;}
    .box5{background-color: blue;
      order: 1;
      flex-grow: 2;
      /* align-self: flex-end; */
      /* justify-self: start; */
      /* height: 30px; */
    }
  </style>
</head>
<body>
  <div class="wrapper">
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>
   <div class="box box3">3</div>
   <div class="box box5">5</div>
   <!-- <img src="../img/ban1.gif"> -->
  </div>
</body>
</html>

※ 반응형 웹 디자인

 

2. 미디어 쿼리(@media)

- 미디어를 통해 사용자의 디바이스 폭을 알 수 있음

- 리사이즈이벤트에 동작 (화면 폭 재정)

360 핸드폰, 760 태블릿, 978 pc

 

2-1) 정의

 

 

2-2) 미디어 타입

 - all (제일 많이 씀)

 - screen

 - print

 - speech

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    .wrapper {width: 330px; margin: 0 auto; display: flex; flex-wrap: wrap;}
    .wrapper div {width: 320px; height: 320px; 
      border: 2px solid black; background: no-repeat; background-size: cover; margin: 5px;}
      .wrapper div h1 {text-shadow: 0 0 5px black; color: white; text-indent: 20px;}
      .wrapper div:nth-child(1) {background-image: url(../img/work-1.jpg);}
      .wrapper div:nth-child(2) {background-image: url(../img/work-2.jpg);}
      .wrapper div:nth-child(3) {background-image: url(../img/work-3.jpg);}
      .wrapper div:nth-child(4) {background-image: url(../img/work-4.jpg);}
      .wrapper div:nth-child(5) {background-image: url(../img/work-5.jpg);}

      @media screen and (min-width:760px) {
        .wrapper {width:668px;}
        .wrapper div:nth-child(5) {flex-grow: 2; background-position: center;}
      }

      @media screen and (min-width:1100px) {
        .wrapper {width: 1050px;}
      }

  </style>
</head>
<body>
  <div class="wrapper">
    <div><h1>요소1</h1></div>
    <div><h1>요소2</h1></div>
    <div><h1>요소3</h1></div>
    <div><h1>요소4</h1></div>
    <div><h1>요소5</h1></div>
</div>
</body>
</html>

※ seletor

1. a:selector

2. first(last)-child, first(last)-of-type, nth-child

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 속성 이름 */
    [title] {color: red;}
    /* 일치 */
    [title='제목'] {color: blue;}
    /* startWith */
    [title^='제'] {color: purple;}
    /* endWith */
    [title$='1'] {color: orange;}
    /* 문자열 부분 포함 */
    [title*='제목'] {color: green;}
    /* 단어 부분 포함 (구분자 공백) */
    [title~='제목'] {color: hotpink;}
    /* 단어 부분 포함 (구분자 -) */
    [title|='제목'] {color: aqua;}

    /* 
      접두 : first, last, nth
      접미 : child, of-type
    */
    :nth-child(n) {color: black;}
    body > :nth-child(even) {text-decoration: underline;}
    body > :nth-child(odd) {text-decoration: line-through;}
    body > :nth-child(n) {text-decoration: none;}

    /* h1:nth-child(even) {color: red;} */
    body > :nth-last-child(even) {color: red;}
    /* body > :last-of-type{color: red;} */

  </style>
</head>
<body>
  <h1 title="제목">제목1</h1>  
  <h1 title="제목-1">제목2</h1>  
  <h1 title="제목 2">제목3</h1>  
  <h2 title="제목3">제목4</h2>  
  <h1 title="1제목1">제목5</h1>  
  <h2>제목6</h2>
  <h2>제목7</h2>
  <h1>제목8</h1>
  <h1>제목9</h1>
  <h1>제목10</h1>
</body>
</html>

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

23-02-20 css3  (0) 2023.02.20
23-02-17 CSS3  (0) 2023.02.17
23-02-16 HTML5  (0) 2023.02.16
23-02-15 HTML5  (0) 2023.02.15
23-02-14 HTML5, CSS3  (0) 2023.02.14

'HTML5, CSS3/HTML5, CSS3'의 다른글

  • 현재글23-02-21 CSS3 (position, transition, transform, FlexBox, 미디어 쿼리, seletor)

관련글

댓글

티스토리툴바