멋진 CSS 트릭

안녕하세요 @all,

그래서 이번 주에 저는 "Cool CSS Tricks"블로그를 새로 만들었습니다. 그래서 여기에서는 항상 저를 구해준 개인적으로 사용한 CSS 트릭을 다룰 것입니다.

더 이상 지체하지 않고 시작하겠습니다.

이번에는 Hope "J-Hope"으로 시작하겠습니다.



멋진 CSS 트릭:

Magic SetUp : CSS를 적용하지 않았더라도 여전히 기본 CSS가 HTML에 적용됩니다. 때로는 실제로 내 경우에는 항상 HTML에 기본 CSS가 필요하지 않습니다. 따라서 이를 제거하기 위해 다음과 같은 내 Magic Setup CSS로 이를 재정의합니다.

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

추가 ... 텍스트가 너무 길어질 때 : 때때로 우리는 모든 텍스트를 표시하는 대신 세 개의 점만 표시하기를 원합니다. 이는 다음과 같이 달성할 수 있습니다.

/* This avoids the text being rendered outside the container */
overflow: hidden;

/*This  avoid the text going to multiple lines */
white-space: nowrap;

/* This Sets the ... once the text overflows */
text-overflow: ellipsis;

CSS 전처리기 사용: CSS에는 많은 전처리기가 있지만 개인적으로 가장 좋아하는 것은 SCSS입니다. 이것은 부트스트랩을 사용하는 동안 CSS를 훨씬 더 쉽게 사용할 수 있게 해줍니다.

그림자 추가:
CSS의 가장 큰 장점 중 하나는 디자인이 보다 전문적으로 보인다는 것입니다. 프로젝트에 150시간을 소비했을 수도 있지만 모양을 조정하는 데 5시간만 더 작업하면 노력이 바로 눈에 띕니다. 이것은 더 나은 고객이나 더 나은 일자리를 찾을 때 더 높은 품질을 제공할 때 이점을 제공합니다. 그림자는 즉시 품질을 향상시키는 미묘한 효과 중 하나입니다.

가장 간단하면서도 강력한 효과 중 하나는 box-shadow입니다. 가장 좋은 점은 단일 속성을 사용하여 이를 수행할 수 있다는 것입니다. 처럼 :

/* Box shadow properties */
box-shadow: h-offset v-offset blur color;
/* Box shadow example */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

div 컨테이너에 맞게 이미지 크기 조정:
height, width 및 object-fit 속성을 사용하여 div 컨테이너에 맞게 이미지 크기를 조정할 수 있습니다.

<!-- HTML --!>
<img class="image" src="imgpath or url" />

/* CSS */

.image {
 height: 100%;
 width: 100%;
 object-fit: contain;
 }

그럼 오늘의 블로그는 여기까지입니다. 다음주에 새로운 블로그로 찾아오겠습니다.