당신이 알아야 할 10가지 CSS 고수로 만들어주는 팁 - 1

이 글은 해당 영상을 정리한 글입니다.

1. 간단하게 보더에 그라디언트를 줄 수 있습니다

border-image 속성을 사용하면 가상 선택자 없이도 그라디언트 테두리를 만들 수 있습니다.

이 방법의 장점은:
1. 코드가 간단하고 직관적입니다
2. 가상 선택자를 사용하지 않아도 됩니다
3. 브라우저 호환성이 좋습니다

border-image와 linear-gradient를 함께 사용할 때 주의할 점은 기본적으로 모서리에만 그라디언트가 적용된다는 것입니다. 하지만 border-image-slice 속성을 활용하면 테두리 전체에 균일한 그라디언트를 적용할 수 있습니다.

아래 예제는 border-image-slice 값을 1로 설정하여 그라디언트를 테두리 전체에 균일하게 적용한 예시입니다. border-image-slice는 그라디언트 이미지를 9등분하지 않고 하나의 이미지로 처리하기 때문입니다.

// html
<button>Button</button>

// css
body{
	background-color: #f3f3f3;
  min-height: calc(100vh - 2em);
  display: grid;
  place-content: center;
}

button{
	padding: 1em 2.5em;
	background-color: #171b30;
	font-family: inherit;
	font-weight: 500;
	color: white;
	border-image: linear-gradient(to right, #0066ff, #ff32d6);
	border-image-slice: 1;
	border-width: .2em; 
}

 

2. 모든 곳에 Grid 혹은 Flexbox를 사용하지 마세요

Grid나 Flexbox는 훌륭한 레이아웃 도구이지만, 모든 상황에 적합한 것은 아닙니다. 특히 Pinterest와 같은 Masonry 레이아웃을 구현할 때는 columns 속성을 사용하는 것이 더 효과적입니다.

columns 속성을 사용하면 복잡한 JavaScript나 라이브러리 없이도 간단하게 Masonry 레이아웃을 구현할 수 있습니다. 

 

이 방식의 장점은:
1. 코드가 매우 간단합니다
2. 반응형으로 쉽게 구현할 수 있습니다
3. 브라우저의 기본 기능을 활용하므로 성능이 좋습니다

columns 속성의 값으로 `3 300px`를 지정하면, 최소 300px 너비로 3개의 컬럼을 만들라는 의미입니다. 컨테이너의 너비가 줄어들면 자동으로 컬럼 수가 조정됩니다.

아래 예제는 이미지 갤러리를 Masonry 레이아웃으로 구현한 것입니다. 이미지들의 높이가 다르더라도 자연스럽게 배치되는 것을 확인할 수 있습니다.

```text
// html
<div class="layout-container">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/200" alt="">
  <img src="https://picsum.photos/200/300" alt="">
  <img src="https://picsum.photos/200/300" alt="">
</div>

// css
.layout-container{
  width: min(1000px, 100%);
  margin: 0 auto;
  columns: 3 300px;
  column-gap: 1em;
}
img{
  display: block;
  margin-bottom: 1em;
  width: 100%;
}
```

 

3. 폼 요소에 accent-color 속성을 사용하세요

체크박스, 라디오 버튼, progress 바, range 슬라이더 등의 폼 요소들은 기본적으로 브라우저의 테마 색상을 따릅니다. accent-color 속성을 사용하면 이러한 요소들의 색상을 한 번에 변경할 수 있습니다.

accent-color의 장점은:
1. 여러 폼 요소의 색상을 한 번에 변경할 수 있습니다
2. 브라우저의 기본 스타일을 유지하면서 색상만 변경할 수 있습니다
3. 접근성을 해치지 않으면서 브랜드 색상을 적용할 수 있습니다

또한 caret-color 속성을 사용하면 텍스트 입력 필드의 커서 색상도 변경할 수 있습니다. 이를 통해 폼 요소들의 색상을 일관되게 유지할 수 있습니다.

아래 예제에서는 accent-color와 caret-color를 사용하여 폼 요소들의 색상을 변경하는 방법을 보여줍니다. 체크박스를 체크하거나 라디오 버튼을 선택할 때, 그리고 progress 바와 range 슬라이더의 색상이 모두 지정된 색상으로 변경되는 것을 확인할 수 있습니다.

// html
<form>
  <input type="checkbox" id="accept">
  <input type="radio"><br> 
  <progress max="100" value="35"></progress> <br>
  <input type="range"> <br>
  <input type="text" placeholder="Enter Text">
</form>

// css
body{
  background-color: white;
}
input{
  padding: 1em;
  font-family: inherit;
}
form{
  accent-color: #d32545;
  caret-color: #d32545;
}

 

4. inset 속성으로 가운데 정렬하세요

position: absolute와 함께 사용되는 inset 속성은 top, right, bottom, left 값을 한 번에 지정할 수 있게 해줍니다. 이는 요소를 화면 중앙에 배치하는데 매우 유용합니다.

inset의 장점은:
1. 코드를 간결하게 작성할 수 있습니다
2. 개별 속성(top, right, bottom, left)을 따로 지정할 필요가 없습니다
3. 요소의 위치를 쉽게 제어할 수 있습니다

margin: auto와 함께 사용하면 요소를 수평/수직 중앙에 완벽하게 정렬할 수 있습니다.

아래 예제에서는 inset: 0과 margin: auto를 사용하여 자식 요소를 부모 요소의 정중앙에 배치하는 방법을 보여줍니다. 이 방법은 반응형 레이아웃에서도 안정적으로 작동합니다.

5. 동적 컨텐츠의 경우 overflow를 이용하세요

overflow 속성은 컨테이너의 크기를 초과하는 컨텐츠를 어떻게 처리할지 지정합니다. 특히 동적 컨텐츠를 다룰 때 매우 유용합니다.

overflow의 주요 값들:
1. visible (기본값) - 컨텐츠가 컨테이너를 벗어나도 그대로 표시
2. hidden - 넘치는 컨텐츠를 잘라냄
3. scroll - 항상 스크롤바 표시
4. auto - 필요할 때만 스크롤바 표시

overflow-x와 overflow-y를 사용하면 가로/세로 방향의 오버플로우를 개별적으로 제어할 수 있습니다.

아래 예제에서는 고정 높이를 가진 컨테이너에 overflow-y: auto를 적용하여, 컨텐츠가 넘칠 경우 세로 스크롤바가 자동으로 나타나도록 했습니다.

// html
<div class="container">
  <h2>These containers have a fixed height</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quae autem id officiis provident voluptatem hic reiciendis perferendis consectetur molestias.</p>
</div>
<div class="container">
  <h2>But the text varies in length</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, dolor. Minus enim cumque omnis impedit ex nobis adipisci fuga, at ipsam error placeat excepturi laborum, accusantium commodi asperiores id rerum laboriosam beatae odio eos nihil, rem earum aut fugit! Cum expedita voluptate dignissimos voluptas explicabo quaerat, voluptatibus ut quos alias.</p>
</div>
<div class="container">
  <h2>So we have to manage the overflow</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil, nesciunt fuga, facilis deleniti quis iusto voluptas quas eveniet quo laborum minus tempora tenetur debitis velit ducimus similique dolor explicabo ab laudantium! Officia reiciendis nemo iure asperiores assumenda in, eum reprehenderit? Cupiditate quasi porro cum eligendi officia dicta aperiam aut ratione aliquam error, accusantium iure quam ab ut, sed eum earum amet? Animi quis placeat odio, provident voluptatum harum debitis corporis. Beatae rem ratione repudiandae cupiditate qui temporibus neque! Minima architecto quos a voluptatibus quasi eum tempora incidunt inventore corrupti nesciunt, quisquam, est quae quis, natus quo temporibus facilis atque?</p>
</div>
<div class="container">
  <h2>Hello World</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil, nesciunt fuga, facilis deleniti quis iusto voluptas quas eveniet quo laborum minus tempora tenetur debitis velit ducimus similique dolor explicabo ab laudantium! Officia reiciendis nemo iure asperiores assumenda in, eum reprehenderit? Cupiditate quasi porro cum eligendi officia dicta aperiam aut ratione aliquam error, accusantium iure quam ab ut, sed eum earum amet? Animi quis placeat odio, provident voluptatum harum debitis corporis. Beatae rem ratione repudiandae cupiditate qui temporibus neque! Minima architecto quos a voluptatibus quasi eum tempora incidunt inventore corrupti nesciunt, quisquam, est quae quis, natus quo temporibus facilis atque?</p>
</div>
<div class="container">
  <h2>Hello World</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil, nesciunt fuga, facilis deleniti quis iusto voluptas quas eveniet quo laborum minus tempora tenetur debitis velit ducimus similique dolor explicabo ab laudantium! Officia reiciendis nemo iure asperiores assumenda in, eum reprehenderit? Cupiditate quasi porro cum eligendi officia dicta aperiam aut ratione aliquam error, accusantium iure quam ab ut, sed eum earum amet? Animi quis placeat odio, provident voluptatum harum debitis corporis. Beatae rem ratione repudiandae cupiditate qui temporibus neque! Minima architecto quos a voluptatibus quasi eum tempora incidunt inventore corrupti nesciunt, quisquam, est quae quis, natus quo temporibus facilis atque?</p>
</div>
<div class="container">
  <h2>Hello World</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt nihil, nesciunt fuga, facilis deleniti quis iusto voluptas quas eveniet quo laborum minus tempora tenetur debitis velit ducimus similique dolor explicabo ab laudantium! Officia reiciendis nemo iure asperiores assumenda in, eum reprehenderit? Cupiditate quasi porro cum eligendi officia dicta aperiam aut ratione aliquam error, accusantium iure quam ab ut, sed eum earum amet? Animi quis placeat odio, provident voluptatum harum debitis corporis. Beatae rem ratione repudiandae cupiditate qui temporibus neque! Minima architecto quos a voluptatibus quasi eum tempora incidunt inventore corrupti nesciunt, quisquam, est quae quis, natus quo temporibus facilis atque?</p>
</div>

// css
.container{
  margin-top: 1em;
  padding: 2em;
  border-radius: 1em;
  background-color: #282a32;
  color: #a3abbf;
  height: 100px;
  overflow-y: auto;
}