ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • css태그정리:transform등_210401(목)
      HTML&CSS 2021. 7. 21. 23:28

      transform 속성

      :이미지 변형

      ​

      ☆요소 속성

      translate (x,y): x축 y축으로 이동 (x,y따로 translateX,translateY으로 가능)

      translate3d (x축 , y축, z축): 3차원 이동

      ​

      scale(x,y): x축 y축으로 확대,축소(위와 동일)

      scale3d (x축 , y축, z축): 3차원 확대, 축소

      ​

      rotate:회전. 오른쪽회전 양수, 왼쪽회전 음수

      rotate3d (x축 , y축, z축, 각도): 3차원 회전.

      ​

      skew: 왜곡, 비틀려도는 것.

      ​

      ' :hover ' : 커서 올릴 때 변화오게 하는 속성지정

      ​

      transform-origin속성: right bottom;

      기준점을 잡는 태그

      위 속성들과 사용시 그 기준점에 모서리를 고정하고 변형됨.

      ​

      transform-style속성: 같은 축에 서있을지 떨어진 축에서 각각 변형 할건지.

      ☆요소 속성

      flat: 자식 요소의 3d 변환을 사용하지 않음. 기본 값.

      -preserve-3d: 자식 요소의 3D 변환 사용.

      ​

      perspective 속성: '크기' | none(기본값); !원근감을 갖게 함!

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      <!DOCTYPE html>
      <html lang="en">
       
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          section {
            display: flex;
          }
       
          [class^="box"] {
            width: 200px;
            height: 135px;
            /* background: green; */
            border: 1px solid black;
            margin: 40px;
            perspective: none;
          }
       
          .ex1:hover {
            /* x좌표로 20px 이동. 양수:오른쪽, 음수:왼쪽 */
            transform: translateX(20px);
          }
       
          .ex2:hover {
            /* y좌표로 20px 이동. 양수:오른쪽, 음수:왼쪽 */
            transform: translateY(20px);
          }
       
          .ex3:hover {
            /* x,y좌표로 20px 이동. 양수:오른쪽, 음수:왼쪽 */
            transform: translate(20px, 20px);
          }
       
          .ex4:hover {
            /* x좌표로 1.2배 확대 */
            transform: scaleX(1.2);
          }
       
          .ex5:hover {
            /* y좌표로 1.2배 확대 */
            transform: scaleY(1.2);
          }
       
          .ex6:hover {
            /* x,y좌표로 0.7배 축소 */
            transform: scale(0.7);
          }
       
          .ex7:hover {
            /* 오른쪽 회전: 양수 값 */
            transform: rotate(40deg);
          }
       
          .ex8:hover {
            /* 왼쪽 회전: 음수 값 */
            transform: rotate(-40deg);
          }
       
          .ex9:hover {
            /* 3d 회전 */
            transform: rotate3d(-2.5, 1.2, -1.5, 45deg);
          }
       
          .bus {
            transform: rotateZ(10deg);
          }
       
          .ex10 .bus {
            transform-origin: left top;
          }
       
          .ex11 .bus {
            transform-origin: right top;
          }
       
          .ex12 .bus {
            transform-origin: right bottom;
          }
        </style>
       
      </head>
       
      <body>
        <section>
          <div class="box1">
            <div class="ex1"><img src="images/bus.jpg"> </div>
          </div>
          <div class="box2">
            <div class="ex2"><img src="images/bus.jpg"></div>
          </div>
          <div class="box3">
            <div class="ex3"><img src="images/bus.jpg"> </div>
          </div>
        </section>
       
        <section>
          <div class="box1">
            <div class="ex4"><img src="images/bus.jpg"> </div>
          </div>
          <div class="box2">
            <div class="ex5"><img src="images/bus.jpg"></div>
          </div>
          <div class="box3">
            <div class="ex6"><img src="images/bus.jpg"> </div>
          </div>
        </section>
       
        <section>
          <div class="box1">
            <div class="ex7"><img src="images/bus.jpg"> </div>
          </div>
          <div class="box2">
            <div class="ex8"><img src="images/bus.jpg"></div>
          </div>
          <div class="box3">
            <div class="ex9"><img src="images/bus.jpg"> </div>
          </div>
        </section>
       
        <section>
          <div class="box1">
            <div class="ex10"><img src="images/bus.jpg" class="bus"> </div>
          </div>
          <div class="box2">
            <div class="ex11"><img src="images/bus.jpg" class="bus"></div>
          </div>
          <div class="box3">
            <div class="ex12"><img src="images/bus.jpg" class="bus"> </div>
          </div>
        </section>
       
        <section>
          <div class="box1">
            <div class="bg"><img src="images/bus.jpg" class="bus"> </div>
          </div>
          <div class="box2">
            <div class="bg"><img src="images/bus.jpg" class="bus"></div>
          </div>
        </section>
       
        </section>
       
       
      </body>
       
      </html>
      		 cs

      #display: 블록레벨(한줄 다 차지하는 요소들), 인라인 레벨(한줄에 같이 있는 요소들/남는 공간있을 수 있음)

      요소들을 바꾸어 배치(문서 레이아웃에 쓰임)

      ​

      *block: 인라인요소를 블록레벨로

      ​

      ☆블럭요소 (div, h1~h6, p, ul, ol, li, dl, dt, dd, address)

      -크기(width,height) 지정 가능.

      -크기 미지정시 가로는 100%, 세로는 내용만큼 내려간다.

      -마진, 패딩 상하좌우 적용 가능

      -margin: 0 auto; 로 가운데 정렬

      한 줄을 차지하지만 inline처럼 할려면 float로 옆으로 배치하면 된다.

      ​

      *inline: 블록요소를 인라인요소로

      ​

      ☆텍스트취급 (a, span, em, strong, labelm, b, i, u)

      -크기 지정 불가능

      -크기는 가로,세로 모두 내용만큼의 크기만 가짐

      -마진, 패딩은 좌우로만 가능(글자는 좌우로 배치되니까)

      -요소 사이에 4px 간격이 생긴다.

      -text-align: center; 로 가운데 정렬

      ​

      *inline-block: 인라인+블록요소(한줄에 같이 있는 요소들/공간을 다 활용하여 배치)

      ​

      ☆텍스트취급(+블록요소)

      -크기(width,height) 지정 가능.

      -크기 미지정시 브라우저에 의해 정해진 기본 크기.

      -마진, 패딩 상하좌우 적용 가능

      -요소 사이에 4px 간격이 생긴다.

      -text-align: center; 로 가운데 정렬

      ​

      *none: 값 없음

      ​

      #float: 웹 요소를 문서 위에 떠 있게 만듬

      떠 있기 때문에 float: left; 로 이어서 박스에 값을 넣을 시 차례로 옆에 붙지만

      중간에 값을 안 넣은 박스는 맨 왼쪽에 붙는다.

      *left: 왼쪽에 배치

      *right: 오른쪽에 배치

      *none:좌우어느쪽에도 배치하지 않음(기본값)

      ​

      * table: 테이블태그의 속성같은 느낌.

      자식요소에 table과 width: 100%를 넣는다면 부모요소만큼 내용물이 꽉차게 된다.

      그 table 요소 밑에 table-row 를 넣는다면 table 행이 되는것이고 또 그 밑에

      table-cell 을 넣으면 table 열이 되는것이다. 즉, 형태로 만들어준다.

       

      #clear

      float는 작성하지 않아도 다음 요소들에게도 전달되기 때문에 clear로 해제해야 한다.

      *left: 왼쪽 해제

      *right: 오른쪽 해제

      *both: 양쪽 해제

      ​

      'HTML&CSS' 카테고리의 다른 글

      HTML에 대한 이해_210406(화)  (0) 2021.07.21
      css태그정리:transition등_210402(금)  (0) 2021.07.21
      css태그정리:포지셔닝_210331(수)  (0) 2021.07.21
      css태그정리_210330(화)  (0) 2021.07.21
      HTML강의(visual studio code), 기초태그_210329(월)  (0) 2021.07.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바