10가지 유용한 CSS 팁
1. 부드러운 스크롤
일부 웹사이트를 방문하여 다른 섹션으로 이동하려고 하면 해당 섹션으로 원활하게 스크롤됩니다. 한 줄의 CSS를 사용하여 웹사이트에서 이 기능을 구현할 수 있습니다.
참고: Safari에서는 작동하지 않습니다!
html {
scroll-behavior: smooth;
}
라이브 예제
2. <textarea> 크기 조정 방지
resize
속성을 사용하여 <textarea>
요소의 크기가 조정되는 것을 방지(또는 한 축으로 제한)할 수 있습니다.
textarea.no-resize {
resize: none;
}
textarea.horizontal-resize {
resize: horizontal;
}
textarea.vertical-resize {
resize: vertical;
}
라이브 예제
3. 드롭 캡
::first-letter
의사 요소를 사용하여 단락에 단락 시작표시문자를 추가할 수 있습니다.
::first-letter {
font-size: 250%;
}
라이브 예제
4. 드롭 섀도우
투명한 이미지에 drop-shadow()
필터 효과를 사용할 수 있습니다. box-shadow
속성을 사용하는 것보다 훨씬 더 나은 그림자 효과를 줄 것입니다.
img {
filter: drop-shadow(0 0 3px #000);
}
라이브 예제
5. 모든 <div> 요소 가운데 정렬
때때로 <div>
요소를 페이지 중앙에 배치하는 것이 어려울 수 있지만 이 팁에서는 그렇지 않습니다. 몇 줄의 CSS 코드를 사용하여 페이지의 모든 <div>
요소를 가운데에 맞출 수 있습니다.
body {
display: grid;
place-items: center;
}
라이브 예제
6. 캐럿 색상 입력
caret-color
속성을 사용하여 입력 필드 캐럿의 색상을 변경할 수 있습니다.
input {
caret-color: red;
}
라이브 예제
7. 강조 표시 방지
이것은 #2와 비슷하지만 user-select
속성을 사용하여 사용자가 요소를 강조 표시하지 않도록 할 수 있습니다.
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
라이브 예제
8. 입력 범위 의사 클래스
덜 알려진 :in-range
및 :out-of-range
의사 클래스는 현재 값이 <input>
및 min
속성으로 지정된 범위 내에 있는 max
요소의 유효성을 검사하는 데 도움이 될 수 있습니다.
input:in-range {
background: rgba(0, 255, 0, .25);
}
input:out-of-range {
background: rgba(255, 0, 0, .25);
}
라이브 예제
9. 이미지 오버레이
object-fit
속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹사이트에 영웅 이미지를 만들고 싶을 때 유용할 수 있습니다.
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
라이브 예제
10. 전환 속성
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요? transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.
a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrwolferinc/10-helpful-css-tips-4669
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
html {
scroll-behavior: smooth;
}
resize
속성을 사용하여 <textarea>
요소의 크기가 조정되는 것을 방지(또는 한 축으로 제한)할 수 있습니다.textarea.no-resize {
resize: none;
}
textarea.horizontal-resize {
resize: horizontal;
}
textarea.vertical-resize {
resize: vertical;
}
라이브 예제
3. 드롭 캡
::first-letter
의사 요소를 사용하여 단락에 단락 시작표시문자를 추가할 수 있습니다.
::first-letter {
font-size: 250%;
}
라이브 예제
4. 드롭 섀도우
투명한 이미지에 drop-shadow()
필터 효과를 사용할 수 있습니다. box-shadow
속성을 사용하는 것보다 훨씬 더 나은 그림자 효과를 줄 것입니다.
img {
filter: drop-shadow(0 0 3px #000);
}
라이브 예제
5. 모든 <div> 요소 가운데 정렬
때때로 <div>
요소를 페이지 중앙에 배치하는 것이 어려울 수 있지만 이 팁에서는 그렇지 않습니다. 몇 줄의 CSS 코드를 사용하여 페이지의 모든 <div>
요소를 가운데에 맞출 수 있습니다.
body {
display: grid;
place-items: center;
}
라이브 예제
6. 캐럿 색상 입력
caret-color
속성을 사용하여 입력 필드 캐럿의 색상을 변경할 수 있습니다.
input {
caret-color: red;
}
라이브 예제
7. 강조 표시 방지
이것은 #2와 비슷하지만 user-select
속성을 사용하여 사용자가 요소를 강조 표시하지 않도록 할 수 있습니다.
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
라이브 예제
8. 입력 범위 의사 클래스
덜 알려진 :in-range
및 :out-of-range
의사 클래스는 현재 값이 <input>
및 min
속성으로 지정된 범위 내에 있는 max
요소의 유효성을 검사하는 데 도움이 될 수 있습니다.
input:in-range {
background: rgba(0, 255, 0, .25);
}
input:out-of-range {
background: rgba(255, 0, 0, .25);
}
라이브 예제
9. 이미지 오버레이
object-fit
속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹사이트에 영웅 이미지를 만들고 싶을 때 유용할 수 있습니다.
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
라이브 예제
10. 전환 속성
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요? transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.
a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrwolferinc/10-helpful-css-tips-4669
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
::first-letter {
font-size: 250%;
}
투명한 이미지에
drop-shadow()
필터 효과를 사용할 수 있습니다. box-shadow
속성을 사용하는 것보다 훨씬 더 나은 그림자 효과를 줄 것입니다.img {
filter: drop-shadow(0 0 3px #000);
}
라이브 예제
5. 모든 <div> 요소 가운데 정렬
때때로 <div>
요소를 페이지 중앙에 배치하는 것이 어려울 수 있지만 이 팁에서는 그렇지 않습니다. 몇 줄의 CSS 코드를 사용하여 페이지의 모든 <div>
요소를 가운데에 맞출 수 있습니다.
body {
display: grid;
place-items: center;
}
라이브 예제
6. 캐럿 색상 입력
caret-color
속성을 사용하여 입력 필드 캐럿의 색상을 변경할 수 있습니다.
input {
caret-color: red;
}
라이브 예제
7. 강조 표시 방지
이것은 #2와 비슷하지만 user-select
속성을 사용하여 사용자가 요소를 강조 표시하지 않도록 할 수 있습니다.
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
라이브 예제
8. 입력 범위 의사 클래스
덜 알려진 :in-range
및 :out-of-range
의사 클래스는 현재 값이 <input>
및 min
속성으로 지정된 범위 내에 있는 max
요소의 유효성을 검사하는 데 도움이 될 수 있습니다.
input:in-range {
background: rgba(0, 255, 0, .25);
}
input:out-of-range {
background: rgba(255, 0, 0, .25);
}
라이브 예제
9. 이미지 오버레이
object-fit
속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹사이트에 영웅 이미지를 만들고 싶을 때 유용할 수 있습니다.
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
라이브 예제
10. 전환 속성
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요? transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.
a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrwolferinc/10-helpful-css-tips-4669
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
body {
display: grid;
place-items: center;
}
caret-color
속성을 사용하여 입력 필드 캐럿의 색상을 변경할 수 있습니다.input {
caret-color: red;
}
라이브 예제
7. 강조 표시 방지
이것은 #2와 비슷하지만 user-select
속성을 사용하여 사용자가 요소를 강조 표시하지 않도록 할 수 있습니다.
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
라이브 예제
8. 입력 범위 의사 클래스
덜 알려진 :in-range
및 :out-of-range
의사 클래스는 현재 값이 <input>
및 min
속성으로 지정된 범위 내에 있는 max
요소의 유효성을 검사하는 데 도움이 될 수 있습니다.
input:in-range {
background: rgba(0, 255, 0, .25);
}
input:out-of-range {
background: rgba(255, 0, 0, .25);
}
라이브 예제
9. 이미지 오버레이
object-fit
속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹사이트에 영웅 이미지를 만들고 싶을 때 유용할 수 있습니다.
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
라이브 예제
10. 전환 속성
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요? transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.
a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrwolferinc/10-helpful-css-tips-4669
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
덜 알려진
:in-range
및 :out-of-range
의사 클래스는 현재 값이 <input>
및 min
속성으로 지정된 범위 내에 있는 max
요소의 유효성을 검사하는 데 도움이 될 수 있습니다.input:in-range {
background: rgba(0, 255, 0, .25);
}
input:out-of-range {
background: rgba(255, 0, 0, .25);
}
라이브 예제
9. 이미지 오버레이
object-fit
속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹사이트에 영웅 이미지를 만들고 싶을 때 유용할 수 있습니다.
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
라이브 예제
10. 전환 속성
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요? transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.
a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrwolferinc/10-helpful-css-tips-4669
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}
이미 알고 있을 수도 있지만 키프레임을 사용하지 않고 요소에 애니메이션을 적용할 수 있는 방법이 있다고 말하면 어떻게 될까요?
transition
속성을 사용하면 요소의 두 상태 간의 전환을 정의할 수 있습니다. 호버 애니메이션에 주로 사용됩니다.a {
color: #0d6efd;
text-decoration: none;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
a:hover {
color: #0a58ca;
}
라이브 예제
Reference
이 문제에 관하여(10가지 유용한 CSS 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mrwolferinc/10-helpful-css-tips-4669텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)