일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 파이썬
- 나라 사슴
- 혼공파미션
- 일본여행
- 파이썬혼공
- 비쥬얼스튜디오코드
- 비쥬얼스튜디오코드설치
- 파이썬조건문
- 일본
- 일본 관광
- 일본 사슴
- 호버스타일
- 혼자여행
- 나라여행
- 혼공파선택미션
- 일본 나라
- 조건문
- 한빛미디어
- hover style
- 혼공단
- 파이썬문자열
- 파이썬혼자공부하기
- 혼공파
- 파이썬공부
- 혼자공부하는파이썬
- Python
- #파이썬
- input style
- input
- 일본나라여행
- Today
- Total
목록HTML&CSS (22)
Eveningstar
rgb? hsla? hex? 흔히들 web에서 쓰는 색상은 rgb 값이라고 표현한다. 포토샵에서 저장할때 문서 설정을 rgb로 두어야 모니터에서 제대로 된 색상이 나온다고 할 때 그 rgb이다. (반대로 인쇄물은 cmyk) 그리고 css로 코딩할 때도 rgb값으로 코딩하는 경우를 많이 봐왔을 것이다. 예를 들어 background:rgb(255,255,255); 로 배경색을 지정하는 등의 방식으로 그런데 나는 rgb 코드가 너무 길다고 생각해서(...) hex 코드로 배경색을 지정해주는 것을 선호하는데 background:#222222 or background:#222 -> 숫자 6개가 동일하다면 3개 숫자만 단축으로 써줘도 된다. 이런식으로 사용을 하고 있다. 이렇듯 색상 값의 방법이 hex와 rgb가..
반응형 웹사이트를 만들면서, 기존의 디자인 체크박스를 웹접근성 심사에 통과시키기위해서 만들었던 방법을 처음과 완전히 다르게 고쳐야했다.ㅜㅜ 그래서 이 기회에 체크박스 디자인에 대해 정리해보려고한다. 디자인 체크박스를 만들기위해서는 브라우저별로 checkbox의 디자인이 다르기 때문에 똑같이 만들기위해서는 기본 checkbox에 디자인css를 다시 넣어주어야한다. 우선 브라우저별로 checkbox 디자인을 비교해보았다. 차례대로 포커싱 상태 , 체크된 상태, 기본상태이다. 크롬을 제외하고는 포커싱될때 점선으로 표시된다. checkbox와 포커싱 선의 간격을 조정하려면 padding값을 바꾸면 되는데, 보다시피 firefox가 기본적으로 padding이 있어서 나는 사용하지 않았다. 1) label로 che..