테두리가있는 단추 그룹

수다왕

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

· 8년 전 · 조회 1833 1833

테두리가있는 단추 그룹

이 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
77	HTML	Ajax의 표기와 발음에 관한 의견! [4]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5141
76	HTML	움직이는 gif도 썸네일을 만들수 있는 함수 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6762
75	HTML	Ajax에서 [즐겨찾기]와 [뒤로가기]를 다루는 방법! [2]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6773
74	기타	CSS 사전입니다.(zip 압축파일) [13]	Photofly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5928
73	HTML	간단한 디렉토리 인덱싱 시스템(규칙에 맞는것만 보여줌) [1]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3709
72	HTML	롤오버 이미지를 사용할 수 있는 심플한 드롭다운 메뉴	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6295
71	HTML	위에서 하나씩 떨어지는 메뉴 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3193
70	HTML	사용자 브라우저에서 자바지원 여부에 따라 리다이렉트 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3502
69	HTML	사용자 브라우저의 자바 버전 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2425
68	HTML	윈,맥용 사이트를 운영할때 각각 다른 다운로드 사이트로 이동시키기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2725
67	HTML	사용자 웹브라우저의 이름 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2631
66	HTML	사용자 웹브라우저 정보 보여주기 해상도, 자바설치여부 등등	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3140
65	HTML	ctrl +j 와 ctrl + alt + shift + t 의 사용법(잔팁) [5]	사랑과우정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4735
64	HTML	curl 함수를 이용한 HTTP_REFERER 변경 [8]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	13640
63	HTML	if [23]	izen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3497
62	HTML	iinclude와 조건문 [7]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3903
61	HTML	국내 지도 선택(시, 도 별로 선택하기) [5]	수다쟁이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4347
60	HTML	페이지 이동중입니다 잠시만 기달려주세여	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3596
59	HTML	php실명인증 한번만하면 쭈우욱^^ [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3786
58	HTML	http://홈주소/?mode=xxx 하는방법 :) [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4099
57	HTML	포토샵 환경 설정 초기화 하기(1원짜리 팁) [2]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5643
56	HTML	[자바스크립트강좌] HTML로 글자 변환	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4128
55	HTML	데이터베이스의 생성, 선택, 보기	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4020
54	HTML	포토샵 CS 브러쉬 툴 강좌 [4]	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3685
53	HTML	IE 패치 스크립트(상호 작용하는 ActiveX 컨트롤이 사용자 입력에 즉시 응답하도록 웹 페이지를 수정하는 방법) [2]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3797
52	HTML	네이버 openapi 사용하여 쇼핑검색 만들기 [2]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5631
51	HTML	네이버 openapi 사용하여 실시간 인기검색어 보여주기 [4]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5640
50	HTML	특정 IP 차단하기... [1]	왕초보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4104
49	HTML	window.showModalDialog 항상 위에 뜨는 창 열기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5700
48	HTML	전화 번호 숫자만 빼오기 [5]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3746