CSS 트릭🔮

CSS는 까다로울 수 있고, 여러분도 그래야 합니다.🤫

플로팅 이미지 주위의 곡선 텍스트

shape-outside는 떠다니는 텍스트 영역을 만들기 위해 기하학적 모양을 설정할 수 있는 CSS 속성입니다.

.circle{
  width: 100px;
  float: left;
  shape-outside: circle(50%);
}

이미지에 맞게 쉽게 크기 조정

비례적으로 크기를 조정하면서 이미지가 주어진 너비와 일치해야 하는 경우가 종종 있습니다. 이를 수행하는 쉬운 방법은 최대 너비를 사용하여 처리하는 것입니다. 다음은 이에 대한 예입니다.

img {
    max-width:100%;
    height:auto;
}

절대 위치

웹에서 항목이 항상 배치되는 위치를 제어하려는 경우 절대 위치가 이에 대한 핵심입니다.

position:absolute;

아이콘 및 로고에 SVG 사용

모든 최신 브라우저 및 크기는 모든 해상도 스타일에 대해 SVG를 지원합니다. 로고나 아이콘에 .jpg 또는.gif 이미지를 사용할 필요가 없습니다. 다음 코드는 웹사이트 로고를 표시하기 위한 CSS 코드입니다.

#logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 80px;
  background: url(logo.svg);
  background-size: 100px 80px;
}

모든 스타일 재정의

특정 요소에 대해 다른 CSS 스타일을 재정의하려면 다음을 사용하십시오! CSS 테마 다음에 중요합니다. 예를 들어 내 웹의 특정 영역에 대해 H2 헤더가 파란색이 아닌 빨간색이 되도록 하려면 다음 CSS를 사용합니다.

.section h2 { color:red !important; }

수직 정렬

비결은 메뉴 높이와 텍스트 줄 높이를 동일하게 유지하는 것입니다.

.nav li{
    line-height:40px;
    height:40px;
}

호버

이것은 버튼, 텍스트 링크, 사이트 블록 섹션, 아이콘 등에 사용할 수 있습니다. 누군가가 키보드 위에 매달려 있는 동안 색상을 변경하려면 동일한 CSS를 사용하고 추가: hover 및 변경 스타일만 사용하면 됩니다.

.a h2{
    font-size:42px;
    color:#000;
    font-weight:600;
}

.a h2:hover{
    color:#f00;
}

여러 클래스 또는 선택기에 CSS 적용

모든 사진, 블로그 및 사이드바가 동일한 경계를 갖는다고 주장하십시오. 똑같은 CSS를 3번 작성할 필요는 없습니다. 항목을 쉼표로 구분하여 나열하십시오.

.blog, img, .sidebar {
    border: 1px solid #000;
}

전에

이 CSS는 CSS 개체를 선택하고 특정 클래스가 있는 각 요소 앞에 콘텐츠를 삽입할 수 있는 선택기입니다. H2 태그 이전에 고유한 텍스트가 필요한 웹사이트가 있다고 가정해 보겠습니다.

h2:before { 
    content: "Continue: ";
<span class="Apple-converted-space">    color: #F00;</span>
}

후에

:after를 사용하여 특정 요소에 전체적으로 콘텐츠를 삽입할 수 있습니다.

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

대문자

그 1, 큰 글자가 당신의 시선을 사로잡습니다. CSS에서 단락 시작표시문자를 구성하는 간단한 방법이 있으며 이는 pseudo 요소: :first letter를 사용하는 것입니다.

a:first-letter{
    display:block;
    float:left;
    margin:5px;
    color:#f00;
    font-size:500%;
}

텍스트를 모두 대문자, 모두 소문자 또는 대문자로 강제 설정

h2 { 
   text-transform: uppercase;
}

h2 { 
  text-transform: lowercase; 
}

h2 { 
  text-transform: capitalize; 
}

연결

웹사이트 방문자가 이미 귀하의 사이트에 있었던 곳과 아직 발견하지 못한 곳을 보여줍니다.

a:link { color: blue; }
a:visited { color: purple; }

여기에 대한 당신의 의견은 어떻습니까? 댓글로 여러분의 생각을 공유해주세요 :)