올해 초 퍼블리싱을 공부할 때 Divize에서 컴포넌트를 많이 따라 만들었다. 그중 막혔던 부분들이나 잘 몰랐던 부분들을 메모해 놨었는데, 다시 읽어보고자 블로그에 업로드한다.
Tweet Card
<figure>: 독립적인 콘텐츠를 표현.<figcaption>요소를 사용해 설명을 붙일 수 있다.a의target속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시<a target="_blank|_self|_parent|_top|프레임 이름">_blank링크된 문서를 새로운 윈도우나 탭에서 오픈_self링크된 문서를 링크가 위치한 현재 프레임에서 오픈_parent링크된 문서를 현재 프레임의 부모 프레임에서 오픈_top링크된 문서를 현재 윈도우 전체에서 오픈프레임 이름링크된 문서를 명시된 프레임에서 오픈
role=""ARIA역할을 포함- ARIA(Accessible Rich Internet Applications): 접근가능한 리치 인터넷 어플리케이션
- 요소의 용도를 변경하고 ARIA 역할, 상태 또는 속성을 추가하여 액세스 가능하게 만든다..
- 많은 위젯은 HTML5로 통합됐으므로, 되도록 의미를 가진 HTML을 선호해야 한다.
aria-labelleby해당 속성이 적용되는 요소에 레이블을 지정하는 요소를 식별aria-label대화형 요소에 레이블을 지정하는 문자열 값을 정의
CI Automation Plan
text-transform요소의 텍스트를 대문자/소문자로 시작하는 방법을 지정capitalizeuppercaselowercasenone
transition: all 1s ease-outMDNbackground-color: transparent투명!!
vertical-align인라인, 인라인 블록 또는 테이블 셀 상자의 수직 정렬을 설정baselinetopmiddlebottomsubtext-top
background-repeat
/* 키워드 값 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* 2개 값 구문: 가로 | 세로 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* 전역 값 */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
Tooltip
<abbr>약어 또는 두문자어를 나타낸다content:"";empty stringbackground-color: inherit- offset: 'position'의 위치를 정하기 위한 top, bottom, left, right
- user-select: 유저가 텍스트를 선택할 수 있는지 여부를 제어