첫번째 과제후기 겸 문제해결과정 기록이다.
밀린 강의도 있고 todo스케줄에 맞춰 느긋하게 시작하였는데, 생각보다 막히는 부분이 꽤 있었다.
미리 시작하신 팀원분들도 계셔서 도움을 많이 받았다.
내가 정리한 내용들에서 다른 분들도 힌트를 얻어가시면 넘 좋을 것 같다.
1. favicon설정
favicon 설정부터 막혔다.
head에 link로 불러오는 건 맞는데, 안에 작성한 내용이 틀린 거 같아 하나씩 점검해보았다. 우선 상대경로를 잘 지정되었고, type지정을 해야하나 싶어 "image/x-icon으로 했으나 변화는 없었다.
답은 rel에 있었다.
rel의 값을 favicon에서 shortcut icon으로 수정하니 href을 ico, png 둘중 무엇을 줘도 잘 나타났다.
2.스크린리더에서는 읽히지 않게 설정
스크린리더에서는 읽히지 않게 aria-hidden을 주었다.
참고-https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore
제발 나를 무시해 주세요. - WCAG 2.1 항공사 WAI-ARIA 적용사례
1번 방법으로 사용하게 되면 스크린리더는 해당 영역을 "p"로 읽게 되어 스크린리더 사용자는 무엇을 읽는지 알 수 없게 된다. 2번 방법으로 사용하면 스크린리더는 해당 문구를 읽으려고 부단히
aoa.gitbook.io
*참고*
(HTML 문법 검사 URL : https://validator.w3.org/)
css쉽지않다..
강의를 들었음에도 왜 아직도 마크업을 제대로 하지 못하는걸까
내 머릿속에 정확히 정리되지 않은채 넘어간 탓이라 생각된다.
앞으로는 강의를 듣고, 해당내용을 누군가에게 강의해줄수있을 정도가 되어야 그날 공부를 마친 것으로 생각해야겠다.
1. css색상 변수지정
문제였던 부분이라기 보단, 기존에 해왔던거와는 다른 방식이라 기록
sass가 아닌 그냥 css에서도 변수선언을 통해 사용할수 있다. 색상css파일로 theme.css 파일을 따로 만들어 진행했다.
사용할때는 전반적인 스타일을 작성하는 discovery.css에서 var(색상선언명); 으로 사용함.
참고한 사이트: https://seunghyun90.tistory.com/81
CSS 변수 선언하기
필자가 햇병아리 시절, CSS를 사용하며 많은 불편함을 느꼈던 것 중 하나는 색상 값을 #FFFFFF 혹은 rgb(255,255,255) 처럼 16진수나 RGB 값으로 입력해줘야 했던 것이다. 웹 퍼블리싱을 하다보면 색상 값
seunghyun90.tistory.com
2. 가운데 정렬
헤더영역과 컨텐츠영역을 화면 가운데 배치하라는 요구 => 전체 div로 묶고 진행
작성한 요소들이 브라우저의 크기가 달라져도 항상 정가운데에 정렬되도록 하라는 요구로 이해하고 진행하였다.
가로로 가운데 정렬은 잘 적용되는데, text-align이 잘 적용되지 않았다.
세로로 가운데 정렬되어야할 content가 절반정도는 윗부분이 사라지고 아래 절반만 브라우저화면 상단에 붙어나타나거나
해당 content의 태그에 absoulte설정을 없애도 여전히 text-align만 적용이 되지않았다.
상세히 살펴보기 위해 브라우저를 50%화면으로 줄인뒤,
상위태그인 body태그를 살펴보니, 브라우저 화면 전체높이를 감싸고 있지 않았다. => body태그에 height: 100vh로 영역을 재설정하고 나니 text-align이 잘 적용되었다!
하지만 해당 content에 position을 absolute로 주어 body태그기준으로 가운데 정렬하는게 맞다고 생각하는데, position:absolute;의 유무에 따른 차이가 없어 조금 의문이었다.
+추가
body태그에 height: 100vh 를 주면 웹브라우저 전체를 기준으로 잡아 세로정렬상 중간에 위치시키기는 쉽지만,
브라우저 크기가 작아지거나(휴대폰 화면 등) 브라우저화면을 100%이상으로 키웠을때
body 하위의 container태그의 윗부분이 잘려보이지 않는 경우가 있다. 사용자 경험상 위아래로 스크롤을 통해 이동하는 것이 더 나은 상황이라면 body와 container에 height: 100% 을 부여해 높이를 지정해 주면 요소들이 브라우저 창 크기를 초과해 잘리는 일을 방지할 수 있다!
3. focus 인식안됨
제품 각각에 div로 감싸고, 제품상세로 이동할 a태그, 그리고 그안에 제품img와 구매버튼 등을 구성하였다.
img같은 경우, focus가 자동으로 잡히지만 div의 경우 속성으로 tabindex를 지정해주어야 한다.(0이상의 숫자로.
+123..숫자로 focus되는 순서를 부여할 수 있으며, -1을 줄 경우 focus가 안되도록 설정가능)
4. 가상요소 적용문제
구매하기 버튼과 화살표이미지를 동시에 띄우기 위해
각각 ::before과 :hover::before을 주었으나, 새로운 컨텐츠를 추가하는 부분에서는 transition에서 opacity를 활용해 나타내고, img태그에는 해당 이미지의 opacity를 활용하는 것이 아닌 background-color와 자리를 left로 옮기는 것이다 보니
이전에 옅은 회색배경색이 있던 img태그가 left위치로 먼저 옮겨지고, 글자는 투명에서 색상지정이 되다보니 깔끔하게 보이지 않았다.
(글로 설명하려니 명확히 와닿지 않아 영상 첨부를 하였으나,
과제물 내용 노출방지 내용이 있었고, 너무 전부 드러나는 듯해 영상은 내리고 글을 올렸다ㅠ)
고민하던 중, 그냥 svg이미지를 추가했던 것처럼 해당 텍스트와 svg이미지를 배경까지 완성시킨 img를 만들고
::before요소의 content에 url로 img를 넣은뒤 opacity효과를 준다면 코드를 줄일 수 있고, 한번에 적용되다보니 사용자경험 면에서도 편안하다. 하지만 이 방식은 어디까지나 편법이라서 ,, 나중에 해설강의에서는 어떻게 적용하는지 잘 살펴보고 해당 글에도 내용을 추가할 예정이다.
figma의 사용에 좀 더 익숙해질 수 있는 시간이었다.
처음에는 margin값을 어떻게 봐야하는지, css상세값은 어디까지 적용해야할지 헷갈렸는데
직접 해보면서 layer, inspect, design 부분을 참고하고 활용하는 법을 익힐 수 있었다.
뭔가 여러 기준을 두고 그 요구조건에 맞게 적용하는 과제이다보니
처음엔 놓치는 부분도 있었고, 개념이 잘 잡히지않았거나 응용이 어려운 부분도 있었다.
나중에 다 돌아보기엔 나중에 어려움이 생길 거 같아 중간중간 확인해가며 꼼꼼히 진행하고자 하였다.
과제를 하면서 내게 부족한 부분을 집어나가고 채울 수 있는 시간이 되었던 것 같다.
댓글