메모)

PC 웹접근성 심사 환경/기준

- IE 최신버전 테스트 (Chrome 심사 하지 않음)
- 스크린리더기 최신버전 테스트 (v6.5 2018년11월작성)
- 웹표준과는 별개로 심사(웹표준에 위배되어도 스크린리더기로 동작만 잘 한다면..)




'Front-end dev > 웹표준ㆍ웹접근성' 카테고리의 다른 글

빈태그 사용 시 웹접근성  (501) 2020.01.09
(웹표준/웹접근성) table  (484) 2018.11.28
웹접근성 swiper  (1119) 2018.09.21

메모)

​​(슬라이드) swiper를 사용할 경우 웹접근성


​swiper​를 사용할 때, ​loop(무한루프)를 설정하게 되면
​포커스가 첫페이지가 아니라 마지막 페이지로 가기때문에​​​ 웹접근성에 맞지 않는다고 함.

루프를 해제하는것으로 해결.

'Front-end dev > 웹표준ㆍ웹접근성' 카테고리의 다른 글

빈태그 사용 시 웹접근성  (501) 2020.01.09
(웹표준/웹접근성) table  (484) 2018.11.28
(웹접근성) PC 심사 환경/기준  (865) 2018.11.27

메모)

​​하이브리드 앱 개발중 android와 ios의 다른 점 발견


​ios(safari) 에만 기본적으로

​input:disabled, textarea:disabled {opacity:0.4;} 가 ​적용된다.

​​공통작업이 따로 필요할듯!

'Front-end dev > HTML || CSS' 카테고리의 다른 글

CSS 말줄임  (513) 2020.01.06
Tag  (794) 2020.01.06
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
Normalize.css (v8.0.0)  (527) 2018.04.03

# input type="radio", type="checkbox" customizing




퍼블리싱을 하다보면 디자인이 된 input 을 종종 작업하게 됩니다.

오늘은 input[type="radio"], input[type="checkbox"] 커스터마이징에 대한 포스팅을 해볼까 합니다.



Result


이렇게 만들어볼거에요 : )




HTML
<!-- 라디오버튼_on -->
<input type="radio" id="on" name="radio" checked>
<label for="on">라디오버튼_on</label>

<!-- 라디오버튼_off -->
<input type="radio" id="off" name="radio">
<label for="off">라디오버튼_off</label>

- 웹접근성에 맞게, input 태그의 id 값과 label 태그의 for 값을 맞춰줍니다. 
   (이렇게 하면 label 태그를 클릭했을 때, input과 연결시킬 수 있어요!)
- input 태그의 name 값을 통일시켜서 같은 목적의 radio 버튼임을 명시해줍니다.
   (name 값을 맞춰주지 않으면, 각각 별개의 radio 버튼이 되어버려요)


CSS
.radio {
    visibility: hidden;
    position: absolute;
}
.radio + label {
    display: inline-block;
    margin-right: 15px;
    padding-left: 20px;
    font-size: 16px;
    color: #333333;
    background: url('/img/radio_off.png') left no-repeat;
    cursor: pointer;
}
.radio:checked + label {
    background: url('/img/radio_on.png') left no-repeat;
}

- radio{ position: absolute; } 의 값은 마크업, 혹은 디자인에 따라 absolute, relative 혹은  static(default 값)으로 조정이 필요합니다.
(상황에 맞게 작업해주셔야해요, 레이아웃이 깨질 수도 있어요!)
- 작업하시면서 radio 이미지 사이즈에 맞에 위치값들도 조정해주세요 : )



네. 이렇게 아주 간단히 input 커스텀을 해보았어요
input[type="checkbox"] 역시 radio 와 동일하게 작업해주시면 됩니다!

끝!

'Front-end dev > HTML || CSS' 카테고리의 다른 글

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
내 입맛에 맞춘 Reset.css  (520) 2018.04.03
Normalize.css (v8.0.0)  (527) 2018.04.03
시멘틱 마크업을 위한 콘텐츠 요소 판별  (586) 2018.03.30

# console.log 에 style 적용하기




개발자 도구를 열어 작업을 할 때, 우리는 종종 style이 입혀진 console.log를 발견할 수 있다.

예를 들자면 쿠팡이나 티스토리가 있을 수 있겠다. (괜히 이쁘고 부러움)


퍼블리셔로서 스타일이 입혀진 콘솔로그를 지나칠 수가 없지.

오늘은  console.log 에 style 입히는 방법을 알아보려 한다.



아주 간단하다.


메시지에 %c 플래그(flag)만 추가해주고, 원하는 스타일을 입력하면 끝. 



간단하게 예를들어,

console.log('%c Welcome!', 'background-color:green; color:#ffffff;');


결과물은 이렇다.




이렇게 하면?

console.log('%c You are so %c attractive ', 'background-color:#000000; color:#ffffff; font-size:23px;', 
'background-color:red; color:#ffffff; font-size:23px;');


요렇게 나오고!




조금 더 꾸며볼까?

var style = [
    'padding : 30px 20px',
    'margin : 20px 0',
    'background : linear-gradient(#98004C, #FFE8F3)',
    'font-size : 25px',
    'font-weight : bold',
    'text-align : center',
    'color : #ffffff'
].join(';');

console.log('%c #ARA NOTE', style);

결과는?







일단 사용해 본 결과, display 와 line-height 는 적용이 안되는것 같다. 

추후에 내 전용 로그를 만들 때, 하나하나 살펴봐야겠다.

'Front-end dev > JavaScript || jQuery' 카테고리의 다른 글

정규식표현(패스워드)  (502) 2020.05.25
jQuery selector  (540) 2020.05.04

+ Recent posts

티스토리툴바