레이아웃을 위한 이론(position, inline/inline-block)/ 웹 접근성을 높이기 위한 방법(마크업, 스타일)

Minllagher·2021년 3월 17일
CSShtml웹 접근성
0

HTML / CSS

목록 보기
4/10

2020-07-16

Position

1. Position : static

:normal-flow요소로 마크업되는 순서대로 차례대로 렌더링 된다. position property의 기본value이다.

2. Position : Absolute

:자신의 상위 컨텐츠(부모요소)를 기준으로 해서 그 기준에 절대적으로 위치를 잡는다. (레이어로써 float처럼 부유하게 된다. 넓이는 자신의 컨텐츠의 넓이만을 갖게 됨./패딩제외, width, height를 정해준 상태가 아니라면 텍스트 이미지 같은 컨텐츠들의 넓이 만큼만을 유지한다는 이야기이다,float와 유사하다.). offset을 따로 지정해 주지 않으면 자신의 본래 위치에 자신의 넓이 그대로 떠 있는 상태가 된다.

offset: top, bottom, left,right

static은 offset을 지정해주어도 무시한다. -> 적용이 안된다는 뜻

`absolute 레이어는 부모요소의 영역을 차지하지 않게 된다. ->영역을 차지하지 않으면서 내가 놓고 싶은 곳에 놓을 수 있는 (다른 박스 위에 띄워 놓을 수 있는) 방식으로써 자주 사용된다. 아래 그림으로 이해한다.

absolute_not

분홍색 영역에 position:absolute가 지정되지 않은 경우. 각각 보이는 만큼의(분홍색영역) 넓이를 차지하는 것으로 서로 인식하기 때문에 분홍색으로 처리된 요소들끼리 서로 밀어내면서, 버튼들의 레이아웃이 원하는대로 배치되지 않고 분홍색에 의해서(각자의 넓이에 의해서) 밀려 내려간다.

absolute_yes)

분홍색 영역의 클래스에 position:absolute가 지정된 경우. 각자의 영역을 차지하지 않는것으로 인식되기에(서로의 넓이를 무시하는 것처럼) 서로 겹치면서 상위요소 버튼들이 원하는대로 나란히 배치된다.

absolute로 property값을 설정하기 위해서는 부모 요소의 position value를 static이외의 값으로 설정이 필요하다. absolute를 부모요소에 준다면, 부모요소는 또 자신의 부모요소의 (static을 제외한)position 값을 찾으러 상위로 올라가기 때문에 부적절하다.

Fixed도 부모요소의 value로 부적절하다. Fixed도 화면의 영역을 차지하기 보단, float처럼 layer로서 떠오른다. 따라서 부모요소는 relative로 설정해주어야 한다.

3.Position : Relative

(relative는 좌표를 주지않는 이상 static처럼 마크업되는 대로 주변요소들과 조화롭게 위치를 잡는다.) Relative는 offset을 주면 offset 값대로 움직인다. 대신, 원래 자신이 있던 영역의 넓이를 그 위치 그대로에 유지한 상태로, 자신의 위치는 offset으로 정해준 값 만큼 움직인다.

Inline / Inline-block / box요소의 특성

1. inline

:inline 요소는 위 아래 길이값(height,width)을 지정 해줄 수 없다. (지정해도 무시된다. 자기 안에있는 텍스트나 이미지만큼만을 넓이로 갖는다.) 또한, 위 아래로 패딩이나 마진 값을 지정해줘서 상자크기를 시각적으로는 커보이게 만들 수는 있다. 그러나 inline요소 내부에 텍스트나 콘텐츠가 존재하는 영역이외에는 실제 inline영역의 값으로 인정받지 못하는 현상이 생긴다.

ex> 콘텐츠가 있는 부분 이외의 영역에는 다른 요소들과 겹쳐진다. 시각적으로만 영역이 커져보이지 사실은 영역이 커진것처럼 배치되지 못한다. 단 a태그로 링크를 설정해주고 padding을 설정해서 상자의 영역을 늘여놓은 영역은 클릭하면 링크로 연결되는 기능이 유효하다.

2. Inline-block

:inline요소의 배치특성을 가지면서 영역특성은 block요소의 특성을 갖는다. 따라서 배치는 ㅁㅁㅁㅁ 처럼 옆으로 나란히 위치되면서 height,width를 지정 해줄 수 있다.

  • inline-block으로 생기는 문제점: li태그를 inline-block으로 지정해주면, li태그간에 공백문자가 생겨서 원치 않는 공백이 발생하게 된다. 원래 li는 수직으로 배열되는 block요소 였기 때문에 수직으로 콘텐츠를 내려주던 줄바꿈 문자가 수평으로 변하면서 공백으로 처리되는 것이다. 또한 이 공백문자가 li와 함께 ul태그의 자식요소로 인식되면서 실제로 index도 공백문자의 수만큼 늘어나는 문제가 있다. css로 공백현상을 해결해 주기 위해서는 li의 부모요소ul의 font-size를 0으로 설정해준다. 이렇게 설정해주면 공백을 해결 할 수 있지만. ul의 font-size가 li에도 상속되면서 리스트의 내용도 보이지 않기 때문에 추가로 li태그에도 원하는 크기의 font-size를 지정해 주면 된다.

    아래 그림으로 특성 이해하기

    inline-block

3. box요소의 특성

: content-box(기본value), border-box(button태그의 기본value!)

  • margin은 auto와 음수값을 가질 수 있다. padding은 불가능 ->negative margin을 이용한 레이아웃을 과거에 많이 사용 했었다.
  • float는 속성(property), flex는 display property의 value이다.

웹 접근성을 높이기 위한 방법

마크업 할때는 페이지를 눈에 보이는 그대로 마크업 하지 않고, 콘텐츠의 의미와 중요도를 우선순위로 생각하며 한다.

  • 눈에 보이는 그대로 태그를 정하거나 하면 의미적으로 연결이 되지 않거나, 유관한 정보, 상하관계가 끊겨서 마크업 되기 쉽다. 특히, 시각장애인들에게 필요한 스크린리더는 ul을 만나면 몇 개의 목록인지와 목록 내용인지를 알려준다. 웹 접근성에 있어서 아주 중요하다. 중요한 리스트 정보라면 반드시 시멘틱 구조를 고려해서 해야지, 단순하게 배치의 편리함을 위해서 span으로 처리해 버리지 않도록 한다.

  • 순위가 중요한 리스트(예를들어, 실시간 인기검색어, 시리즈 메뉴)인 경우는 UL보다 OL을 사용하는 것이 더 좋다.

  • 디자인 관점에서 메뉴와 메뉴를 가르는 콜론(:) ex)공지사항 : 고객센터 와 같은 메뉴의 시각적 요소들 을 넣는 경우는, 가상요소선택자를 사용하여 넣거나, span태그를 이용해서 쓰기도 한다.

  • 스크린 리더가 중요하지 않은 정보를 읽지 않고 넘어가게 하고 싶다면, 그 요소에 aria-hidden=true로 설정해준다. ARIA(accessible rich internet application)

  • 이미지를 사용하여 텍스트를 대체할 것이면 , A11Y(accessibility)(a와 y사이의 글자수가 11개라서 이렇게 표기함)와 SEO, 해상도를 고민해야 한다.

  • 스크린 리더 사용자는 이미지를 파악할 수 없다. 검색엔진도 이미지 태그로 콘텐츠를 이해하는 것이지, 이미지 자체를 이해하지는 못한다. 따라서 반드시 대체 텍스트(alt)를 이용해야 한다. 이것을 이용하여 검색엔진이 이미지와 연관된 유효한 결과를 출력해준다.

  • img의 alt속성을 지워버릴경우

    1) 문법상의 오류가 생긴다. alt는 img의 필수 속성이기 때문이다.

    2) 접근성의 문제 : (wcag:web content a11y guide;웹 접근성 가이드)에 위배된다.

    3) wcag는 openwax라는 확장프로그램으로 체크한다. 이 프로그램은 한국형 웹접근성가이드(kwcag)를 토대로 검사해준다. wcag와 kwcag는 차이가 있지만 최소한 이라도 준수하도록 한다.

    openwax로 alt를 제외한 img태그 검사시에는

    아래와 같은 오류메세지가 나온다.

    An img element must have an alt attribute, except under certain conditions.

    또한 로고이미지를 h1태그로 감싸서 사용하는 경우에는 아래와 같은 오류메세지를 받는다.

    Empty heading.

    왜냐하면, h1은 제목이고 img를 텍스트 대신 사용하는 것인데, alt를 지웠기 때문에 제목을 아예 입력하지 않는 상황이 되어서 비어있다고 에러가 나는 것이다.

  • button, a href, form 요소들과 태그는 키보드로 접근이 가능하다. but span은 키보드로 접근이 되지 않는다. 이를 허용하기 위해서 따로 tabindex=0으로 지정해 줘야 한다. 또한 span의 역할모델을 button이라고 지정해 줘야 한다.

  • button태그는 type="button"으로 바꿔준 후, 목적에 맞도록 사용한다. 기본값이 submit이기 때문에 설정해주지 않는다면 전송의 역할만 하게된다.

  • 각 영역에 h태그로 감싸서 제목을 명확하고 알기쉬우며 콘텐츠의 내용을 포함하도록 지어준다. 시각적으로 제목이 필요없는 영역이라 하더라도, 이를 css로 눈에 보이지 않게 스타일 적용 후 사용해 준다. (h2 class="a11y-hidden" 과 같이 클래스를 붙혀서 유틸리티화 해서 사용하도록 한다.) 제목을 시각적으로 표시하지않을 디자인페이지여도 접근성을 높이기 위해서 분류영역마다 명확하게 제목을 달아주는것이 좋다.->스크린리더로 탐색시 헤딩태그에 붙은 제목으로 컨텐츠를 빠르게 탐색하는데 도움이 된다.->구조화되고 잘 갖추어진 정보

    제목을 눈에 안보이도록 숨기는 방법

    1. Display:none

      이 방법은 dom 트리 상에서도 없는메뉴가 되고, 보조기기가 인식할 수 없어서

      스크린 리더가 읽을 수 없음. ->제목 숨기기로써 부적절

  1. Position:absolute;
width:0px;
Height:0px;
Overflow:hidden;

    콘텐츠 영역의 넓이를 0으로 설정해주게 되면, 가상요소가 탐색을 하지 못한다->부적절

  1. Position:absolute;
width:0px;
Height:0px;
Overflow:hidden;
Top:-9999px;

    화면에서 보이지 않고 스크린리더도 읽을 순 있으나, 읽는 순간 탐색과 함께 이 콘텐츠의 위치를 찾아가기 위해서 화면이 이 요소가 있는 곳으로 움직이기 때문에 부적절하다.

  1. Position:absolute;
width:1px;
Height:1px;
Overflow:hidden;
Margin:-1px;                       /*네거티브 마진 찾아보기*/
Clip-path속성 사용 clip-path:polygon        
clip-path: polygon(0 0, 0 0, 0 0);

    아무 문제없고, 접근성에 위배되지 않으면서 화면상에서도 보이지 않는다 ->적합.

  • 이 밖에도 버튼의 자세히 보기에 대한 설명을 추가로 해주기 위해서 aria-label속성을 사용해서 처리 할 수있다.
  • 버튼생성을 위해서 a태그를 이용할 때는 a태그내에 role="button"속성을 지정하고 사용한다.

기타

  • ul태그는 agent style(브라우저 기본 속성)에서 margin과 padding과 list-style을 기본값으로 가지고 있기 때문에, ul태그를 겹쳐서 여러번 쓰면 원치 않는 여백이 많이 발생 할 수 있다.->직접 속성을 초기화 해줘서 문제 해결하도록 한다.
profile
Minllagher
Frontend Developer
이전 포스트

레이아웃을 위한 방법 /Float와 clearfix / Flex

다음 포스트

position의 특성 추가/ 상태디자인과 가상요소,가상클래스 선택자/ background 속성 및 lineheight

0개의 댓글