라디오/체크박스와 텍스트 정렬하기

html 2013.06.25 16:13

출처: http://www.webpeace.net/content.jsp?num=125&userid=dygksk&type=user


라디오/체크박스와 텍스트의 정렬을 해보겠습니다.
크로스브라우징이 가장 어려운 부분이고, UI개발자가 가장 짜증나고 싫어하는 작업 중에 하나가 아닐까 싶습니다.(그죠? 내말 맞죠?)
그리고 작업자마다 방법이 너무 다양한 부분이기도 합니다.
그래서 필자는 고민하고, 생각한 결과 아래와 같은 방법이 좋을 것 같아서 여러분께 공유합니다.
여러 방법 중에 개인적으로는 최고의 방법이 아닐까 싶은데요.(지금까지는..)

참고로 브라우저에 보여지는 라디오/체크박스 사이즈는 아래와 같습니다.
WinXP : 라디오 13x13, 체크박스 13x13
Win7 : 라디오 12x12, 체크박스 13x13

HTML

<div><input type="checkbox" class="input_chk"> <label for="">라디오/체크박스와 텍스트 정렬해 봅시다.</label></div>
<div><input type="radio" class="input_chk"> <label for="">라디오/체크박스와 텍스트 정렬해 봅시다.</label></div>

CSS

*{margin:0;padding:0;font-size:12px;font-family:'돋움',dotum} label{vertical-align:-1px} .input_chk{width:13px;height:13px;vertical-align:text-top}

적용 화면

 
 
  • 위 방법을 정리하면,
    라디오/체크박스에 width:13px;height:13px;vertical-align:text-top
    label에 vertical-align:-1px
    을 적용하면 된다.
  • OS 윈도우xp와 윈도우7 / 브라우저 ie6,7,8,9,ff,chrome,opera,safari 환경에 최고의 방법
  • font-family를 선언해 준다.(이 방법은 폰트 돋움과 굴림에서 12px 사이즈로 테스트 되었습니다.)
    웹 페이지 작업 시에 font-family를 선언 안해주는 경우는 없기 때문에 신경안쓰셔도 될 것 같습니다.(다만, 테스트 할때 해당 내용은 기억하시길..)
  • 최악의 단점 : 마크업 시 라디오/체크박스와 label 사이에 여백이 없을 경우 ie8에서 상황에 따라 라디오/체크박스와 텍스트의 정렬이 안맞음.(ie8에 text-align:text-top에 대한 버그가 있음) 그래서 라디오/체크박스와 label 사이에 항상 공백( )을 줘서 주석으로 설명을 달아 놓아 개발에 전달한다. 

이미지와 첨부파일을 적용할 수 없는 블로그이기에 각자 알아서 해당 방법을 적용하여 테스트해 보시길...
해당 글의 방법보다 더 좋은 방법 혹은 개선사항이나 오류사항이 있다면 공유 부탁드립니다.

'html' 카테고리의 다른 글

라디오/체크박스와 텍스트 정렬하기  (0) 2013.06.25
html 캐쉬 안되게  (0) 2013.06.19
안드로이드 레이어팝업 이슈  (0) 2013.06.19
div 텍스트 수직 중앙정렬  (0) 2013.05.24

설정

트랙백

댓글

html 캐쉬 안되게

html 2013.06.19 16:17

<meta http-equiv="Cache-Control" content="no-cache"/> 

<meta http-equiv="Expires" content="0"/>

<meta http-equiv="Pragma" content="no-cache"/> 

'html' 카테고리의 다른 글

라디오/체크박스와 텍스트 정렬하기  (0) 2013.06.25
html 캐쉬 안되게  (0) 2013.06.19
안드로이드 레이어팝업 이슈  (0) 2013.06.19
div 텍스트 수직 중앙정렬  (0) 2013.05.24

설정

트랙백

댓글

안드로이드 레이어팝업 이슈

html 2013.06.19 13:56

안드로이드 일부 버전에서 레이어팝업을 띄울 시 팝업 내에 버튼이나 인풋등 클릭 요소들이 터치 시 팝업 뒤 본 화면의 input이나 a등의 클릭 요소들이 터치되는 경우가 있더라


안드로이드 일부 버전에서 position:absolute와 z-index를 같이 사용 시 z-index 무시


해결책은 다음과 같다


바디 : <body style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"> 
레이어팝업 : <div class="popup" style="-webkit-tap-highlight-color:orange;"> 


'html' 카테고리의 다른 글

라디오/체크박스와 텍스트 정렬하기  (0) 2013.06.25
html 캐쉬 안되게  (0) 2013.06.19
안드로이드 레이어팝업 이슈  (0) 2013.06.19
div 텍스트 수직 중앙정렬  (0) 2013.05.24

설정

트랙백

댓글

div 텍스트 수직 중앙정렬

html 2013.05.24 16:50

div 안에 텍스트를 수평중앙정렬하기 위해서는 text-align:center; 스타일을 주면 된다.
div 안에 텍스트를 수직중앙정렬을 하려면 vertical-align:middle; 스타일을 주면 될 것 같지만, 되지 않는다.
div 가 아닌 테이블의 경우 자동으로 수직으로도 정렬이 된다.
div 에서 수직으로 중앙정렬하기 위해서는 스타일에 display:table-cell; 속성을 주면 된다.

<div style="height:300px;text-align:right;display:table-cell;vertical-align:middle;">로그인 | 회원가입</div>

하지만 IE에서는 8.0 이상부터 위의 속성이 적용된다.
꼼수로는 div 의 height 값을 line-height 값과 동일하게 주면 된다.

<div style="height:300px;text-align:right;line-height:300px;">로그인 | 회원가입</div>



출처: http://dantes.kr/410

'html' 카테고리의 다른 글

라디오/체크박스와 텍스트 정렬하기  (0) 2013.06.25
html 캐쉬 안되게  (0) 2013.06.19
안드로이드 레이어팝업 이슈  (0) 2013.06.19
div 텍스트 수직 중앙정렬  (0) 2013.05.24

설정

트랙백

댓글