HTML / CSS

배운 것들

하나의 콘텐츠(img, iframe 또는 글귀를 작성하는 p나 코드를 작성한 pre등)를 독립적인 구획으로 갖는다.
콘텐츠에 대한 설명인 figcaption이 콘텐츠 상단이나 하단에 덧붙여지면 좋다.
figcaption에 충분한 설명이 되어있다면, img 등의 대체텍스트를 대체할 수 있다
- 그러나 검색엔진 최적화(SEO) 관점에서는 대체텍스트를 갖는 것이 더 좋다.
figcaption은 블록요소이다.

요소가 직접 선택자로 지정되어 custom 된 것은 agent style보다 높은 우선순위로 적용된다.
직접 선택자로 지정되어 custom 되지 않은 경우에는 부모로부터 상속받는다.
그러나 특정 요소에 대해 agent style 지정된 경우(form 관련 요소들 등) inherit을 따로 선언해주지 않으면 부모로부터 상속받는 값보다 agent style이 우선한다.

배경이미지로 나타나게 하되 설명텍스트도 있어서 스크린리더에는 읽히게 해보자
배경이미지의 높이만큼 padding-top을 준 후 overflow되는 text를 숨김처리(padding trick)
배경이미지의 너비만큼 text-indent를 준 후 개행 금지 및 overflow 숨김처리(text-indent trick)
- text-indent 속성은 블록 요소에만 적용된다는 점에 유의할 것.
배경이미지를 갖는 span요소를 만들어 설명텍스트를 포함한 영역과 같은 크기로 같은 좌표에 위치시킨다.(position trick)
position trick은 마크업 상 span 요소를 추가해야하지만, 배경이미지가 서버 응답 오류 등으로 날아오지 않았을 때에도 화면에 설명이 보인다.
또한 padding trick이나 text-indent trick에서는 focus 잡히는 요소인 경우 overflow되는 outline을 따로 처리해주어야 한다.

상태선택자 또는 is-active 등으로 동적으로 클래스를 주면서 바뀌는 CSS 속성에 대해 처음과 끝의 상태 변화에 대해 애니메이션 효과를 줄 수 있다.
상태가 변화하기 전의 선택자에 선언하며, transition-property로 변화가 일어나는 속성들을, transition-duration으로 애니메이션 소요시간을 지정해주어야만 동작한다.
transition이라는 단축표기법으로도 선언할 수 있으며, 시간을 나타내는 값을 작성하는 경우 transition-duration으로 지정된다.
- 시간 값이 두개 들어오면 차례로 transition-duration, transition-delay로 지정된다.
height 속성값 auto는 시작/끝 지점으로 감지되지 않으므로 transition이 적용되지 않으니 고정값으로 준다.
성능문제도 개선하며 다양한 효과를 줄 수 있는 속성으로, jQuery보다 순수 CSS가 훨씬 더 좋은 성능을 보일 수 있다.

링크의 관련 설명을 가진 텍스트가 있다면 해당 요소의 id를 a 태그 속 aria-labelledby로 연결하면 어떤 목적지를 가진 링크인지 알 수 있다.
- e.g. 다운로드 링크인 경우 다운로드만 적어두기보다는 aria-labelledby로 다운로드되는 자료 이름 텍스트요소의 id를 기재하여 연결
a 태그는 과거에는 블록요소를 포함하지 못했지만, 이제는 transparent요소이기 때문에 블록요소도 포함이 가능하다.
- 그러나 너무 큰 범위를 포함하는 경우 스크린 리더에서 너무 많은 내용을 읽어야 하므로 접근성 측면에서 바람직한 방법이 무엇인지는 고민해보자.