느낀점

한달간 html과 css의 기초개념부터 실습까지 공부를 하고 기존에 있는 사이트의 구조를 구현하는 개인과제가 주어졌다.
과제를 다 마친 소감은 html과 css를 많이 알고있다고 생각했지만, 아직 많이 부족하다는 것을 느꼈다.
기초개념을 배우는것도 물론 중요하지만, 실제로 구현해보는 경험이 훨씬 중요하다는 걸 다시 한번 깨달았다. 과제 미션은 1번부터 5번까지 있었는데 뒤로 갈수록 난이도는 점점 어려워졌고 레이아웃을 position, flex, grid, float, inline-block 같이 다양한 방식으로 구현하라는 요구사항이 있었다.
특히 grid 방식으로 레이아웃을 구현해본적이 없어서 처음에는 어떻게 해야할지 감이 잡히지 않아 많이 헤맸지만 여러 블로그 글을 참고하면서 구현할 수 있었다.
역시 강의만 듣는다고 실력은 늘지 않는다. 무조건 많이 해보는것이 중요하다.
과제를 진행하며 부족하다고 생각한 개념을 확실히 잡고 가야겠다.

어려웠던 개념과 그 이유

◼️ :focus와 :focus-visible 선택자

:focus 선택자

보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.

:focus-visible 선택자

focus-visible은 포커스된 요소에 대한 스타일 지정이 가능하다.

:focus와 :focus-visible의 차이
focus와 비슷해보이는데 focus-visible를 사용하는 이유는 접근성 때문이다.
오른쪽은 버튼에 :focus가 된 기본 스타일이다.

.next-image-button:focus {
	outline: none;
} 
.next-image-button:focus {
	outline: 0;
}

디자인적으로 이쁘지 않기때문에 이럴 경우에는 outline : none이나 outline: 0을 통해 저 외곽선을 없애줄 수 있다.
하지만 이렇게 되면 키보드 사용자는 본인이 해당 요소를 선택했는지 알 수 없기에, 접근성 측면에서 좋지 않은 방법이다.
그러면 파란 외곽선을 없애면서 원하는 스타일을 적용하는 방법은 없을까?
바로 focus와 focus-visible을 같이 사용하는 방법이다.
focus-visible은 시각적으로 보이는 스타일을 적용할때만 사용하기 때문에 outline을 없애지는 못한다. 그래서 focus와 같이 사용해야 한다.

.next-image-button:focus {
  outline: none;
}
.next-image-button:focus-visible {
  outline: 3px solid blanchedalmond; 
}

그러면 위의 버튼처럼 기본 outline을 없애면서 원하는 스타일을 적용할 수 있다.
📌 https://css-tricks.com/almanac/selectors/f/focus-visible/

미션1에서 기본 focus 스타일을 없애고 다른 스타일을 적용하는 요구사항이 있었는데 나는 focus 선택자밖에 몰랐기 때문에 시간이 많이 걸렸던 부분이다.
접근성을 준수하면서 원하는 스타일을 적용할 수 있어서 매우 유용하게 쓰일 것같다.

◼️ grid

미션 4번의 레이아웃을 grid로 구현해야 했었는데 실제로 써본적이 없어서 많이 헤맨 부분이다. 강의로 들었을때는 엄청 편리한 방식이라고 생각하긴 했지만, 실제로 적용해보려니 막막했다. 그때 도움을 많이 받은 글을 소개하려 한다.
📌https://studiomeal.com/archives/533
📌https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EA%B7%B8%EB%A6%AC%EB%93%9CGrid-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC

grid-template-rows / grid-template-columns

• grid-template-rows는 행(row)의 크기와 갯수를 정한다.(가로조절)
• grid-template-columns는 열(column)의 크기와 갯수를 정한다.(세로조절)
  
• fr(fraction)은 숫자 비율대로 트랙의 크기를 나눈다.

grid-template-columns: 1fr 1fr 1fr;

위의 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미

• repeat() 함수는 두번 째 인수를 몇번 만큼 반복한다.

grid-template-columns: repeat(2, 100px 200px 50px);

grid-template-columns: 100px 200px 50px 100px 200px 50px;

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.

grid-template-areas:
    "header header header"
    "main   main   aside"
    "footer footer footer";
}

  grid-template-areas:
    "header header header"
    "main     .      .   "
    "main     .    aside "
    "footer footer footer";
}

빈칸은 마침표 또는 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 상관없다.

개인적으로 가장 편리한 방법이라고 생각한다.
미션 4번에서도 사용한 방법인데 공간을 나눠서 이름을 정하고 각 영역에 이름만 붙여주면 지정된 공간에 알아서 배치된다.
제로베이스 강사님도 가장 좋아하는 방법이라고 하셨는데 직접 사용해보니 너무 편리해서 왜 그러셨는지 알것 같았다.
사용방법만 잘 익혀두면 빠르고 편리하게 레이아웃을 구현할 수 있을 것 같다.

◼️ 웹 접근성

