.radio1{ border:2px solid white; box-shadow:0 0 0 1px rgb(18, 18, 18); appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; } .radio1:hover{ box-shadow:0 0 0 1px blue; cursor: pointer; } .radio1:checked{ background-color:blue; } Modified
programming/HTML&CSS
이미지 포맷(format) 설정 이미지의 종류에 맞게 포맷을 설정하면 이미지 최적화를 할 수 있다. 전통적으로 많이 사용하는 JPG, PNG 포맷은 다음과 같은 이미지에서 최적화되어있다. JPG : 카메라로 찍은 실제 사진 PNG : 만들어진 이미지 웹 사이트 성능 및 속도 분석 사이트 웹사이트 성능을 개선하기 위해, 서비스 배포 하기 전에 미리 최적화를 하는 것이 좋다. 아래의 사이트는 최적의 웹사이트를 유지하는데 도움이 되는 분석도구다. Pingdom 핑덤은 페이지 용량이나 다운로드 속도, 코드 분석을 통한 성능 등급과 개발 제안을 하며 웹페이지의 다이어트 진행 상황 또한 기록할 수 있어 매우 유용한 사이트이다. Google PageSpeed Insights 구글에서 운영하는 페이지 스피드 인사이트는..
여러 개의 이미지를 하나의 이미지로 만들어 놓는 것 -이미지 로딩 속도 향상(최적화) -HTML 마크업이 간결해짐 -하나의 파일만 관리하면 됨. (여러 이미지를 하나로 합쳐놓고 위치로 화면에 표시시키기 때문에 파일 수가 줄어든다) - 이미지 스프라이트 기법은 되도록 의미가 없고 디자인을 목적으로 하는 이미지를 위해 사용하는 것이 적합 [HTML/CSS] 이미지 스프라이트 기법 ✂️ (velog.io)
1. 최소 반응형 레이아웃 가장 많이 사용하는 대중적이고 간결한 기준입니다. 768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분을 합니다. 대부분 디바이스에 잘 맞고, 반응형 레이아웃을 위한 CSS 작성도 간결하기 때문에 특별한 레이아웃이 아니면 이 기준으로 미디어 쿼리를 작성하면 됩니다. 최소 반응형 레이아웃 미디어 쿼리는 다음과 같이 작성합니다. /* 데스크탑 */ @media screen and (max-width:1023px) { /* 타블렛 */ } @media screen and (max-width:767px) { /* 모바일 */ } 출처 CSS 반응형 레이아웃 너비를 나누는 기준 정하기 (tistory.com)
input에 autofocus required 속성을 주면 검은 border가 생긴다 이를 없애기: input:focus {outline:none;}
정의 및 특징 태그는 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용합니다. 요소의 텍스트는 보통 이탤릭체로 표현되며, 전문용어나 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등을 나타낼 때 사용됩니다. 다음과 같은 의미 요소(semantic element) 중에서 사용하기에 적당한 요소를 찾지 못했을 때만 요소를 사용할 수 있습니다. - : 창작물의 제목 - : 용어(term)의 정의 - : 강조된 텍스트 - : 하이라이트된(highlighted) 텍스트 - : 긴급하거나 중요한 텍스트 예제) 타이타닉호는 영국의 화이트 스타 라인이 운영한 북대서양 횡단 여객선이다. 1912년 4월 10일 영국의 사우샘프턴을 떠나 미국의 뉴욕으로 향하던 첫 항해 중에 4월 15일 ..
method Visible Accessible .sr-only X O aria-hidden="true" O X hidden="" X X display: none X X visibility: hidden X (Space) X opacity: 0 X (Space) Depends? clip-path: circle(0) X (Space) Depends? transform: scale(0) X (Space) O width: 0+height: 0 X X content-visibility: hidden X X .sr-only .sr-only는 페이지에서는 가리지만, 스크린 리더에서는 접근 가능하도록 하는 일종의 CSS 선언이다. bootstrap에 이와 관련된 코드가 있다 .sr-only { border: 0 !im..
autocomplete : 태그에서 "자동완성" 기능을 사용할지 여부 (on/off) autocomplete="on" : 브라우저가 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다. autocomplete="off " : 브라우저의 자동완성 기능이 나타나지 않는다. 사용예시) autofocus : 태그에서 autofocus required 설정 시 해당 input 칸에 자동으로 커서 초점이 나타나게 된다. (페이지가 로드될 때 자동으로 포커스(focus)가 요소로 이동됨) autofocus 속성은 불리언(boolean) 속성으로,불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을..
a { text-decoration:none !important } a:hover { text-decoration:none !important }
a:hover, a:focus { animation-duration: 3s; animation-name: rainbowLink; animation-iteration-count: infinite; } @keyframes rainbowLink { 0% { color: #ff2a2a; } 15% { color: #ff7a2a; } 30% { color: #ffc52a; } 45% { color: #43ff2a; } 60% { color: #2a89ff; } 75% { color: #202082; } 90% { color: #6b2aff; } 100% { color: #e82aff; } } ref.) [CSS] 링크 Hover시, 무지개 효과 CSS3로 구현하기 | by Dong-gri | guleum | Me..
