오늘 한 것

animation

animation 제작 과정!

시나리오 작성
1. animation 이름을 정한다.
2. animation 동작에 필요한 조건을 찾아본다.
  1. (0,0)에서 (400px, 75px) 이동
    - margin 값을 조정하여 위치를 바꾸는 경우는 Layout 자체의 구조를 바꿔버리기 때문에 지양한다.
    - padding 값으로 조정하는 경우에는 내부 여백이 커지면서 다른 영역을 침범한다.
    - position: absolute에 offset을 적용하면 상위 요소에도 position 값을 설정해야한다.
    - position: relative에 offset을 설정할 경우 scroll이 발생한다. 다만 이때 width에 고정값을 주면 scroll 문제를 해결할 수 있다.
    - transform: translate(400px, 75px);는 <p>등을 움직일 경우 scroll이 발생한다. 이때도 마찬가지로 width 값을 고정해주면 scroll 문제가 해결된다!
  2. 투명도 (0에서 1)
    - 투명도는 opacity 속성으로 가능하지만 color: rgba(#, #, #, #); 속성으로도 가능하다.
3. animation을 완성하고 즐긴다!

위에서 여러가지 속성을 통해 시도해본 것 처럼 항상 다양한 방식으로 시도해보는 것이 스스로에게 도움이 된다!
참고 translate가 성능면에서 좋은 점!

animation 만들기

@keyframes textAni{
    0%{ /*from과 to 속성으로도 설정할 수 있음.*/
        font-size: 12px;
        color: rgba(0,0,0,0);
    }
    100%{
        font-size:: 24px;
        color: rgba(0,0,0,1);
    }
}

.visual-text{
    margin: 0;
    animation-name: textAni;
}

위와 같이 animation을 정의하고 사용한다. 하지만 작동하지 않는다.

.visual-text {
  margin: 0;
  animation-name: textAni;
  animation-duration: 3000ms;
}

위와 같이 duration 값을 필수로 넣어줘야한다.

.visual-text {
  margin: 0;
  animation-name: textAni;
  animation-duration: 3000ms;
  animation-fill-mode: forwards;
}

내친김에 자연스러움을 위해 animation-fill-mode 속성도 추가해보자. fill-mode는 animation의 전후 상태를 정의해준다.
참고: animation-fill-mode
animation-timing-function도 사용하면 더욱 자연스럽고 멋진 animation을 제작할 수 있다.
참고 timing-function 속성값 / cubic-bezier 속성값 계산기

form

<form></form>을 사용할 때는 fieldset을 잘 활용하자! 동일항목을 묶어주고 의미론적으로 더 완성시켜준다.
로그인 같이 웹 사이트의 큰 form이나 목록은 heading 태그를 사용하여 중제목쯤으로 만들어주면 좋다.
입력서식은 태그로 묶어주자!

1 2	<label for="”Nyong”"></label> <input id="”Nyong”" /> /명시적/ <label> <input /> </label> /암묵적/

<input>태그의 requierd 속성을 사용하면 클라이언트에게 형식 검사를 맡긴다. 처리량을 클라이언트에게 부과해 서버의 부담이 줄어든다.

오늘의 작성 form

<section class="login">
  <h2 class="login-heading">로그인</h2>
  <form class="login-form" action="#" method="POST">
    <fieldset>
      <legend>회원 로그인</legend>
      <div class="user-email">
        <label for="userEmail">아이디</label>
        <input
          type="email"
          id="userEmail"
          name="userEmail"
          placeholder="이메일 주소"
          required
        />
      </div>
      <div class="user-pw">
        <label for="userPw">비밀번호</label>
        <input
          type="password"
          id="userPw"
          name="userPw"
          placeholder="8자리 이상"
          required
        />
      </div>
      <button class="btn-login" type="submit">로그인</button>
    </fieldset>
  </form>

  <ul class="login-member">
    <li class="signup">
      <span class="icon-right-open" aria-hidden="true"></span>
      <a href="#">회원가입</a>
    </li>
    <li class="find-pw">
      <span class="icon-right-open" aria-hidden="true"></span>
      <a href="#">아이디/비밀번호 찾기</a>
    </li>
  </ul>
</section>

form은 만드는 것 보다 CSS로 배치하고 꾸미는게 더 힘든 것 같다.

기타

backgroung-color: transparent transparent는 투명 색상을 뜻한다. border 등에서도 사용 가능하다.
확장 기능 중 ‘CSS Compressor’을 사용하면 CSS를 한줄씩 정리해준다. 인쇄나 최소한의 페이지를 활용해서 볼 때 요긴하게 쓸 듯하다.
naming에 대한 스스로의 규칙이 필요하다. 예를 들어 class 이름은 KC 표기법으로, id 이름은 CC 표기법으로! 등등!
회원가입, 아이디/비밀번호 찾기 처럼 부가적인 요소는 <Ul></Ul> 등으로 묶어주면 스크린리더가 목록으로 인식하면서 연관성을 갖고 접근성을 높인다.
text-indent라는 첫줄을 들여쓰는 기능을 가진 속성은 inline 요소에서 사용 불가능하다.

오늘 느낀 것

HTML과 CSS의 깊이가 가늠이 안된다. 정말 무궁무진한 활용성을 갖으면서도 제대로 익히지 못하면 전혀 사용하지를 못하겠다. 계속 익히자
animation은 너무 재밌게 작성했다. 꽤나 재밌는 속성이다.
마크업하고 CSS를 활용하여 속성을 부여하는 과정이 정말 어렵기도 하지만 다행스러운 건 재밌다! 바로바로 새롭게 단장하는 모습이 지루할 틈이 없다! 가끔 어려워서 속상하지만.
‘즐코’란 말이 좋다. 즐겁게 코딩… 매번 즐겁지는 않지만 오늘도 내일도 ‘즐코’하자!

Nyong’s GitHub

Nyong's Blog

201022_TIL(animation, HTML form)

오늘 한 것

animation

animation 제작 과정!

animation 만들기

form

오늘의 작성 form

기타

오늘 느낀 것