CSS로 투명 테두리 추가
투명 테두리는 테두리
속성을 투명
으로 설정하여 생성되는 페이지의 두 요소 사이에 보이지 않는 경계입니다. 투명 테두리는 실제 테두리 없이 요소 사이에 겹치는 효과나 공간을 만드는 경우가 많습니다.
CSS 테두리를 투명하게 만들기
CSS 테두리를 투명하게 만드는 방법에는 여러 가지가 있습니다. 한 가지 방법은 불투명도에 CSS3 속성을 사용하고 1보다 작은 값으로 설정하여 테두리를 포함한 전체 요소를 투명하게 만드는 것입니다.
또 다른 방법은 RGBA 색상 모델을 사용하여 각 빨강, 녹색 및 파랑 색상 채널의 불투명도를 지정할 수 있습니다. 16진수 알파 채널 표기법을 사용하여 테두리의 불투명도를 설정할 수도 있습니다.
투명한 이미지를 가리키는 URL 값과 함께 border-image
속성을 사용하여 투명한 테두리를 만들 수 있습니다. 이미지는 모든 이미지 편집기에서 생성할 수 있으며 배경이 투명한 png
파일로 저장해야 합니다.
URL 값이 border-image
속성에 추가되면 테두리가 투명해집니다.
UI 요소에 투명 테두리 추가
UI 요소에 투명 테두리를 추가하는 것은 화면의 나머지 부분에서 눈에 띄게 만드는 간단한 방법입니다. 이렇게 하려면 CSS 속성 테두리
를 사용하고 투명
으로 설정해야 합니다.
예를 들어 테두리가 투명한 버튼이 있는 경우 다음 CSS를 추가합니다.
button {
border: transparent;
}
이 작업을 완료하면 버튼에 배경이 보일 수 있는 투명한 테두리가 생깁니다. 이는 UI를 너무 복잡하게 만들지 않으면서 UI에 시각적인 흥미를 더할 수 있는 훌륭한 방법이 될 수 있습니다.
예제 코드:
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Create a Transparent button
using HTML and CSS
</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
h1 {
color: green;
}
/* Styling the button */
.btn {
cursor: pointer;
border: 1px solid #3498db;
background-color: transparent;
height: 50px;
width: 200px;
color: #3498db;
font-size: 1.5em;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent button</h1>
<h3>
Create a Transparent button
using HTML and CSS
</h3>
<button class="btn">Click me!</button>
</body>
</html>
테이블에 투명 테두리 추가
표에 투명 테두리를 추가하는 몇 가지 방법이 있으며 한 가지 방법은 CSS border
속성을 사용하는 것입니다. border-style
을 solid
로, border-color
를 transparent
로 설정하여 단색이지만 투명한 테두리를 만들 수 있습니다.
투명 테두리를 만드는 또 다른 방법은 HTML border
속성을 사용하는 것입니다. 완전히 투명한 테두리를 만들려면 border
속성을 0
또는 none
으로 설정할 수 있습니다.
마지막으로 배경이 투명한 이미지를 사용하여 테두리를 만들 수 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<style>
html
background-color: #ff9
color: white
table
border-collapse: separate
border-spacing: 1em
td
background-image: url('/img/DelftStack/logo.png')
background-position: auto auto
background-attachment: fixed
background-clip: padding-box
padding: 2em
color: #fff
</style>
</head>
<body>
<h2>Transparent border of table</h2>
<table>
<tr>
<td>qwe 1</td>
<td>qwe 1</td>
<td>qwe 1</td>
</tr>
<tr>
<td>asd 2</td>
<td>asd 2</td>
<td>asd 2</td>
</tr>
<tr>
<td>zxc 3</td>
<td>zxc 3</td>
<td>zxc 3</td>
</tr>
</table>
</body>
</html>
이미지에 투명 테두리 추가
몇 가지 다른 방법으로 이미지에 투명 테두리를 추가할 수 있습니다. 투명 테두리를 추가하는 한 가지 방법은 CSS를 사용하는 것입니다.
CSS의 border
속성을 사용하여 이미지 테두리를 추가할 수 있습니다. color
속성에 transparent
값을 사용하여 테두리의 스타일, 색상 및 너비를 투명하게 설정할 수 있습니다.
이미지에 투명 테두리를 추가하는 또 다른 방법은 HTML의 border
속성을 사용하여 이미지에 테두리를 추가하는 것입니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>Transparent border</title>
<style>
.image {
width: 200px;
height: 200px;
padding: 55px;
border-radius: 300px; /* for getting circle shape */
border: double 15px rgba(254, 254, 254, 0.7);
background: rgba(254, 254, 254, 0.7);
}
body {
background: url("/img/DelftStack/logo.png");
height: 100%;
}
</style>
</head>
<body>
<font color="brown"><h2>Transparent Image Circle</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>
결론
따라서 이 기사에서 투명 테두리에 대한 코드를 확인할 수 있습니다. UI 요소에 투명 테두리를 추가한 섹션에서 버튼의 투명 테두리에 대한 코드를 얻을 수 있습니다.
이미지와 테이블의 투명 테두리에 대한 다른 코드도 확인할 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn