NeatCoder's Lab

Hide content, Box-sizing, BFC 본문

Web Development/HTML&CSS

Hide content, Box-sizing, BFC

NeatCoder 2021. 1. 4. 10:58

오늘은 총 세 가지에 대해서 알아보도록 하겠다.
Hide content, Box-sizing, BFC이렇게 세가지!

Hide content

Hide content는 그냥 컨텐츠를 숨기는 기법이다. 거기에 뭔가 있지만 나타나지 않도록 하는 것이다. 하지만 숨겼더라도 아직도 다른 것들이 접근할 수 있도록 접근성은 고려하는 것이 좋다. 가령 예를 들면 텍스트를 읽어주는 기능이 그것을 읽을 수 있도록 해주는 것이다.

이것을 해결하기 위해서 사용하는 것이 일명 clip pattern이다. clip pattern은 웬만하면 css 속성으로 설정해주는 것이 default로 정해져있다. 다음 코드를 외워보자. 

.a11y-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

이렇게 설정해줌으로써 컨텐츠 자체는 시각적으로 가려진다. 그렇지만 접근성은 아직 보장된다는 장점이 있다. 만약 이 .visually-hidden 클래스가 포커싱이 가능한 요소(a, button,input등)에 적용될 경우 키보드 포커싱을 받게되어야 한다. 안그러면 sighted keyboard를 사용하는 유저들은 갑자기 자신의 키보드 focus indicator가 어디로 갔는지 찾게 될 것이다.

최신 브라우저에서는 이제 이러한 문법으로 해결 할 수가 있다고 한다. 

.visually-hidden:not(:focus):not(:active){
    /* ... */
}

이렇게함으로서 interactive한 요소는 focus를 받게되고 시각적으로 안보이게되어 접근성은 유지되게 된다. 이것은 IE9이상부터 가능하다고 한다.

이상으로 접근성을 고려한 감춤 클래스에 대해서 알아보았다.

Box-sizing

다음으로 박스 사이징에 대해서 알아보겠다.
box-sizing은 박스의 크기를 어떤 기준으로 계산할것인지를 정하는 속성이다.

  • default value: content-box
  • inheritance : No

안에 들어갈 수 있는 속성으로는

  • content-box : 콘텐트 영역을 기준으로 정한다.
  • border-box : 테두리(보더)를 기준으로 정한다.
  • initial : 기본값으로 설정한다.
  • inherit : 부모 요소의 속성값을 상속받는다.

BFC

마지막으로 중요한 주제인
BFC에 대해서 알아보겠다. BFC는 Block formatting context의 약자인데 mdn에는 이것이 visual CSS rendering 의 한 부분이라고 나와있다. BFC는 block 박스들이 만들어지는 layout의 영역을 말한다. 그리고 거기서 다른 요소들과 상호작용한다.

mdn에 따르면 BFC가 생성되는 조건들이 있는데 다음과 같다.

  • Document의 Root 요소(<html>)
  • Float(어떤 요소를 float시키면 또다른 BFC가 생성된다고 이해하면된다.)
  • position : absolute 로 설정된 요소 이때,position의 설정값이 absolute나 fixed이면 부유하게되기 때문에 그렇다.
  • inline-block일 경우
  • table-cell의 경우 display: table-cell
  • table-caption의 경우 display:table-caption
  • block 콘텐트 중에 overflow가 visible이 아닌 값으로 설정된 경우
  • Flex
  • Grid

기타 여러 조건들이 있는데 자세한건 mdn에서 참고하도록하자.
mdn-BFC

이상으로 HTML과 CSS에서 알아야하는 개념들에 대해서 학습했다.

저작자표시 비영리 변경금지 (새창열림)

'Web Development > HTML&CSS' 카테고리의 다른 글

input 그리고 form에 대해서  (0) 2021.01.05
CSS Basic Syntax  (0) 2021.01.04
HTML Basic syntax 2  (0) 2021.01.04
CSS positioning tricks  (0) 2021.01.02
HTML Basic Syntax 1  (0) 2021.01.01
'Web Development/HTML&CSS' Related Articles more
Comments