2020.10.14 #TIL

 오늘은 학원에서 float 해제하는 방법 5가지를 배웠다. 그동안 clear: both와 :after{content=""; display: block; clear: both;}만 사용했는데 추가로 3개 더 알게 되었다. 그리고 after도 float한 박스의 부모박스에 주어야한다는 것도 다시 알게 되었다. 매번 어디에 줘야하는지 헷갈렸는데 이젠 명확하게 알게 되었다.

<float를 해제하는 5가지 방법> 1) float된 박스의 다음 박스에 clear: both를 준다    *주의* clear : both를 사용하면 다음 박스에 플롯 해제되고 줄바꿈도 되지만 해당 박스에 마진을 주면 float박스 위에서부터 마진이 들어가서 의도한대로 만들 수가 없다. 그래서 사용에 각별히 주의해야함. 시스템이 플롯된 박스를 없다고 인식하기 때문이다. 2) float박스의 부모에 float: left를 준다 3) float박스의 부모에 overflow: auto;  혹은 hidden;을 준다.    *주의* overflow의 기본 기능과 혼동될 수 있어서 추후 수정시 overflow의 명확한 목적을 파악하기 어려울 수 있음 4) float박스의 부모에 height값을 준다.    float을 주면 그 부모 박스는 높이를 상실하기 때문에 따로 지정을 안해줬으면 높이, 배경 등이 표시되지 않는다. 그래서 부모박스에 높이 값을 지정하면 박스 크기를 되찾아서 원하는 디자인을 복구할 수 있다. 다만 본문에 height값을 주면 유지보수가 힘들어지기 때문에 꼭 필요한 경우(높이가 불변인 경우)가 아니면 height값을 주지 않는다. 5) float박스의 부모에 가상요소 :after를 준다    아무 부작용이 없으며 width값을 주어야 크로스 브라우징이 된다.     :after{ content: ""; display: block; clear: both;}

 웹 접근성(Web Accessibility)

  한국형 웹콘텐츠 접근성 지침 2.1

 

1) 색에 무관한 콘텐츠 인식(인식의 용이성 부분)

   - 특정한 색을 인식못하는 사람을 위한 지침

   - 색상만으로 정보를 구별하게끔 하면 안됨 

    * 특히 그래프의 경우 인출선으로 정보를 추가 설명해야함

   - 패턴, 명암(7:1 이상)등으로 색에 관계없이 직관적으로 인식 되도록 제공해야함

   - 차트 등에 대해서 동일한 내용의 대체 콘텐츠를 제공해야함

    * 그래프에 대한 대체 콘텐츠로 표를 제공해야함

   - 색상만으로 구분되어 있지만 사용자가 직접 선택하여 알수 있는 경우는 준수하였다고 봄

    * 마우스 호버해서 탭메뉴 구분이 가능한 경우

   - 색상만으로 구분되어도 주변 정보를 통해 이해할 수 있는 경우는 준수하였다고 봄

   - 글자 모양 변경 등으로 구분이 가능한 경우 준수하였다고 봄

 특정한 색이 있는 콘텐츠를 흑백모드로 보고 구분이 가능하면 준수했다고 생각하면 쉬움

 

2) 명확한 지시사항 제공(인식의 용이성 부분)

   - 인지능력이 평균보다 저하된 사람을 대상으로 제공

   - 색, 크기, 모양, 방향 등으로만 정보를 제공하면 안됨

    예) 개인정보를 보호하기 위해 아래를 클릭하세요 -> '아래'라는 방향으로 지시 XX

         개인정보를 보다 안전하게 지킬 수 있는 방법을 알려드립니다. <개인정보 보호하기> ->버튼으로 지시

     * 큰 아이콘/ 갈색 버튼/ 둥근 모양의 버튼으로 지시 XX

   - 소리 등 지시사항을 청각 정보로만 제공하면 안됨

     * 청각+시각 정보를 동시에 제공해야함

   - 시각 및 청각을 테스트하는 검사 콘텐츠, 또는 시각, 청각을 통한 게임 컨텐츠 등 특수목적의 콘텐츠는 예외

 

어떠한 지시를 할 때는 색, 모양, 크기, 방향 등으로 제시하는 것보다 명확한 목적을 지시하는 것이 좋음.

단, 특수 목적인 경우 예외

 

3) 텍스트 콘텐츠의 명도 대비(인식의 용이성 부분)

   - 색맹 등 색 구분이 힘든 사람을 위한 지침

   - 보통 크기의 텍스트가 4.5:1(명도와 텍스트의 대비, 텍스트-텍스트배경의 대비)을 만족해야함

    * 글씨 색과 배경을 확실히 구분되도록 제공해야함

   - 18pt 이상 또는 굵은 14pt이상의 텍스트가 3:1를 만족해야함

   - 이미지 텍스트가 명도 대비 기준을 준수해야함(4.5:1)

    * 이미지 속 텍스트, 디자인 속 텍스트 모두 대상에 포함됨

 

   * 주의사항 *

   1. 텍스트는 화면상에서 정보를 텍스트로 읽을 수 있는 모든 경우를 포함함( 이미지 텍스트, 영상 속 텍스트도 포함)

   2. 마우스 및 키보드 포커스에 의해 변경(roll over)되는 경우 콘텐츠는 그 중 명도 대비가 높은 것을 기준으로 함

   3. 장식용 이미지, 비활성화 영역은 예외

   4. 전체 웹사이트의 색상 정보를 변경해 준수한 경우 인정함