분류 css

CSS 치트 시트 – 다음 코딩 프로젝트를 개선하기 위한 10가지 트릭

컨텐츠 정보

  • 조회 140 (작성일 )

본문

CSS의 계단식 특성은 때때로 이해하고 사용하기 어렵게 만듭니다. 모든 수준의 개발자는 종종 특정 기능을 사용하는 방법을 알아내려고 애쓰며 종종 인터넷 검색을 하거나 동료에게 도움을 요청하는 자신을 발견하게 될 것입니다.


따라서 CSS를 다루는 데 문제가 있을 때 스스로를 힘들게 하지 마십시오. 모든 사람에게 발생합니다.


CSS는 신비하고 까다로울 수 있기 때문에 그것을 이해하고 싶다면 역시 까다로울 수 밖에 없습니다. 그렇기 때문에 이 기사에서 개발자, 특히 초보자인 경우 작업을 더 쉽게 만들어줄 멋진 CSS 트릭 10가지를 소개합니다.


1. CSS에서 웹 페이지의 가로 스크롤을 수정하는 방법 


웹 페이지의 스타일을 지정하고 하단에 가로 스크롤 막대가 표시되면 사용 가능한 화면 너비보다 큰 너비를 가진 요소를 찾아야 합니다.


예를 들어 아래 스크린샷에서 가로 스크롤이 있는 것을 볼 수 있습니다.


horizontalscroll1.png 



범용 선택기(*)를 사용하여 다음 규칙을 적용하여 범인 요소를 찾을 수 있습니다.

* { 
     border: 2px solid red;
}

이렇게 하면 페이지의 모든 요소에 2픽셀의 빨간색 테두리가 적용되므로 조정해야 하는 요소를 쉽게 파악할 수 있습니다.


위의 스타일을 적용한 결과는 다음과 같습니다.


horizontalscrollfix.png 


두 번째 녹색 물결이 수평 스크롤을 일으키는 것을 볼 수 있습니다. 너비가 1200px 사용 가능한 화면 너비보다 넓은 1400px로 설정되었기 때문입니다.


.wave2 {
  width: 1400px;
}

너비를 다시 1200px로 설정하거나 완전히 제거하면 문제가 해결되어 더 이상 가로 스크롤이 발생하지 않습니다.

horizontalScrollFixed.png 


2. CSS에서 스타일을 재정의하는 방법 



특정 경우에 이미 존재하는 특정 스타일(예: 라이브러리에서)을 재정의할 수 있습니다. 또는 특정 부분을 사용자 지정해야 하는 큰 스타일시트가 있는 템플릿이 있을 수 있습니다.


이러한 상황에서 CSS 특수성 규칙을 적용하거나 규칙 앞에 !important 예외를 사용할 수 있습니다.


아래 예에서 !important는 모든 h1 요소에 #2ecc71(내가 가장 좋아하는 색상)의 에메랄드 그린 변형을 제공합니다.


h1 {
    color: #2ecc71 !important;
}

그러나 주의하십시오. 이 예외를 사용하는 것은 나쁜 습관으로 간주되므로 가능한 한 피해야 합니다.


왜요? 음, !important는 실제로 CSS의 계단식 특성을 깨고 디버깅을 더 어렵게 만들 수 있습니다.


!important의 가장 좋은 사용 사례는 템플릿이나 오래된 코드의 큰 스타일시트를 다룰 때 코드베이스의 문제를 식별하는 데 사용하는 것입니다. 그런 다음 문제를 신속하게 수정하고 예외를 제거할 수 있습니다.


!important를 사용하여 스타일을 적용하는 대신 CSS 특성에 대해 자세히 알아보고 해당 규칙을 적용할 수 있습니다.


3. CSS로 정사각형을 만드는 방법 


너비와 높이를 너무 많이 혼동하지 않고 정사각형을 만들고 싶다면 배경색, 필요한 너비, 종횡비를 설정하여 div의 스타일을 지정할 수 있습니다. 동등한 수치로. 첫 번째 그림은 위쪽 및 아래쪽 치수이고 두 번째 그림은 왼쪽 및 오른쪽 치수입니다.


직사각형과 원하는 정사각형을 만들기 위해 두 인물을 가지고 노는 것으로 이것을 더 발전시킬 수 있습니다.


<div class="square"></div>
.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

square.png 


4. CSS로 div를 가운데에 맞추는 방법 


스타일시트가 커질수록 div를 중앙에 배치하는 것이 상당히 어려워질 수 있습니다. div의 스타일을 지정하려면 블록 표시, 자동 여백 및 100% 미만의 너비를 지정하십시오.


<div class="center"></div>
.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

centeredDiv.png 


5. CSS에서 상자의 추가 패딩을 제거하는 방법 


box-sizing: border-box를 사용하면 너비와 패딩을 설정할 때 상자에 추가 패딩이 추가되지 않습니다. 이렇게 하면 레이아웃이 훨씬 더 멋지게 보입니다.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

6. CSS로 단락 시작표시문자를 만드는 방법 


첫 글자 의사 요소를 사용하여 단락 시작표시문자를 만들 수 있습니다. 예! 신문에서 볼 수 있는 드롭 캡.


적절한 HTML 요소를 선택하고 아래와 같이 스타일을 적용합니다.


 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>
p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

dropcapScreen-1.png 


7. CSS에서 텍스트를 대문자 또는 소문자로 만드는 방법 


대문자 또는 소문자는 HTML에서 직접 올 필요가 없습니다. CSS에서 모든 텍스트를 대문자 또는 소문자로 만들 수 있습니다.


앞으로 SentenceCase 및 toGGLEcASE에 대한 옵션이 있기를 바랍니다. 그런데 왜 문자를 TOGGLEcASE로 만들고 싶습니까?


<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>
.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

transform.png 


8. CSS를 건조하게 유지하기 위해 변수를 선언하는 방법 


변수? 예. CSS에서 변수를 선언할 수 있습니다.


변수를 선언할 때 여러 다른 스타일에 사용할 수 있습니다. 변경할 사항이 있는 경우 해당 변수만 변경하면 해당 변수가 사용되는 모든 위치에 결과가 반영됩니다. 이렇게 하면 CSS 코드를 DRY(반복하지 않음) 상태로 유지하는 데 도움이 됩니다.


스타일시트에서 전역 변수가 되도록 루트 범위에 배치하여 변수를 선언할 수 있습니다. 그리고 변수를 사용하려면 속성을 "var" 키워드 옆에 있는 중괄호 안에 넣습니다.


스타일시트의 맨 위에, 즉 재설정하기 전에 변수를 선언하는 것이 일반적입니다.

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. CSS에 콘텐츠를 추가하기 위해 :before 및 :after 선택기를 사용하는 방법 


CSS의 :before 선택자는 요소 앞에 내용을 삽입하는 데 도움이 됩니다.


<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>
p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

:after 선택자는 동일한 작업을 수행하지만 요소 뒤에 내용을 삽입합니다.


p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}

beforeAndAfter.png 


10. 순수 CSS로 부드러운 스크롤을 얻는 방법 


복잡한 JavaScript를 작성하거나 플러그인을 사용하지 않고도 웹 페이지에 부드러운 스크롤을 적용할 수 있습니다. 따라서 웹 페이지의 여러 부분으로 연결되는 앵커 태그가 있고 이를 클릭하면 스크롤이 원활합니다.


html {
  scroll-behavior: smooth;
}

출처 : https://www.freecodecamp.org/news/10-css-tricks-for-your-next-coding-project/