Divize 메모

올해 초 퍼블리싱을 공부할 때 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 요소의 텍스트를 대문자/소문자로 시작하는 방법을 지정
  • capitalize uppercase lowercase none
• transition: all 1s ease-out MDN
• background-color: transparent 투명!!

• vertical-align 인라인, 인라인 블록 또는 테이블 셀 상자의 수직 정렬을 설정
  • baseline top middle bottom sub text-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 string
• background-color: inherit
• offset: 'position'의 위치를 정하기 위한 top, bottom, left, right 
• user-select: 유저가 텍스트를 선택할 수 있는지 여부를 제어