css : css지식, animation, perspective

1.실습 진행 중 새로 알게 된 css 지식

sr-only

.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

사용자에게 노출되지 않지만 웹 접근성을 높히기 위한 방법 이 클래스가 적용되면 vp 밖으로 빠져있지만 검색등의 접근성을 높이기 위하여 사용한다.

ellipsis

/* 한줄 말줄임 */
.sl-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 두 줄 말줄임 */
.multi-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

sl은 single의 sl이며 이 클래스들이 적용되면 글자가 일정 범위를 벗어나면 "..." 처리 된다.

selector 표기법 정리

.a, .b, .c{}

콤마가 들어가면 or의 개념으로 각 선택자가 같은 css속성을 적용하게 된다.

.a .b .c{}

각 클래스에 공백이 있으면 a의 하위인 b의 하위인 c 요소에만 css속성을 적용하게 된다.

.a.b.c{}

공백이 없이 연결되어 있으면 class="a b c" 같이 모든 클래스를 한번에 적용받는 요소에만 적용된다.

가상요소 ::before ::after

p::before 와 같이 사용하며 요소의 앞 뒤에 가상요소를 만든다. css2 표기법에는 :before 이었지만 css3로 넘어오면서 가상클래스와의 차이를 위해 ::before로 바뀌었고 호환성을 위해 :before 방법도 사용 가능하다.

a > b {}

a가 parents인 모든 b에 적용된다.

a + b {}

a 바로 뒤에있는 b에만 적용된다.

a ~ b {}

a 이후에 존재하는 모든 b에 적용된다.

child

1. p:first-child : 자식요소 중 첫 번째에 자식이 p이면 적용
2. p:last-child : 자식요소 중 마지막 자식이 p이면 적용
3. p:nth-child(n) : ()안의 n의 수식의 위치가 p 이면 적용 (n은 0부터)
4. p:nth-last-child(n) : 자식 순서의 역순으로 nth-child를 적용한다.
5. p:first-of-type: 자식 중 첫번째로 나오는 p에 적용
6. p:last-of-type: 자식 중 마지막으로 나오는 p에 적용
7. p:nth-of-type(n) : 부모요소 안에서 p태그 끼리 순서를 매겨 적용 (자식의 순서 x)
8. p:nth-last-of-type(n) : p태그의 순서의 역순으로 적용

div p:nth-child(3n+1) {font-size: 10px;}
/* 1 4 7...*/

요소 속성에 따른 조건

1. [href] : 지정된 속성이 존재하면 적용

a[href]:{ font-size:10px; } /* a요소 중 href 속성이 있는 요소만 */
[target]:{ background-color:red; } /* 모든 요소 중 target 속성이 있는 요소만 */

2. [href="naver.com"] : 속성이 지정된 값인 요소만 적용

a[href="naver.com"] { font-size:10px; } /* a요소 중 href 속성이 있는 요소만 */

<a href="naver.com"> //</a><!-- 적용 -->
<a href="google.com"> //</a><!-- 미적용 -->

3. [href|="naver.com"] : value가 "naver.com"로 시작하고 뒤에는 "-" 문자 이후 다른 문자가 있던가 혹은 아무것도 없어야 한다.

a[href|="naver.com"] {
        font-size: 10px;
      }

<a href="naver.com-"> //</a><!-- 적용 -->
<a href="naver.com-aa"> //</a><!-- 적용 -->
<a href="naver.comm"> //</a><!-- 미적용 -->

4.[href^="naver.com"] : value가 "naver.com"로 시작해야하고 다른 조건은 없다.

a[href^="naver.com"] {
        font-size: 10px;
      }

<a href="naver.com-"> //</a><!-- 적용 -->
<a href="naver.com-aa"> //</a><!-- 적용 -->
<a href="naver.comm"> //</a><!-- 적용 -->

5.[href$=".com"] : href 속성이 .com으로 끝나는 요소에만 적용

a[href$=".com"] {
        font-size: 10px;
      }

<a href="naver.com"></a>//<!-- 적용 -->
<a href="naver.org"> //</a><!-- 미적용 -->
<a href="naver.co.kr">//</a><!-- 미적용 -->

6.[href~="naver"] : naver란 문자만 정확히 포함되거나 공백으로 구분된 경우에만 적용

a[href~="naver"] {
        font-size: 10px;
      }

