포이머웹(poiemaweb) CSS 정리 12~22

12. 그림자(Shadow)

https://poiemaweb.com/css3-shadow

텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티를 선언한다.

• test-shadow : 텍스트에 그림자 효과를 부여하는 프로퍼티
• box-shadow: 요소에 그림자 효과를 부여하는 프로퍼티

13. 그레이디언트(Gradient)

https://poiemaweb.com/css3-gradient

2가지 이상의 색상을 혼합하여 부드러운 색감의 배경등을 생성하는것

• 선형 그레이디언트(Linear)
• 방사형 그레이디언트(Radial)

대부분의 브라우저에서 벤더프리픽스를 사용하여야한다. 그레이디언트는

직접 작성보다는 툴을 이용하는것이 보편적이다.

14.트랜지션(Transition)

https://poiemaweb.com/css3-transition

트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정시간에 걸쳐 일어나도록 하는 것이다.

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
      transition: all 2s;
    }
    div:hover {
      border-radius: 50%;
      background: blue;
    }
  </style>

hover셀렉터에 트랜지션을 적용하면 반대의 경우에는 트랜지션이 발동되지 않는다.

또한 transition은 자동으로 발동되지않는다. 그러고 싶다면 CSS애니메이션을 사용한다.

• transition-property : 트랜지션의 대상이되는 CSS 프로퍼티명을 지정한다. 지정하지않으면 모든 프로퍼티가 대상이된다.모든 프로퍼티가 트랜지션의 대상이 되지는 않는다 ex) displaylayout에 영향을 주는 트랜지션 효과는 회피하도록 해야한다.
• 프로퍼티의 값이 변하면 브라우저는 프로퍼티 값의 변화에 영향을 받는 모든 요소의 기하값(위치와 크기)를 계산하여 layout 작업을 수행한다. 이것은 성능 저하의 요인이 된다.
• div { width: 100px; height: 50px; background-color: red; margin-bottom: 10px; transition-property: width, background-color; transition-duration: 2s, 2s; }
• transition-duration: 트랜지션에 일어나는 지속시간을 초 단위 또는 밀리 초 단위로지정한다. 기본값은0
• transition-timing-function: 변화흐름, 효과의 리듬을 지정한다.
• ease, linear, ease-in, ease-out, ease-in-out
• transition-delay:일정 대기시간 이후 트랜지션 변화를 시작하게 한다.

15.애니메이션(Animation)

https://poiemaweb.com/css3-animation

애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS스타일과 애니메이션의 시퀀스를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.

• 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는것은 CSS를 사용한다. 예를들어 width같은 경우
• 세밀한 제어를 위해서는 js를 사용한다. 바운스, 중지, 일시감기, 되감기, 감속 등..
• @keyframes

  div {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: move;
        animation-duration: 5s;
        animation-iteration-count: infinite;
      }
      /* @keyframes rule */

  1. from과 to사용
  2. @keyframes move { /* 애니메이션 시작 시점 */ from { left: 0; } /* 애니메이션 종료 시점 */ to { left: 300px; } }
  3. % 사용또한 animation-name은 여러가지를 줄 수 있다.
  4. div { position: absolute; width: 100px; height: 100px; animation-name: move, fadeOut, changeColor; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes move { from { left: 0; } to { left: 300px; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes changeColor { from { background-color: red; } to { background-color: blue; } }
  5. @keyframes move { 0% { left: 0; } 50% { left: 100px; } 100% { left: 300px; } }
• CSS 애니메이션과 트랜지션 방식의 주된차이는 @keyframes rule에 있다.

16.트랜스폼(Transform)

https://poiemaweb.com/css3-transform

트랜지션, 애니메이션과 다르게

요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여하기 위한

함수를 제공한다. 애니메이션 효과를 제공하지 않기 때문에 정의된 프로퍼티가 바로 적영되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용해야 하는것은 아니지만 필요가있다면 함께 사용한다.

트랜지션, 애니메이션, 트랜스폼 3개의 차이점을 알고 사용하자! 그리고 적절하게

같이 사용하자!

17.웹디자인 타이포그래피(Web Font)

https://poiemaweb.com/css3-webfont

참고하기

18.레이아웃(Layout)

https://poiemaweb.com/css3-layout

요약말고, 전체 쭉 참고하기, 전부 중요! 클리어픽스도 마찬가지! float사용 참고

• layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.
• a tag등의 inline요소에 margin을 정의하기 위해선 display: inline-block 속성을 주면된다.'
• block요소에 도 마찬가지로 inline-block을 주어 설정할 수 있다.

19.반응형 레이아웃(Responsive Web Design)

https://poiemaweb.com/css3-responsive-web-design

전체 참고하기

20. 플렉스 박스 레이아웃(Flexbox Layout)

https://poiemaweb.com/css3-flexbox

• flex-container, flex-item 속성 활용해서 레이아웃 배치하기!

21. 수평 / 수직 중앙 정렬

https://poiemaweb.com/css3-centering

수평정렬

• inline / inline-block요소
• 정렬 대상 요소의 부모 요소에 text-align: center; 지정
• block요소

  .item {
    width: 200px;
    margin: 20px auto;
  }

• 정렬 대상 요소에 너비를 명시적으로 지정, margin-right와 margin-left에 auto를 지정한다.
• flexbox의 경우는 아래와같이 정렬대상의 부모요소에 룰셋을 선언한다
• .flex-center { display: flex; justify-content: center; }

수직정렬

• Single line : 정렬 대상의 부모 요소에 패딩탑, 패딩 바텀 프로퍼티값을 동일하게 적용한다.이외는 포이머 참고
• .container { padding: 50px; }

수평/ 수직 정렬

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
  transform: translate(-50%, -50%);
}

flexbox사용

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

22. image 요소 아래에 패딩된 여분의 공간 제거하기

https://poiemaweb.com/css3-removing-white-space-image-element

1) image요소를 블록 요소로 전환하기 (텍트스 취급 안받게)

하지만 image 요소를 블록 요소로 전환 못할때는

2) vertical-align 프로퍼티를 사용하면 된다.

    <style>
       .container {
         width: 350px;
         border: 1px solid red;
       }

       img {
         vertical-align: bottom;
       }
     </style>