211108-211110 웹접근성 프로젝트 (2) HTML, CSS

개요

• 211108 ~ 211110 약 3일간 한 코딩과 약간의 삽질? 배운것 등을 공유하는 것을 목표
• 해당 게시글은 (1)개요와 이어지는 글입니다.

1. 3일간의 삽질😫

우선 반응형이 아닌 웹사이트를 mobile-first로 작업하면서부터... 🐌

1. PC버전만 있는 웹사이트에 mobile-first 작업이라..
   이게 생각보다 어려울거라곤 생각도 못했다. 우선 디자인이 pc버전만 있는 상태에서 모바일로 이렇게 저렇게 상상만 하고 바로 실행에 옮기다 보니 중간에 여백을 여러번 변경했다.콘텐츠가 워낙 많은 웹사이트를 작업하다보니 그런거 같다. 이래서 기획이 있고, 디자인이 있다는걸 다시한번 실감했다. 기획은 못하더라도 적어도 디자인은 작업하고 들어갔어야 했는데 😫 그래서 시간이 오래걸렸다.
2. 이건 약간 내 욕심이었는데 갤럭시 폴드 사이즈로 작업하려고 하다보니 (280px * 653px) 컴포넌트를 만드는것은 지옥같았다. 그리고 나중에 알고보니 내가 원했던것은 갤럭시 플립이었는데 갤럭시 폴드는 폴드를 반으로 접은 사이즈였더라...ㅎ (갤럭시 플립이 더 클꺼 같다 😥)
3. :root 활용을 못했다 😭
   :root는 지원되는데 var(--)는 지원이 되지않는 IE 🙄 크로스브라우징이 더 중요하기 때문에 자연스럽게 사용하지 못했다.
4. bxSlider를 활용하지 못했다
   bxSlider는 사용이 간편한거에 비해 활용도는 낮다. 생각보다 커스터마이징이 어려웠고, 기본적으로 플레이버튼을 제공해주기 때문에 변경이 어려워 플러그인을 변경할 수 밖에 없었다😟
   (다만 직접 사용해보았고, 작동은 잘되었기 때문에 해당 플러그인은 이제 사용할 수 있다고 말할 수 있다)

2. 그래도 배운게 있다면 🙃

1. slick을 사용해보았고, 커스터마이징이 가능하다.
   swiper는 저번에 사용해보았고, 이번에 새로운 플러그인을 사용해보려고했는데 slick을 아직 사용해보지 못해서 이번 프로젝트에 사용하였다. swiper보다 HTML 구조도 그렇고 훨씬 간편하다는 생각이 들었다.
2. 크로스브라우징을 아주 약간 맛봤다.
   생각보다 IE11 지원이 잘되어서 flex도 너무 잘먹히고 할만한게 거의 없었는데 한가지 배운게 있다면 background-image를 position으로 옮기면 뒷 배경이 생기는 현상이 일어났다. stack-overflow랑 이곳저곳 알아봤는데 그냥 background-color를 transparent로 변경하면 깔끔하게 지워짐. 아직은 Chrome이랑 IE만 보고있어서 추후에 다른 웹사이트도 크로스브라우징하면 더 새로운 점을 발견할 수 있을거 같다 😊
3. Image-sprite를 이번에 활용해보았다
   해당 웹사이트의 경우 아이콘을 모두 각각의 이미지로 사용하였다. 하지만 아이콘의 경우 거의 변하는 경우가 없기 때문에 해당 아이콘들만 모아서 이미지 스프라이트를 제작하였다. 활용도는 높았고, 추후에 코드를 좀 더 정리할 예정!

3. 배운 코드 모음 😋

<ul class="tab-btns" role="tablist">
    <li class="active">
        <button type="button" role="tab">공지사항</button>
    </li>             
</ul>
<ul>
    <li class="tab-list">
       <ul class="tab-inner" role="tabpanel">
           <li>
              <a href="#">2021년 농림식품기술기획평가원 ESG 혁신 정책 아이디어 공모전 시행 공고</a>
              <span class="date" aria-label="2021년 10월 22일">2021-10-22</span>
            </li>
        </ul>
    </li>

• 버튼, 패널 하나씩만 가져온 코드
• 해당 컴포넌트의 경우 role="tab | tabpanel | tablist"를 명시해주면 탭이라는 것을 직관적으로 알 수 있어 웹 접근성 면에서 좋다.
• <button> 과<a>의 차이
  이건 알고는 있었는데, 가끔 놓치는 경우가 있어서 한번 더 정리. <a>태그의 경우 웹사이트를 벗어나는 행위를 하는 경우 사용, 아니면 <button>

.plaza-inner img {
  object-fit: cover;
  object-position: top;
}

• object-position의 경우 이미지의 위치를 잡아줌.
• IE는 둘 다 지원해주지 않는다

.research-list p {
  display: block;
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• 말줄임표용 CSS
  예전에 알았는데 까먹어서 다시 정리

4. 이어서 해야될 사항

✅ media-query로 laptop, pc 버전 만들기
✅ jquery로 슬라이드 및 컴포넌트 스크립트 짜기
✅ 크로스브라우징 전체 체크
✅ 키보드 관련 JS, Jquery 공부 및 스크립트 짜기

목표는 이번주 내로 완성!