오늘의 꿀팁
💡 인맥 중요하다..
💡 포트폴리오에 네이밍 규칙, 코딩 컨벤션 정의해놓으면 플러스 요인이 될 수 있다
🎨 커스텀 input
https://github.com/yoonmallang22/HTML-CSS/tree/main/exercise%F0%9F%93%9D/custom-input
시각장애인들은 탭으로 이동하기 때문에 포커싱되게 하는 것이 중요한데, 접근성을 위해 사용하는 경우 포커싱 이벤트가 일어나면 마우스 이벤트로도 작동하는 :focus는 시각적인 불편함과 체크를 해제했음에도 포커스되어 있다는 이유로 작동하여 혼란을 줄 수 있기 때문에 키보드 입력이 일어났을 경우만 적용되는 :focus-visible이 더 좋은 화면을 보여줄 수 있다.
- 포커스 디자인 속성
outline,outline-offset
🎨 IR(Image Replacement) 테크닉
디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법
사용된 이미지 내에서 의미있는 텍스트의 대체 텍스트를 제공하는 경우
스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우
ex) <section>, <article> 제목 태그 써야 하지만 굳이 읽어줄 필요 없을 때
이미지 off 시에도 대체 텍스트를 보여주고자 하는 경우
ex) 다음 메인화면 메뉴
: 폰트 용량이 굉장히 크기 때문에 이미지를 사용하는데 이미지 렌더링이 실패하는 경우 대체 텍스트가 보일 수 있도록 이미지 아래에 대체 텍스트를 위치하게 한다
- CSS 클립방법: 웹접근성을 고려한 숨김 처리
.a11y-hidden {
/* clip 쓰려면 position: absolute; 필요 */
position: absolute;
/* clip-path 지원해주지 않는 브라우저가 있기 때문에 네이버는 clip을 쓰고 있음 */
clip: rect(1px, 1px, 1px, 1px);
/* clip은 이제 더이상 권장되지 않고 최신 속성인 clip-path로 대체되었음 */
clip-path: inset(50%);
width: 1px;
height: 1px;
/* IE 구버전에서 인식을 못하는 경우가 있기 때문에 margin: -1px; 사용 */
margin: -1px;
overflow: hidden;
padding: 0;
}💻 로그인 실습
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/login-join
- 버튼 기본 타입은
submit이기 때문에 데이터를 보내는 버튼이 아닐 경우에는 type="button"을 꼭 써줘야 한다 - 사용자의 편의성을 위해 버튼 크기를 이미지보다 크게 잡아주는게 좋다
🎨 CSS 특강_4
by. 빔 캠프 이종찬 님
-
font-family설정 어디에?
:root추천
font-family상속이 되는 속성이니까 가장 상위에 넣어주는게 경제적이다
전체 선택자(*)처럼 불필요한 타입까지 선택할 필요가 없다
그런데 가끔 상속이 안되고 사용자 에이전트 스타일이 있어서 따로 상속시켜줘야 한다
ex)button {font-family: inherit;} -
이미지가 반복되고 콘텐츠의 변화가 빈번할 것 같다면
<img>사용하고
고정적이라면 CSSbackground-image: url();사용 (-> 유지보수 고려) -
이미지 초기화
img {
max-width:100%;
height:auto;
vertical-align:top;
}max-width: 100%는 이미지의 원본 사이즈를 유지하면서도 부모가 제공해주는 컨테이닝 블록의 너비보다 더 커지지는 않게 제한을 건다.(이미지의 맥시멈 width를 컨테이닝 블록의 width로 제한한다.)
height: auto;는 보통 <img> 마크업에 작성되어있는 width="" height="" attribute 때문에 auto로 작성한다. (width값에 비례해서 height값을 만들어준다.)
text-indent마이너스값
텍스트(inline 요소 포함)가 왼쪽 방향으로 이동한다.
마치 inline 세상에서의 Negative Margin 같은 느낌