<a href="naver">//</a><!-- 적용 -->
<a href="naver aa">//</a><!-- 적용 -->
<a href="naver.org"> //</a><!-- 미적용 -->
<a href="naver.co.kr">//</a><!-- 미적용 -->

7.[href~="naver"] : naver란 문자를 포함하면 적용

a[href*="naver"] {
        font-size: 10px;
      }

<a href="naver">//</a><!-- 적용 -->
<a href="naver aa">//</a><!-- 적용 -->
<a href="naver.org"> //</a><!-- 적용 -->
<a href="naver.co.kr">//</a><!-- 적용 -->

skip navigation

스킵 네비게이션은 웹 표준을 준수하기 위해 그리고 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 설정해야 하는 요소이다.

/* 스킵네비게이션 */
.nav-skip a {
  position: absolute;
  top: -200px;
  left: 0;
  width: 300px;
  line-height: 30px;
  border: 1px solid #fff;
  color: #fff;
  background: #333;
  text-align: center;
}

.nav-skip a:active,
.nav-skip a:focus {
  top: 0;
}

평소에는 숨겨놨다가 active와 focus 속성을 주어 tap key 를 누르면 바로가기 버튼이 나오고 enter 나 space를 누르면 해당 네비게이션으로 이동하는 방법을 사용하였다.

웹 확장성 확인을 위한 크롬 익스텐션

1. OpenWAX
2. headingsmap

2. SVG

확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽이다. 픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. HTML 태그의 집합으로 이루어져 있어서, css와 javascript로 컨트롤이 가능하다. 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다. 아래의 긴 코드로 개구리 그림이 그려졌다. css를 추가하여 애니메이션도 추가할 수 있다.

3. hover, active, focus

위 세가지는 요소에 action이 일어나면 요소를 변화시키는 가상클래스 이다. 각 요소에 transition 속성을 이용하면 부드러운 전환이 가능하다.

hover

마우스가 요소에 오버되었을 때 실행된다.

active

요소가 활성화 되거나 클릭되었을 때 실행된다.

focus

요소에 키보드 포커스가 맞춰졌을 때 실행된다.

4.transition

transition속성은 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 한다.

transition : width 2s ease 1s
/* transition property/duration/timing function/ delay 순 */
transition : all 2s;
/* width 2s ease(default) 0s(default) */

1. transition property : 어떤 요소를 변화시킬 것인가? ex ) all , width 등
2. duration : 몇초동안 변화시킬 것인가 ? default 0s ex) 1s, 2ms 등
3. timing function : 진행 속도를 어떤방법으로 할것인가? default: ease ex) ease, linear
4. delay : 몇초 후에 시작할 것인가? default 0s

5. transform

transform는 요소를 여러 형태로 변형할 때 사용하는 속성으로, transition과 사용하면 더 좋은 효과를 낼 수 있다.

scale

.box:hover{
	transform: scale(2);
	}

scale 속성은 요소의 크기를 변화시킨다 1 = 100% 로 계산된다.

rotate

.box:hover{
	transform: degree(360deg);
	}

rotate 속성은 요소의 각도를 조절한다 각도deg로 들어가며 720을 넣으면 두바퀴를 도는 식으로 실행된다.

translate

.box:hover{
	transform: translate(x px , y px);
	}

x,y 픽셀의 좌표를 기준으로 요소를 이동시킨다 음수도 적용되며 translateX, translateY등으로 한 축으로만 이동 가능하다.

skew

.box:hover{
	transform: skew(30deg);
	}

요소를 일정 각도만큼 비튼다. rotate와 같이 deg를 사용한다.

transform-origin

.box{
	transform-origin:left top;
   }
.box:hover{
	transform: rotate(30deg);
	}

요소가 변환하는 기준점을 바꿔준다. default는 요소의 중앙이며 기준점을 바꿔 다르게 움직이게 할 수 있다.

6. animation

transition 과 animation 의 차이

transition과 animation은 요소 상태에 대한 의존 여부에 차이점이 있다. transition은 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화 없이 실행시킬 수 있다. 또한 animation 속성은 @keyframes 속성을 이용해 프레임을 추가할 수 있다.

@keyframes

@keyframse를 스타일에 선언함으로 미리 애니메이션을 만들어 둘 수 있다. from - to 나 0%~100% 로 animation의 진행을 만들 수 있다.

