서식 관련 style(table, input 등)

CSS

GROWNFRESH 2020. 7. 3. 16:50

0. input의 label 높이 조정

: position 속성 이용

: 체크박스와 라벨에 각각 position:relative; 값을 부여하고, top값을 조정한다.

0. CSS에서 특정 input type을 선택하고 싶을 때

: input[type="text"] // type="text"인 input

: input[readonly] // readonly 속성을 가지고 있는 input

: input[value~="submit"] // value속성이 submit 문자를 포함하고 있는 input

: a[href^="https"] // href 속성이 https 문자로 시작하는 a요소

: a[href$="localhost"] // href 속성이 localhost로 끝나는 a요소

0. input이 focus됐을 때 테두리 변경

-색상 변경 : input:focus {outline:2px solid #d50000;}

-없애기 : input:focus {outline:none;}

0. input 입력 막기

: input 요소에 'readOnly' 또는 'disabled' 속성 입력하기

0. table border 여백

셀과 셀 사이에 여백이 존재한다.

: table { border-spacing:0 } 으로 여백을 없앨 수 있다.

: or border-collapse: ?? (나중에 찾아보자)