웹접근성에 대해서는 지난 글에서도 정리한적이 있는데 웹개발자는 항상 웹접근성에 대해서 고민해야 한다. 장애에 구애없이 모든 사람이 접근할 수 있는 것 웹의 창시자의 말처럼 모든 사용자가 불편함없이 편하게 사용하는 것이 가장 중요하다. 중요성에 대해서는 익히 알고있었지만, 고작 시맨틱태그를 사용하자 정도밖에 몰랐는데 이번 기회에 자세히 알게된 것 같다.

WAI-ARIA

스크린 리더를 사용하는 사용자들에게 페이지를 새로고침 하지 않고도 역할(role), 속성(property), 상태(state) 정보를 추가하여 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.

• role : 유저 인터페이스(UI)에 포함된 특정 컴포넌트의 역할을 정의

  예시)
  보통 탭 버튼을 작업할 때 단순히 <ul>, <li>, <a> 태그로 탭을 구성하지만,
  WAI-ARIA role="tabList", role="tab", role="tabpanel"로 스크린 리더기 사용자에게 더 정확한 정보를 제공할 수 있다.

• property : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 "aria-*"라는 접두사를 사용

  예시)
  검색이라는 안내 텍스트 없이 버튼을 나타낼 때 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다.
  대체 텍스트를 이용할 수도 있지만, aria-label을 이용하여 버튼 요소에 검색이라는 설명을 추가할 수 있다.

• state : 해당 컴포넌트의 상태 정보를 정의

  예시)
  아코디언 메뉴의 활성 상태 값인 aria-expanded를 이용하면 스크린 리더기가 상태 정보(확장됨 or 축소됨)를 읽어 줄 수 있다.

  javascript로 기능을 정의할 때 상태 값(aria-expanded)을 통해 작성할 수 있다.

미션 5번이 is--active 클래스가 추가되면 aria-expanded 속성값이 변화하는 방식이였다.
aria-expanded="true" 펼쳐짐(활성화)
aria-expanded="false" 접힘(비활성화)
주로 토글 및 아코디언에 많이 사용되는 방식이다.

아직 WAI-ARIA 방법이 익숙치 않지만 앞으로 이런 요소들을 적극 활용해서 접근성을 준수하는 올바른 개발을 해야겠다고 생각했다.

📌 https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1
📌 https://abcdqbbq.tistory.com/76
📌 https://story.pxd.co.kr/1588
📌 https://www.wah.or.kr:444/board/boardView.asp?page=1&brd_sn=5&brd_idx=1019

sr-only

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

display: none을 사용하지 않는 이유
display: none은 화면상에 출력이 되지 않을 뿐만 아니라, 검색 봇이 이 태그 요소를 인식하지 못하게 된다. 웹 접근성 부분에서 떨어지므로 sr-only라는 클래스를 이용해서 웹접근성 처리를 해주는 것이다.

position: absolute; → 위치를 지정함. 위로 붕 뜬 상태가 되어 뒤에 오는 요소들의 자리를 차지하지 않게 됨
width: 1px; → 가로크기
height: 1px; → 세로크기
overflow: hidden; → 현재 크기 이상의 영역은 모두 감춤
padding: 0; → 부풀리는 영역을 없앰
margin: -1px; → 벌리는 영역을 오히려 더 좁힘
border: 0; → 테두리를 없앰
clip: rect(0,0,0,0); → 보여지게 하는 부분을 설정하는 것인데, 모든 값이 0 이므로 결국 보여지는 부분이 없음

📌 https://rgy0409.tistory.com/3079

◼️ 이미지 스프라이트 기법

여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다.
이미지 스프라이트 기법은 언뜻 봐서는 더 복잡해 보일수 있지만, 다음과 같은 장점이 있기 때문에 많이 쓰고 있는 기법이다.

이미지 스프라이트 기법을 쓰는 이유

• 서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여준다.
• 많은 이미지 파일을 관리하는 대신 하나의 스프라이트 이미지 파일만 관리하면 된다.

요즘에는 각 이미지의 좌표를 알려주는 프로그램도 많기 때문에 더욱 간편히 사용할 수 있다.
📌 https://www.toptal.com/developers/css/sprite-generator/

나만의 공부팁

나만의 공부팁이라고 해봤자 별거없다.
구글링이 최고다. 검색하면 웬만하면 다 나오고 다른 개발자분들이 블로그 글도 잘 정리해놨기 때문에 참고할 자료가 넘쳐난다.
구글링을 잘하는 것도 개발자의 자질 중의 하나라고 생각하기 때문에 많이 검색하고 많이 참고해서 내것으로 만들자!! 👊
제로베이스 강사님께서 가능하면 영어로 검색하라고 하셨다. 아무래도 한국어로 검색하는것보다 영어로 검색하면 전세계 개발자분들이 도와주는거나 마찬가지기 때문에 더 많은 양질의 정보를 얻을 수 있을 것이다. 비록 영어는 못하지만 구글 번역이 도와주니 두려울 것 없다! 열심히 구글링하자🔥
솔직히 아직 MDN문서보다 블로그 글이 보기 편해서 더 참고를 많이 하는데 아무래도 공식문서인 MDN문서에 익숙해져야겠다고 생각한다.