/* from ~ to 속성 */
@keyframes name1 {
from {                      
	styles;
}
to {
	styles;
}

/* 0% ~ 100% 속성 */
@keyframes name2 {

0% {
	styles;
}
25% {
	styles;
}
50% {
	styles;
}
75% {
	styles;
}
100% {
	styles;
}
div{
  animation: name1 10s;
}

animation 단일속성

1. animation-name : keyframes 의 이름

animation-name: name;

2. animation-duration : 애니메이션의 재생시간

animation-duration: 0s; 
animation-duration: -1s;
/* 0과 음수는 실행안됨 */

3. animation-iteration-count : 몇번 반복할것인가?

animation-iteration-count: 0; 
animation-iteration-count: -1;
/* 0과 음수는 실행안됨 */
animation-iteration-count: 3;         
animation-iteration-count: 1.5;       
animation-iteration-count: infinite; /* 무한반복 */

4. animation-direction : 재생 방향을 어떻게 할것인가?

animation-direction: normal;            /* 정방향 재생 */
animation-direction: reverse;           /* 역방향 재생 */
animation-direction: alternate;         /* 정방향-역방향 왕복 */
animation-direction: alternate-reverse; /* 역방향-정방향 왕복 */

5. 예제

@keyframes returns {
        0% {
          transform: translate(0, 0);
        }
        33% {
          transform: translate(300px, 0);
        }
        66% {
          transform: translate(300px, 300px);
        }
        100% {
          transform: translate(0, 300px);
        }
      }
      .box {
        animation: returns infinite 1s alternate;
        width: 100px;
        height: 100px;
        background-color: red;
      }

6. animation-timing-function
   애니메이션 @keyframes 사이의 재생 속도를 조절하는 속성이다. ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n) 등이 있고 default = ease 이다. 각 속성들은 베이저의 조합이다.

animation-timing-function: ease;
animation-timing-function: cubic-bazier(0,25, 0.1, 0.25, 1);

animation-timing-function: linear;
animation-timing-function: cubic-bazier(0,0,1,1);

animation-timing-function: ease-in;
animation-timing-function: cubic-bazier(0.42,0,1,1);

animation-timing-function: ease-out;
animation-timing-function: cubic-bazier(0,0,0.58,1);

animation-timing-function: ease-in-out;
animation-timing-function: cubic-bazier(0.42,0,0.58,1);

7. animation-delay
   몇초후에 애니매이션을 실행할까의 대한 속성이다.

animation-delay: 0;             /* 바로 재생 */
animation-delay: now;           /* 바로 재생 */
animation-delay: 1.5s;          /* 지연 재생 */
animation-delay: -500ms;        /* 앞의 500ms를 제외하고 재생 */

8. animation-play-state
   재생여부를 설정할 때 사용하는 속성이다. 속성값이 running일 경우 애니메이션을 재생하고, paused일 경우 애니메이션을 정지한다. 자바스크립트를 이용하여 속성값을 바꿔주면 플레이어를 만들 수 있다.

빌딩 예제

1. 이미지의 크기만큼 keyframes를 설정한다.

@keyframes bd {
        from {
          background-position: 0px, 0px;
        }
        to {
          background-position: -3730px, 0;
        }
      }

2. 잘린 이미지의 갯수만큼 steps 카운트를 넣는다. animation-fill-mode: forwards; 속성을 넣으면 애니메이션이 끝난 후에도 마지막 프레임에서 사라지지 않고 이미지가 남아있는다.

.building1 {
        width: 110px;
        height: 180px;
        background: url("building/building1.png") no-repeat;
        animation: bd 1s steps(33);
        animation-fill-mode: forwards;
      }

이미지의 사이즈와 픽셀 간격을 잘 조정하는게 중요하듯 하다.

7. perspective(원근법)

원근법에 관하여 + 예제

perspective - CSS: Cascading Style Sheets | MDN
나와 닮은 연예인 찾기!
Intro to CSS 3D transforms

.x {
  perpective:100px;
   }

px 숫자가 작아질수록 사용자와 더 가까워 보인다.

소실점

부모가 여러 자식을 가진 상태에서 자식에게 Y축에서 회전시켰을 때 바라보는 화면은 정면이 아니라 우측 중앙 기준이다. 따라서 각 자식들은 소실점이 다르기때문에 다르게 보인다.

    <div class="원본">
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
    </div>

카드 뒤집기 성공해보기