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