어제 헤더 구현에 이어서 오늘은 헤더와 메인 영역을 구분하는 영역을 background와 animation기능을 이용하여 스타일링하고, 로그인 창을 구현해보았다. 기존 시안을 보고 스타일적으로만 어떻게 그대로 구현할지 생각하지 않고, 종이에 펜으로 직접 구조를 고민하고 완성한 이후 구현하는 연습을 하고있다. 구조를 직접 고민하는 시간을 계속 거치면서 웹접근성 향상과 SEO최적화에 대해 고민하는 시간을 가질 수 있었다.
Background
multi background 구현
background에 두개 이상의 배경을 short핸드를 이용하여 적용하였다.
background: url("./images/bg_flower.png") no-repeat 50% 0, linear-gradient(to bottom, #ccc 0%, #eee 35%, #fff 70%, #fff 100%);여기서 중요한 점은 백그라운드 적용의 순서이다.
background는 기존 요소 기준으로 뒤로 레이어가 쌓이기 때문에 앞에 보이는 요소를 먼저 작성하고 , 후 뒤에 보일 요소를 작성한다.
animation
이렇게 적용된 background에 animation을 이용하여 움직이는 글씨와 사라졌다 생겼다 하는 꽃 이미지를 추가하였다.
@keyframe [name]{변화 속성 기입}
@keyframes moveEffect {
0% {
font-size: 12px;
color: rgba(0, 0, 0, 0);
transform: translate(0, 0);
}
100% {
font-size: 24px;
color: rgba(0, 0, 0, 1);
transform: translate(400px, 75px);
}
}moveEffect라는 애니메이션을 생성했다. 이제 적용할 요소에게 적용만 해주면 된다.
적용방법
- 적용할 요소에 animation-name 선언
- animation 속성들을 의도에 맞춰 작성
- animation-duration : animation이 이루어지는 시간
- animation-fill-mode : animation이 끝난 후 상태 지정
(forward: 종료시점, backward: 초기시점, both:.visual-text { font-family: Georgia, "Times New Roman", Times, serif; animation-name: moveEffect; animation-duration: 2s; animation-fill-mode: forwards; position: absolute; z-index: 10; }위에 작성한 멀티 백그라운드에 더하여 사라졌다 피어나는 꽃들을 가상 요소 선택자 ::before, ::after를 이용하여 text 앞뒤에 배치했다. 그랬더니 텍스트 뒤에 배치 된 애니메이션 요소가 움직이는 텍스트를 가리는 문제가 생겼다.
- 해결법
텍스트에 포지션을 주고 더 높은 z-index를 줘서 앞으로 나오게 만들었다.
Login 폼
마크업 설계
- section으로 마크업하고 제목의 의미를 지니는 h2로 로그인 텍스트를 마크업했다.
- 제목을 제외한 유저와 상호작용하는 요소들을 form 태그에 fieldset 요소로 그룹핑 하였다.
- 이 때 로그인과 로그인 창, 비밀번호와 비밀번호 창을 하나의 컴포넌트로 보고 그룹핑하여 마크업하였다.
<section class="login">
<h2 class="login-title">로그인</h2>
<form method="POST" action="https://formspree.io/seulbinim@gmail.com" class="login-form">
<fieldset>
<legend>회원 로그인 폼</legend>
<div class="user-email">
<label for="user-email">아이디</label><input type="email" id="userEmail" required placeholder="guest@zerobase.com" />
</div>
<div class="user-pw"><label for="userPw">비밀번호</label><input type="password" id="userPw" required placeholder="8자리 이상" /></div>
<button type="submit" class="login-button">로그인</button>
</fieldset>
</form>
<div class="sign">
<a href="/"><span class="icon-right-open" aria-hidden="true"></span>회원가입</a>
<a href="/"><span class="icon-right-open" aria-hidden="true"></span>아이디/비밀번호 찾기</a>
</div>
</section>- legend 태그로 요소의 캡션을 정의하고 스타일요소를 위해 숨겼다.
- 이 때 웹접근성을 확보하기위해 전에 사용했던 sr-only 클래스의 css들을 이용했는데, 강의 말씀 중 앞으로 legend요소를 스타일적인 요소로 사용하지 않을 것이고, 마크업적인 의미만을 부여할 것이면 legend 자체에 숨김 코딩을 해놓는 것을 추천하셨고, 공감이 되었다.
/* 숨김 컨텐츠 */
.sr-only,
legend {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}조상 박스 전체에 링크걸기
<h2 class="sr-only">유효성 검사 배너</h2>
<ul class="validation-list">
<li>
<a href="https://validator.w3.org/" target="_blank" rel="noopener noreferrer" title="마크업 유효성 검사 사이트로 이동"> W3C Markup Validation </a>
</li>
<li>
<a href="https://jigsaw.w3.org/css-validator/" target="_blank" rel="noopener noreferrer" title="CSS 유효성 검사 사이트로 이동">
CSS Validation Service
</a>
</li>
</ul>-
링크 그룹이 의미하는 것이 유효성 검사 배너라는 것을 명시하기 위해 h2태그로 마크업하고 숨김처리를 하였다.
그리고 링크에 접근한 스크린리더 사용자가 링크의 개수를 인지할 수 있도록 ul / li 태그를 이용해 마크업 하였다. -
target= "-blank"를 통해 링크 이동이 일어날 경우 window.opner로 링크 페이지의 오브젝트에 접근하여 URL을 바꿔칠 수 있다는 점을 배웠다. 링크의 정보를 마음대로 조작하는 등의 행위를 방지하기 위해 noopener norefferer을 작성하였다.
-
박스 전체에 링크를 걸기 위해서 a태그의 display 속성의 값을 block으로 변경하고 pading값을 이용하여 스타일링하였다.
.validation-list li a {
background: url("./images/validation_icon.png") no-repeat 20px 50% /16px 16px, #aaa linear-gradient(to bottom, #ccc, #aaa) repeat;
display: block;
padding: 10px;
text-indent: 35px;
border-radius: 50px;
}- ::hover와 ::focuse를 추가하여 키보드와 마우스로 접근했을 때 둘 다 링크 접근의 스타일링을 표현할 수 있도록 하였다.
