모든 개발자가 알아야 할 8가지 필수 CSS 팁과 요령
빠른 작업 흐름과 아름다운 웹 디자인을 위해 이러한 주요 CSS 방법을 사용하고 있습니까?
CSS는 HTML 뼈대를 설정한 후 웹페이지에 스타일을 추가하는 데 사용됩니다. 또한 단 몇 줄의 코드만으로 CSS에서 멋진 디자인을 만들 수 있습니다.
모든 개발자는 프로젝트를 빠르고 효율적으로 개발하기 위해 이러한 CSS 요령을 알아야 합니다. 생산성을 한 단계 더 높여줄 것입니다. 시작해 보세요.
1. 호버 효과
:hover 선택기를 사용하여 HTML 요소에 호버 효과를 추가할 수 있습니다.
예: 버튼 요소에 마우스오버 효과 추가.
HTML 코드:
<button>Hover Over Me</button>CSS 코드:
button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}이 코드를 가지고 놀면서 페이드인 그로인, 기울기 등과 같은 효과를 추가할 수 있습니다. 당신만의 것으로 만들어보세요!
호버 시 CSS 페이드인 효과
button{
opacity:0.5;
}
button:hover{
opacity:1;
}호버에 대한 CSS 성장 효과
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}2. div 컨테이너에 맞게 이미지 크기 조정
높이, 너비 및 객체 맞춤 속성을 사용하여 div 컨테이너에 맞게 이미지 크기를 조정할 수 있습니다.
HTML 코드:
<img class="random-image" src="https://picsum.photos/200/300" />CSS 코드:
.random-image {
height: 100%;
width: 100%;
object-fit: contain;
}3. 모든 스타일 재정의
값 끝에 !important 지시문을 사용하여 속성의 다른 모든 스타일 선언(인라인 스타일 포함)을 재정의할 수 있습니다.
HTML 코드:
<p class="className" id="idName" style="background-color: orange;">
Hello World!
</p>CSS 코드:
p {
background-color: yellow;
}
.className {
background-color: blue !important;
}
#idName {
background-color: green;
}이 예에서 !important 규칙은 다른 모든 배경색 선언을 재정의하고 배경색이 녹색이 아닌 파란색으로 설정되도록 합니다.
4. 줄임표로 텍스트 자르기
text-overflow CSS 속성을 사용하면 줄임표(...)로 넘쳐나는 텍스트를 잘라낼 수 있습니다.
HTML 코드:
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
</p>CSS 코드:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}5. 텍스트 변환 사용
text-transform CSS 속성을 사용하여 텍스트를 대문자, 소문자 또는 대문자로 표시할 수 있습니다.
대문자
HTML 코드:
<p class="uppercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>CSS 코드:
.uppercase {
text-transform: uppercase;
}소문자
HTML 코드:
<p class="lowercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>CSS 코드:
.lowercase {
text-transform: lowercase;
}대문자로 표기
HTML 코드:
<p class="capitalize">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>CSS 코드:
.capitalize {
text-transform: capitalize;
}6. 단일 줄 속성 선언 사용
CSS의 단축 속성을 사용하면 코드를 간결하고 쉽게 읽을 수 있습니다.
예를 들어 CSS 배경은 배경색, 배경 이미지, 배경 값을 정의할 수 있는 단축 속성입니다. -반복 및 배경 위치. 마찬가지로 글꼴, 테두리, 여백 및 패딩에 대한 속성을 정의할 수 있습니다.
한 줄 배경 속성 선언
background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;위 선언을 한 줄로 단순화할 수 있습니다.
background: black url(images/xyz.png) no-repeat left top;단축 속성은 사용하기 매우 편리하지만 이를 사용하는 동안 몇 가지 까다로운 경우(MDN 웹 문서에 설명된 대로)를 고려해야 합니다.
7. 툴팁
도구 설명은 사용자가 요소 위로 마우스 포인터를 이동할 때 요소에 대한 추가 정보를 제공하는 방법입니다.
오른쪽 툴팁
HTML 코드:
<div class="tooltip_div">Right Tooltip
<span class="tooltip">This is the Tooltip text</span>
</div>CSS 코드:
body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}왼쪽 툴팁
HTML 코드:
<div class="tooltip_div">Left Tooltip
<span class="tooltip">This is the Tooltip text</span>
</div>CSS 코드:
body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}상단 툴팁
HTML 코드:
<div class="tooltip_div">Top Tooltip
<span class="tooltip">This is the Tooltip text</span>
</div>CSS 코드:
body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}하단 툴팁
HTML 코드:
<div class="tooltip_div">Bottom Tooltip
<span class="tooltip">This is the Tooltip text</span>
</div>CSS 코드:
body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}Bootstrap 라이브러리를 사용하여 사용자 정의 Bootstrap 도구 설명을 만들 수도 있습니다.
8. 그림자 효과 추가
text-shadow 및 box-shadow CSS 속성을 각각 사용하여 텍스트와 요소에 CSS 그림자 효과를 추가할 수 있습니다.
CSS 텍스트 그림자
text-shadow CSS 속성은 텍스트에 그림자와 레이어를 추가합니다. text-shadow 속성은 텍스트에 적용할 쉼표로 구분된 그림자 목록을 허용합니다.
text-shadow CSS 속성의 구문:
/* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;참고: 색상 및 흐림 반경 인수는 선택사항입니다.
예를 들어:
background: #e74c3c;
color: #fff;
font-family: lato;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);CSS 상자 그림자
box-shadow 속성은 HTML 요소에 그림자를 적용하는 데 사용됩니다.
box-shadow CSS 속성의 구문
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];참고: 흐림, 확산 및 색상 매개변수는 선택사항입니다.
예를 들어:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;이 기사에 사용된 전체 소스 코드를 보려면 여기 GitHub 저장소를 방문하세요.
최신 CSS 트릭을 사용하여 웹사이트 스타일 지정
웹사이트에 CSS 텍스트 그림자를 추가하는 것은 사용자의 관심을 끌 수 있는 좋은 방법입니다. 이는 웹사이트에 우아함과 독특한 느낌을 줄 수 있습니다. 웹사이트 테마에 맞는 몇 가지 텍스트 그림자 예제를 창의적으로 실험해 보세요.