TIL/웹표준사이트(8)
-
로그인
(접근성을 위한 정보제공 내용) 로그인 창을 만들 때에도 접근성을 생각해서 항상 정보를 입력해줘야 한다 스크린에선 보이지않되, 정보는 남아있어야 하기 때문에 Screen Out 방법을 이용해 숨겨준다
2021.04.01 -
콘텐츠 영역을 보이지 않게 하는 방법
display: none; — display: block; (영역이 사라짐) visibility: hideen; — visibility: visible; (영역유지) opasity: 0; — opasity: 1; (영역유지) width: 0; height: 0; overflow: hidden; (가로, 세로 설정값에 따라 달라짐)
2021.04.01 -
Reset.css의 필요성
태그들이 기본적으로 가지고 있는 속성들이 있기 때문에 css 작업을 더 편리하게 하기위해서는 각 태그들이 가진 속성을 무효화시켜주는 작업이 필요하다. 그리고 웹사이트 제작의 효율성을 위해서 기본적인 틀 위에 추가로 작업할 때 필요한 패딩/ 마진/ 폰트사이즈 등의 값을 미리 지정해두는 것도 좋다.
2021.03.31 -
Html 특수기호 표시
빈 공간 (space) & & > " (큰따옴표) " © ©
2021.03.31 -
Float 영역깨짐 방지법
float: left 적용시 (height:0)높이값이 0이 되며 영역이 깨지는 오류가 발생했을 때 깨지는 영역에 똑같이 float: left를 사용한다 (X) —> 모든 박스에 float: left를 적용하게 됨 float의 성질을 차단하는 clear: both 를 사용한다. (X) —> 복잡한 구조일경우 어떤 영역이 깨졌는지 찾기 어려움 float을 사용한 상위 박스에 overflow: hidden을 사용한다. (O) —> 현재로선 제일 많이 사용됨(웹표준 사이트) clearfix를 사용한다. (O) —>반응형 웹사이트 만들 때 사용
2021.03.31 -
웹표준을 준수한 이미지 적용 방법 / 대체텍스트
img로 표현 의미가 있을 때(logo, menu ..) - alt 태그를 이용해 대체 문자를 표현해 준다 background 속성으로 표현 의미가 없을 때 - 대체 문자 X 의미 있는 이미지도 background 속성으로 표현 요즘 많이 사용되는 방법 가상으로 대체 문자를 만들어 준다(IR 효과) - 웹표준을 준수하기 위해서는 접근성을 위해 이미지의 의미가 있는경우 문자로 표현해 주어야 한다. 이미지 스프라이트 효과(여러 로고가 들어있는 한 개의 이미지를 적용, 포지션값을 변경해 각기 다른 로고를 나타낼 수 있다) IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공한다 Phark Method -의미 있는 이미지의 대체 텍스트를 제공하는..
2021.03.28