학습내용
팀스터디 준비내용.
우리조는 하루에 하나씩 각자 다룰 주제를 정해와서 공유하고 질문하고 하는 방식으로 진행하기로 하였다.
나는 개발자 면접질문에도 자주 나오고 지금 시점에서 한번 웹개발 메커니즘의 큰 틀을 리마인드 하면 좋겠다 싶어서 해당 주제를 선정했다.
CSS 속성
object-fit 속성
fill값: 안에서 찌그러지그나 늘어날 수있음.
contain값 이미지나 기타 리소스의 종횡비가 안무너짐.
cover: 종횡비 유지하면서 컨테이너 채우는거.
cf. margin/padding 강사님 Tip
- 좌우 여백 주고 싶을때 margin 사용하는 편.
- 컨테이너높이에 영향을 주고 싶은 경우 padding사용하는 편
unicode 사용방법
화살표 같은 것은 아이콘으로 넣지 않고 유니코드로 삽입하는 방법도 있다.
UTF 활용해서.
→ 이런식으로 태그안에 작성하여 사용이 가능하다.
Grid
플렉스박스(1차원레이아웃 구성)와 달리 2차원 레이아웃을 구성할때 쓰이는 속성이다.
grid-template-columns, grid-template-rows
해당 속성들로 그리드의 열과 행을 구성한다.
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 동일한 비율로 3개읭 열을 구성하게 된다. */1fr(fraction)은 비율을 1로 가져가겠다는 얘기다.
따라서 위의 코드는 아이템들이 컨테이너 너비에 대해 1:1:1로 동일하게 가져간다는 의미이다.
아래와 같이 %로 표현도 가능하다.
grid-template-columns: repeat(4, 25%);4개의 열을 구성하며 컨테이너 너비에 대해 각각 25% 비율로 가져가겠다!
WAI-ARIA
WAI - W3C(웹 표준 정하는 컨소시엄)에서 웹 접근성을 담당하는 기관
ARIA - 장애가 있는 사람들이 스크린리더기 등으로 웹 상의 콘텐츠나 애플리케이션에 좀 더 편리하게 접근할 수 있도록 하는 기술
WAI-ARIA는 그를 위한 웹 접근성 기술 규격이다.
role : 요소의 역할 정의
state : 요소의 현재 상태
property : 요소의 특징 정의
1. role
예를 들어 role을 부여하는데
이미 html태그 자체로 파악할 수 있는 것에 부여하는게 아니라
<div role="button">Click Me!</div> // 버튼의 역할을 수행하는 div태그 종류와 역할이 맞지 않을때 무슨 역할인지 role을 명시하면 좋다고 한다! (단, 시멘틱 태그 본연의 의미가 퇴색되지 않도록 주의)
2. state
aria-selected : 여러 선택 가능한 엘리먼트 중, 선택된 상태를 명시할 수 있다.(true/false)
aria-expanded : 메뉴, 아코디언 등 펼쳐진 상태인지 아닌지 명시할수있다. (true/false)
aria-hidden : true속성을 지닌 엘리먼트는 스크린 리더로부터 숨겨진다.
콘텐츠로는 존재하지만, 스크린 리더가 읽을 필요가 없는 엘리먼트(e.g. 필수입력사항과 같은 보조적인 문구) 등을 해당 속성을 통해 숨기면 될것 같다!
aria-invalid : 폼 입력 필드에 유효하지 않은 값이 들어갔을때 알려준다.
3. property
aria-label : 요소에 라벨을 붙여준다. 닫기 버튼에 이미지만 들어있는 경우, 어떤 역할인지 파악이 안되니까 라벨을 통해 명시하는 것 같은데,
아마 role 보다 조금 더 구체적으로 명시할일이 있을때 쓰이는 것 같다.
<button aria-label="닫기 버튼"/> <img src="X.png" /> </button>aria-live : 실시간으로 업데이트 되는 내용을 읽어주기 위해 부여한다.
'aria-live="polite"' : 스크린 리더가 현재 컨텐츠를 다 읽고 업데이트 되는 컨텐츠를 사용자에게 읽어준다.
'aria-live="assertive"' : 현재 읽고 있는 내용을 중단하고 업데이트 내용을 읽어준다.
멘토링
맡게된 도메인이 중요하긴하다.
3년차까지는 뭘하든 상관없다. 잘할 수 있는 도메인을 선택하는 것도 중요하다.
3년차까지의 경험이 너무 중요하다. => 쌓은 경험이나 습관이 앞으로 쭉 영향을 준다.
추천서적
실용주의 프로그래머
