테두리가있는 단추 그룹

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1831 1831

테두리가있는 단추 그룹

이 border속성을 사용하여 경계가있는 단추 그룹을 만듭니다.

예

.button {

float: left;

border: 1px solid green;

}

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.btn-group .button:not(:last-child) {

border-right: none; /* Prevent double borders */

}

.btn-group .button:hover {

background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>Bordered Button Group</h2>

<p>Add borders to create a bordered button group:</p>

<button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
857	HTML	The placeholder Attribute(자리 표시 자 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1386
856	HTML	The pattern Attribute(패턴 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1843
855	HTML	The multiple Attribute(다중 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2079
854	HTML	속성 값(The value Attribute)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1495
853	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2191
852	HTML	입력 유형 전화(Input Type Tel) 전화번호 형식만들기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3271
851	HTML	입력 유형 날짜 / 시간 - 로컬(Input Type Datetime-local)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3243
850	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2084
849	HTML	Input Type Tel	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1666
848	HTML	input date input color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1821
847	HTML	입력 제한(Input Restrictions) 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1710
846	HTML	HTML5 input 유형	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1910
845	HTML	Input Type Radio Input Type Checkbox Input Type Button	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2035
844	HTML	Input Type Submit , Input Type Reset	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1976
843	HTML	Input Type Text , Input Type Password	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2193
842	HTML	HTML5 form 요소 datalist keygen output	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2038
841	HTML	html textarea button 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1963
840	HTML	html input select 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2325
839	HTML	HTML NAME 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1906
838	HTML	HTML METHOD POST GET	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2175
837	HTML	html form action	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2011
836	HTML	<fieldset>을 사용하여 양식 데이터 그룹화	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2031
835	HTML	html form submit	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2192
834	HTML	html form input 객체	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1535
833	HTML	HTML 레이아웃 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1894
832	HTML	HTML <script> 요소 HTML <base> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1379
831	HTML	뷰포트 설정하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2436
830	HTML	[HTML <head> 요소] 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1650
829	HTML	HTML The class Attribute	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1254
828	HTML	[HTML 블록 및 인라인 요소]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2476