[TIL] 211119
느낀점
- 조급해하지 말기로 했다. 길다면 긴 시간 동안 준비를 한게 맞지만, 그만큼 쌓은 내공이 있을 것이고, 이는 장점이 될 것이다. 계속 학습하고 있고, 주어진 과제도 충실히 잘 해내고 있기 때문에 나도 모르는 사이에 많이 성장 했을거라 믿는다. 이제 웹접근성과 시멘틱한 웹 만들기는 정말 자신있다! 주니어를 뛰어 넘은 기분이다.
배운점
- 요소의 높이를 지정하면 안됨. 내부 콘텐츠들은 종속적으로 만들어야 한다. 부모의 높이는 자식 높이의 합이라고 생각하자.
- 인라인 요소에 position을 주면 인라인 요소가 블록 요소가 된다!
- 태그는 꼭 그 의미와 역할에 맞게 사용하자. 마침표로 끝난다면 p태그를 써도 된다.
- article안에 section이 있어도 된다.
- #none 이라고 앵커 태그에 href를 지정하게 되면 문제가 발생할 수 있다. 만약에 none이라는 아이디가 있으면 none 이라는 아이디로 이동하고 말 것이다. 그렇기 때문에 아무곳으로도 이동하고 싶지 않다면 javascript:void(0)이라고 적자.
- 넓이와 높이 고정이 안되면 transform 을 쓰면 된다.
- 박스사이징은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다. 디폴트 값은 content-box이다. border-box는 보더를 포함한 영역을 기준으로 사이징 한다.
- 인식의 용이성을 위해 접근성 유지를 위해 탭 했을 때 테두리가 나오게 해야한다.
- 실무에서 input 요소는 커스텀하기 힘들기 때문에 숨기고 label에 가상요소를 주어 스타일링 한다.
- 셀렉트박스 arrow 스타일링은 appearance:none으로 숨기고 background image를 위치에 맞추어 스타일링 한다.
- 또한, 셀렉트 박스는 브라우저마다 생김새가 다르기 때문에 ul li로 따로 그냥 만들기도 한다. 그런데 모바일은 진짜 다르게 보여서 모바일 웹은 설정을 그냥 안해버린다. 이건 때에 따라 다르다.
- ir 대체텍스트 지원 시 color: transparent는 ie9부터 지원하기 때문에 모바일에서만 쓰곤 한다. 근데 요즘은 ie7,8을 지원하는 곳이 많이 없어지는 추세라 그냥 쓰곤 한다.
- 네트워크에 이상이 생길 것을 대비해서 css를 링크로 연결하지 않고 인라인에 주는 방법이 있다. 다음에서 쓰는 방식.
- .screen_out 방법은 스크린리더가 읽을 수 없다.
- 카카오는 ir_wq를 적극적으로 사용한다. 이미지 로딩이 실패해도 어떤 이미지였는지 글로 보여주는 방식이다.