# 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

# 내 입맛에 맞춘 Reset.css




Reset.css 는 (브라우저간의 차이를 최소화시켜) 스타일을 초기화 시키고, 그 상태에서 디자인을 만들어나가기 위해 생겨났습니다.



아래의 reset.css는 자주 사용되는 초기화와,  여러 프로젝트를 경험하면서 추가 시킨
제 입맛에 맞춘 reset.css 입니다.

아래의 css 외에,  reset.css에 추가하면 좋을 듯한 여러분의 의견을 언제나 환영합니다  : )


reset.css (v.20180403)
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figcaption, figure,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

html, body {
    height:100%;
    /* font:normal 14px 'Noto Sans', dotum, '돋움', sans-serif;
       color:#333;
       letter-spacing:-0.5px; */
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul, ol{
    list-style:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color:inherit;
}

a:link, a:visited {
    text-decoration:none;
    color:inherit;
}

a:hover {
    text-decoration:underline;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/*
caption, legend{
    position:absolute;
    left:-100000px;
    top:auto;
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    width:0;
    height:0;
    font-size:0;
    line-height:0;
}
*/

input, select {
    vertical-align:middle;
}

ol, ul, li {
    list-style:none;
}

img {
    border:0;
    vertical-align:top;
}

fieldset {
    vertical-align:middle;
}

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

Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
Normalize.css (v8.0.0)  (527) 2018.04.03
시멘틱 마크업을 위한 콘텐츠 요소 판별  (586) 2018.03.30

+ Recent posts

티스토리툴바