폰트 관련
1. 크롬의 최소 폰트 사이즈는 10px이다. 10px보다 작게 보이도록 우회할 수 있는 편법은 transform을 활용한다.
2. 흐르는 텍스트 css 속성 : marquee 참고
click, drag 관련
1. CSS로 클릭을 막는 속성
pointer-events: none
2. user-selector: none 처리
-ms-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
3. 더블 클릭 시 이미지 및 영역이 선택되는 이슈 제거
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* 인터넷익스플로러 */
user-select: none;4. 드래그 금지 코드
webkit-user-drag: none
이미지 처리
1. 이미지 비율 유지하고 남은 영역 보이게 처리하는 방법
image를 css background-image로 넣고 object-fit: contain; 처리
2. 이미지 비율 유지한 채 hover 시 1.2배로 키우는 방법
<부모 태그>
<이미지 태그 />
</부모 태그>
부모 태그에 position: relative; overflow: hidden;
이미지 태그 position: absolute; top: 50%; left:50; transform: translate(-50%, -50%);
부모 태그 hover 시 이미지 태그 transform: translate(-50%, -50%) scale(1.2);
3. sprite image 참고
해당하는 영역에 외부 박스로 위치해야 할 영역을 지정
박스 내부에서 이미지는 width, height 100%로 잡고, background로 이미지 추가
background-size를 사용하여 sprite 나눠진 영역만큼 설정해서 사용
(만약 스프라이트가 가로 3개 세로 2개라면 backgroud size는 300% 200%로 잡기)
위치는 background position을 사용함 전체 100% 기준에서 가로 2번째 이미지를 지정하려면
Background position 계산 = 100% / (가로 개수 - 1 ) 의 값을 background position x 값으로 넣으면 됨
4. 게시판 제목이 길어지더라도 글은 말줄임 처리하고 label 이미지는 표시하기
// new가 붙는 List인 경우
<ul>
<li>
<p>공지사항 [친구들 안녕?]이 업데이트 되었습니다.</p>
<p className="newLabel">NEW</p>
</li>
</ul>ul li {
position: relative;
display: flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
p:first-child {
max-width: calc(100% - 30px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.newLabel {
min-width: 30px;
font-size: 10px;
}
}
요소 숨김 처리
1. select box style 안보이도록 숨김 처리
.selectPart::-ms-expand {
display: none;
}
2. cursor pointer 제거 (mdn 참고)
caret-color: transparent;3. 여러 줄인 경우 말줄임표 처리
.target {
/* 한 줄 자르기 */
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 여러 줄 자르기 추가 스타일 */
white-space: normal;
line-height: 1.2;
height: 3.6em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3; /* 원하는 줄 수 표시 */
-webkit-box-orient: vertical;
}
기본 스타일 커스텀
1. scroll bar styling
/* width */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #aaa;
}2. input radio custom
<label for="radio1">
<input type="radio" id="radio1"/>
<span class="checkmark" />
</label>.checkmark {
width: 20px;
height: 20px;
background: url(이미지 링크);
}
input[type="radio"] {
appearance: none;
display: none;
}
label:hover .checkmark {
background: url(hover 이미지 링크);
}
label input:checked + .checkmark {
background: url(check 이미지 링크);
}3. li list number에 . 없애기 참고
ol {
list-style: none;
counter-reset: li;
}
li::before {
content: counter(li);
color: red;
display: inline-block;
width: 1em;
margin-left: -1em;
}
li {
counter-increment: li;
}
모바일, 기기 이슈
1. safari border radius 적용 안되는 문제 해결 코드 (stack overflow 참고)
// 부모 요소에 해당 코드 적용
.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
}2. safari input box shadow 제거
webkit-appearance: none;3. mobile, tab 파란색 하이라이트 제거
webkit-tap-highlight-color : 컬러;4. ipad에서 hover 효과 적용되지 않도록 처리
@media (hover) { ... }+. CSS로 PC와 Mobile 구분 방법 참고
+. ipad size media query 참고
ie 이슈
1. ie에서만 스타일을 적용하고 싶을 때 참고
2. ie flex:1 적용 이슈 → 참고
좋은 블로그 https://ahnheejong.name/articles/less-famous-css-properties/
댓글