HTML/CSS 미션 회고

HTML/CSS를 공부하면서 느낀점

한달간 html과 css 기초공부를 하고 배운것을 기반으로 사이트의 구조를 구현하는 개인 과제가 주어졌다.
과제를 마치고 느낀점은 아직 부족한 부분이 많다는 것이다. 특히 마지막 미션을 수행하면서 내가 생각했던 것과는 다르게 작동하고 문제 해결하는데 생각보다 오랜 시간이 걸렸다. 강의를 들으며 내가 알고 있다고 생각했던 것도 실제로 구현을 하려하면 막히는 부분들이 많았다. 부족한 부분, 문제점을 해결하기 위해 검색을 하고 블로그, 관련 글들을 많이 참고했다. 이 과정을 통해 배운것도 많았다.
강의만 듣고 따라한다고 내것이 되는 것이 아니였다. 확실히 배운것을 익히기 위해서는 최대한 많이 직접 구현을 해야한다고 생각했다. 그리고 과제를 통해 부족한 부분을 다시 공부하고 채워야한다고 느겼다.

미션을 하며 좋았던 점, 아쉬웠던 점

🙂 좋았던 점

• 배운것을 직접 구현하며 익힐수 있었던 점
• 과제를 거듭할수록 늘어나는 숙련도, 분석능력, 나만의 개발 스타일
• 내가 구현하는 것을 시각적으로 확인이 가능해 재미있었다.

🙁 아쉬웠던 점

• 과제 요구사항을 완벽하게 구현하지 못한 점
• 클린 코드로 작정하지 못한 점
• 강의에서 다루지 않은 주제가 요구사항에 있어 이와 관련된 설명이 조금이라도 있었으면 좋겠다

HTML/CSS 공부하면서 어려웠던 개념과 이유

웹 접근성

이번 과제를 통해 가장 어렸웠던 개념은 웹 접근성이였다. 강의에서 웹 접근성에 대해 자세히 다루지 않았지만, 과제에서 웹 접근성에 관한 요구사항이 꽤 있었다. 특히 웹 접근성 중 WAI-ARIA와 스크린 리더 부분에 대해 잘 몰랐었고, 준수 조건이 생각보다 까다로워 애를 좀 먹었다.

📌 WAI-ARIA

WAI-ARIA란 Web Accessibility Initiative - Aceessible Rich Internet Application의 약자로, 웹 페이지(특히 동적 콘텐츠), Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.

📌 WAI-ARIA 구조

WAI-ARIA를 구성하는 역할, 속성, 상태 기능은 HTML 요소에 보충하여 사용된다.

1. 역할(role) : 컴포넌트, 요소 내 역할 정의

태그에 역할을 부여하여 스크린 리더기 사용자에게 더 정확한 정보를 제공할 수 있다. role에 들어가는 값은 우리 마음대로 정할 수 없으며 정해진 값을 사용해야 한다.

• tab
• tablist
• banner
• button
• group
  ...

2. 속성(Property) : 해당 컴포넌트의 특징이나 상황을 정의

폼 요소의 필수 요소와 관련된 속성인 aria-required, 텍스트 레이블이 없이 이미지로 표현될 때 정보를 부여 설명해주는 aria-label, 업데이트된 정보의 상황에 대한 aria-live와 같이 사용자에게 인지 할 수 있도록 도와주는 속성들이 있다.

3. 상태(State) : 해당 컴포넌트의 상태 정보를 정의

메뉴의 활성 여부를 보여주는 aria-expended, aria-selected, 폼 요소 유효성 검증과 관련 있는 aria-invalid와 같이 현재 상태와 변환된 값을 가진다.
상태가 변화될 때 확장됨 / 축소됨, 눌림 / 눌리지 않음으로 음성으로 알려주며, aria-invalid 상태에 따라 에러 텍스트를 노출함으로써 사용성을 높여줄 수 있다.

📑 참고
https://ko.wikipedia.org/wiki/WAI-ARIA
https://story.pxd.co.kr/1588
https://velog.io/@a_in/WAI-ARIA-role-aria-label

📌 스크린 리더에서는 읽을 수 있지만 화면에서는 보이지 않게 하는 방법

.sr-only {
    position: absolute;
    width: 1px; 
    height: 1px;
    overflow: hidden; 
    padding: 0;
    margin: -1px;
    border: 0; 
    /* clip 속성으로 요소의 특정 부분만 나오도록 할 수 있다.
    	- 모든 값을 0으로 만들어 화면에 보이지 않게 설정한다.
    */
    clip: rect(0,0,0,0); 
}

제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유

제로베이스에서 지금까지 들었던 HTML/CSS 강의 중 가장 도움이 되었던 강의는 기본부터 끝까지 러닝메이트 HTML/CSS이다. 강사님이 HTML과 CSS 기초 개념을 하나하나 자세히 설명해 주시고 많은 예제를 가지고 직접 코드를 보여주셔서 정말 많은 도움이 되었다. 내가 이미 알고있다고 생각 했던 것들도 이 강의를 통해 보다 더 자세히 알게되었다. 그리고 이미 알고있던 개념과 관련된 다른 기초 개념들을 확장시켜 익힐수 있어 가장 도움이 되었다.

나만의 공부팁

나만의 공부팁이라고 해서 특별한 것은 없다. 굳이 말하자면 검색이 공부팁이라고 할수 있다. 공부하면서 가장 많이 한 것은 검색이었던 것 같다. 이해가 안가는 부분 혹은 문제점을 해결하기 위해 네이버, 구글, ChatGPT를 이용해 검색을 많이 했다. 네이버 보다는 구글에 정보가 훨씬 많았으며 영어로 검색 했을때 한국어로 검색했을 때 보다 더 많은 자료들을 얻을 수 있었다. ChatGPT에서도 많은 도움을 받았지만 틀린 정보를 줄때도 있어 조심해야겠다는 생각을 했다. 예를 들어 스크린 리더가 span태그를 읽을 수 있는 방법을 검색했는데 aria-label를 사용하라는 결과를 받았다. 그런데 span태그에는 aria-lable를 단독으로 사용할 수 없다. 그래서 ChatGPT만 참고하는 것이 아니라 여러 자료들을 참고하고 비교해봐야 한다고 생각했다.