Nyong's Blog
0%

201021_TIL(css와 콘텐츠 숨기기)

Posted on Edited on In

오늘 한 것

heading 태그의 사용

  • 웹 사이트 main에서 <h1>은 보통 로고에 쓰인다. 이때 로고는 <a> 기능도 하며 동시에 사이트의 대제목이다.
  • <h2>같은 경우 보통 중제목으로 쓰이는데, 이를 <nav>와 묶어 사용하는 것이 의미론적으로나 접근성 측면에서 좋다.W3cList W3cNav

참고: W3C

  • 위 목록을 보면 navigation이 중제목으로 설정된 것을 볼 수 있다.
  • <nav>태그를 이용할 때는 중제목 하위 요소를 <div>로 묶어준다.

  • 위 W3C 홈페이지를 보면 콘텐츠 목록으로 봤을 떄와 직접 페이지를 봤을 때 차이점이 있다. 그것은 바로 <nav>부분의 ‘Site Navigation’의 유무이다. 왜 홈페이지 레이아웃에서는 이 제목이 보이지 않을까?
  • Navigation의 제목은 의도적으로 숨긴 것이다.
display: none, display: hidden
  • 위 방법은 좋지 않다. 이 속성을 사용할 경우 가시적으로는 차이점이 없으나 개체 자체를 없애거나 숨기기 때문에 의미론적이나 접근성이 좋지 못 하다.(스크린리더 등 보조기능 사용할 시)
position과 offset 사용
1
2
3
4
 {
  position: absolute;
  top: -9999px;
}
  • 위와 같은 방법을 사용하면 스크린리더 등을 사용할 시 정상적인 스크롤 이동과 화면 이동 단계에 지장을 주게된다. -9999px 떨어진 콘텐츠를 찾아 좌표값이 이동하기 때문이다.
.a11y-hidden 사용
  • 가장 좋은 방법은 숨겨주는 기능을 부여할 class의 보편적인 네이밍이다. 다른 것으로는 .readable-hidden, offsreen 등으로 쓰인다.
1
2
3
4
5
6
7
8
.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0); /*x, y, z*/
}

  • width와 height를 최소값으로 주고 overflow: hidden 값을 줘 내부 콘텐츠를 보이지 않게 만들어 주는 것이다.

  • width와 height가 1px 인 것은 이유가 있다. 0px일 경우 크기가 없기 때문에 스크린리더 같은 보조 도구가 존재하지 않는 콘텐츠로 넘겨버린다.

  • 때문에 1px를 주는 것인데, 이때 문제점은 1px이라도 가시적으로 보일 수 밖에 없다.

  • 이것을 위해 clip-path: polygon(0 0, 0 0, 0 0);를 사용한다. clip-path에 대한 이해와 계산을 돕는 페이지는 bennettfeely 이다.

  • 참고로 opacity: 0을 생각할 수 있지만 불행이도 이것 또한 모바일 환경에서 읽혀지지 않는 이슈가 있었다.

<div>, <span> 보다는 <button>

  • <nav>에 넣어줄 하위 목록을 만들 때 <div>, <span> 등이 많이 쓰인다. 하지만 이는 최후 수단으로 사용하는 것이 의미론적으로 좋으며 이럴 때 role={속성값} 속성을 부여해 의미를 더해주면 더 좋다!

  • <nav>에 <button> 태그를 사용하여 Semantic한 효과를 줄 수 있다. 또한 aria-pressed / aria-haspopus / aria-expanded 속성 등을 부여할 수 있다.

속성 관련 배운 것

  • border-top: 2px solid currentColor;에서 currentColor란 현재 글자 색상과 동일한 색상을 적용하는 속성값이다.

  • <a>, <button> 등은 태그마다 box-sizing 속성값이 다르다. 때문에 태그의 속성 기본값을 잘 확인한다면 시행착오를 줄이며 활용할 수 있다. 때로는 태그에 모두 box-sizing을 같은 속성값으로 주고 사용해도 된다.

  • line-height와 font-size의 크기값을 잘 조정하여 블럭 요소 높이의 중간에 위치하게 할 수 있다.

  • cursor: pointer;속성을 사용하면 :hover 등의 가상 클래스 사용시 마우스 포인터를 바꿔줄 수 있다.

  • 윤곽체를 만들고 싶다면 text-shadow를 이용하자!

1
2
3
 {
  text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; /*윤곽체 처럼 보이게 하기*/
}

  • display: inline-block에서 부모 요소 크기 문제로 block이 수직으로 쌓인다면 white space: nowrap;을 사용해보자!

  • 중첩되는 offset 값이 걱정이라면 초기값으로 되돌리는 initial 속성값을 사용해보자.

1
2
3
4
5
.offset-initial {
  display: block;
  right: 0;
  left: initial;
}

Git 관련

  • Git push -f는 코드 변경 이력을 덮어쓴다. 원격 저장소의 변경 이력을 나의 개인적인 변경이력으로 덮어씌우며 되돌릴 수 없다. 개인 프로젝트라면 상관 없지만 협업일 경우 함부로 입력해서는 안 된다.

기타

  • nav바를 포함 박스 콘텐츠를 꾸미고 싶을 때 box-shadow, background로 꾸미면 자연스럽고 예쁘게 꾸밀 수 있다.

  • CSS로 꾸밀 때 그라데이션 효과를 체험해 보고 CSS 적용 코드를 복사해 올 수 있다. colorzilla

  • CodePen 에 가면 다양한 코드와 기발한 꾸밈 요소를 볼 수 있다.

오늘 느낀 것

  • cascading은 css의 정체성! 중첩이 어렵더라도 해제가 아닌 회피! 잘 이용해보자!

  • 점점 어려워진다. 좀 더 집중하고 좀 더 탐구하자!

  • 오늘은 큼지막한 내용보다 자잘자잘한 tip을 많이 얻었다. 태그와 속성을 알아봤자 응용하지 못하면 쓸모 없다. 다양하게 배우는 HTML/CSS 관련 지식을 사용해보자.

  • HTML과 CSS는 재밌다가도 욕이 나오게 만든다. 질서 속의 무질서 속의 질서 같은 느낌이다. 논리적이다가도 무작정 우겨넣는 기분이기도 하고, 받아드리자…

Nyong’s GitHub