이미지에 테두리를 추가하는 방법
이미지에 테두리를 추가하는 방법을 배우세요。
이미지 주위의 테두리
이미지에 테두리를 추가하는 방법
사용 border 속성을 <img> 요소에 테두리를 추가합니다：
img {
border: 5px solid #555;
}
관련 페이지
강의:CSS 이미지
강의 시간표 백스킨
메뉴
- 아이콘 패널
- 메뉴 아이콘
- 필리텍스
- 옵션 탭
- 수직 옵션 탭
- 옵션 탭 제목
- 전체 페이지 옵션 탭
- 호버 옵션 탭
- 상단 네비게이션
- 반응형 상단 네비게이션
- 분할 네비게이션
- 아이콘 포함된 네비게이션 패널
- 검색 메뉴
- 검색 표시줄
- 고정된 사이드 바
- 사이드 네비게이션
- 반응형 사이드 바
- フル스크린 네비게이션
- 캔버스 밖 메뉴
- 호버 사이드 네비게이션 버튼
- 아이콘 포함된 사이드 바
- 수평 스크롤 메뉴
- 수직 메뉴
- 하단 네비게이션
- 반응형 하단 네비게이션
- 하단 경계 네비게이션 링크
- 오른쪽 정렬된 메뉴 링크
- 가운데 정렬된 메뉴 링크
- 일정한 너비 메뉴 링크
- 고정된 메뉴
- 스크롤 중에 드래그 다운 패널
- 스크롤 중에 네비게이션 패널 숨기기
- 스크롤 중에 네비게이션 패널 축소
- 粘性 네비게이션 바
- 이미지 위의 네비게이션 바
- 오버플로우 드롭다운 메뉴
- 클릭 드롭다운 메뉴
- 드롭다운 메뉴
- 상단 네비게이션 바의 드롭다운 메뉴
- 측면 네비게이션 바의 드롭다운 메뉴
- 드롭다운 네비게이션 바
- 하위 네비게이션 메뉴
- 올리기 메뉴
- 스upe르 메뉴
- 이동 메뉴
- 커튼 메뉴
- 접히는 측면 바
- 접히는 측면 패널
- 페이지 네비게이션
- 화면 표시 네비게이션
- 버튼 그룹
- 수직 버튼 그룹
- 粘性 소셜 바
- 약丸 네비게이션
- 반응형 헤더
이미지
- 슬라이드 셰이커
- 슬라이드 셰이커 갤러리
- 모달 이미지
- 라이트박스
- 반응형 이미지 그리드
- 이미지 그리드
- 이미지 라이브러리
- 스크롤 가능한 이미지 라이브러리
- 탭 이미지 라이브러리
- 이미지 추가 흐림
- 이미지 추가 슬라이딩
- 이미지 추가 확대
- 이미지 추가 제목
- 이미지 추가 아이콘
- 이미지 효과
- 흑백 이미지
- 이미지 텍스트
- 이미지 텍스트 블록
- 투명 이미지 텍스트
- 전체 페이지 이미지
- 이미지 위의 양식
- 포커스 이미지
- ぼ라이드 배경 이미지
- 스크롤 중 배경 전환
- 가로 이미지
- 원형 이미지
- 프로필 이미지
- 반응형 이미지
- 중앙 정렬 이미지
- 스크린샷
- 이미지 테두리
- 팀 소개
- 粘性 이미지
- 이미지 뒤집기
- 진동 이미지
- 작품집 갤러리
- 필터 가능한 작품집
- 이미지 확대
- 이미지 확대鏡
- 이미지 비교 슬라이더
- 웹 아이콘
버튼
- 경고 버튼
- 계획 버튼
- 분할 버튼
- 애니메이션 버튼
- 단계별 버튼
- 이미지 위의 버튼
- 소셜 미디어 버튼
- 更多/보다 적게 읽기
- 로드 버튼
- 다운로드 버튼
- 약丸 버튼
- 알림 버튼
- 아이콘 버튼
- 다음 페이지/이전 페이지 버튼
- 네비게이션의 더 많은 버튼
- 블록 버튼
- 텍스트 버튼
- 원형 버튼
- 상단으로 돌아가는 버튼
양식
- 로그인 양식
- 가입 양식
- 결제 테이블
- 연락처 양식
- 소셜 로그인 테이블
- 등록 양식
- 아이콘 양식
- 뉴스 구독
- 스타일링 양식
- 반응형 양식
- 팝업 양식
- 인라인 양식
- 입력 필드 지우기
- 숫자 화살표 숨기기
- 텍스트를 클립보드에 복사
- 애니메이션 검색
- 검색 버튼
- 전체 화면 검색
- 네비게이션 바의 입력 필드
- 네비게이션 바의 로그인 양식
- 사용자 정의 체크박스/오른쪽 선택
- 사용자 정의 선택 상자
- 스위치切换
- 체크박스 선택
- 대문자 락업 감지
- 엔터 키로 버튼 트리거
- 비밀번호 검증
- 비밀번호 표시切换
- 다단계 양식
- 자동 완성
- 자동 완성 해제
- 스펠 체크 해제
- 파일 업로드 버튼
- 공란 입력 검증
필터
테이블
更多
- 전체 화면 비디오
- 모달 팝업
- 삭제 모달 팝업
- 시간 표
- 스크롤 인디케이터
- 진행 바
- 스킬 바
- 범위 슬라이더
- 색상 선택기
- 이메일 필드
- 도구 툴팁
- 호버로 표시
- 팝업 창
- 접히는 내용
- 달력
- HTML 포함
- 할 일 목록
- 로드어
- 배지
- 별 등급
- 사용자 평점
- 캡션 효과
- 연락처 칩
- 카드
- 반전 카드
- 개인 프로필 카드
- 제품 카드
- 경고
- 피드백 상자
- 노트
- 태그
- 스티치
- 태그 클라우드
- 원
- 스타일화 수평선
- 할인 کو딩
- 목록 그룹
- 배지가 있는 목록 그룹
- 무목록 표시줄
- 반응형 텍스트
- 影子文字
- 빛나는 글자
- 고정 푸터
- 粘性 요소
- 동일 높이
- 浮动 제거
- 반응형 블로킹
- 알림 표시줄
- 전체 화면 창
- 스크롤 그래픽
- 평滑 스크롤
- 배경 스크롤 변화
- 粘性页眉
- 스크롤할 때 헤더 축소
- 가격 테이블
- 파라다이즈 스크롤
- 비율
- 반응형 내장 프레임워크
- 좋아요/싫어요 전환
- 숨기기/보이기 전환
- 다크 모드 전환
- 텍스트 전환
- 클래스 전환
- 클래스 추가
- 클래스 제거
- 클래스 변경
- 활성 클래스
- 트리 뷰
- 소수점 제거
- 속성 제거
- 오프라인 감지
- 숨겨진 요소 찾기
- 웹 페이지 리디렉션
- 숫자 포맷
- 호버 줌인
- 반전 상자
- 수직 가운데 배치
- DIV 내에 가운데에 배치된 버튼
- 가운데에 나열된 목록
- 호버 트랜지션
- 화살표
- 형상
- 다운로드 링크
- 전체 높이 요소
- 브라우저 창
- 사용자 정의 스크롤바
- 스크롤바 숨기기
- 스크롤바 표시/강제 표시
- 장치 외관
- 편집 가능 내용 테두리
- 플레이스홀더 색상
- 텍스트 영역 크기 조정 비활성화
- 텍스트 선택 비활성화
- 텍스트 선택 색상
- 목록 표시줄 색상
- 수직선
- 분할선
- 텍스트 분할선
- 애니메이션 아이콘
- 카운트다운 타이머
- 타이핑 효과
- 即将上线页面
- 채팅 메시지
- 팝업 채팅 창
- 스크린 분할
- 고객 평가
- 블록 카운터
- 인용 슬라이드
- 가능한 목록 항목
- типичные точки разрыва устройства
- 휘지할 수 있는 HTML 요소
- JS 미디어 쿼리
- 문법 강조기
- JS 애니메이션
- JS 문자열 길이
- JS 지수 연산
- JS 기본 매개변수
- JS 랜덤 수
- JS 숫자 배열 정렬
- JS 확장 연산자
- JS로 뷰로 스크롤
- 현재 날짜를 가져옵니다
- 현재 URL을 가져옵니다
- 현재 스크린 크기를 가져옵니다
- iframe 요소를 가져옵니다
그리드
변환기
백스킨
메뉴
- 아이콘 패널
- 메뉴 아이콘
- 필리텍스
- 옵션 탭
- 수직 옵션 탭
- 옵션 탭 제목
- 전체 페이지 옵션 탭
- 호버 옵션 탭
- 상단 네비게이션
- 반응형 상단 네비게이션
- 분할 네비게이션
- 아이콘 포함된 네비게이션 패널
- 검색 메뉴
- 검색 표시줄
- 고정된 사이드 바
- 사이드 네비게이션
- 반응형 사이드 바
- フル스크린 네비게이션
- 캔버스 밖 메뉴
- 호버 사이드 네비게이션 버튼
- 아이콘 포함된 사이드 바
- 수평 스크롤 메뉴
- 수직 메뉴
- 하단 네비게이션
- 반응형 하단 네비게이션
- 하단 경계 네비게이션 링크
- 오른쪽 정렬된 메뉴 링크
- 가운데 정렬된 메뉴 링크
- 일정한 너비 메뉴 링크
- 고정된 메뉴
- 스크롤 중에 드래그 다운 패널
- 스크롤 중에 네비게이션 패널 숨기기
- 스크롤 중에 네비게이션 패널 축소
- 粘性 네비게이션 바
- 이미지 위의 네비게이션 바
- 오버플로우 드롭다운 메뉴
- 클릭 드롭다운 메뉴
- 드롭다운 메뉴
- 상단 네비게이션 바의 드롭다운 메뉴
- 측면 네비게이션 바의 드롭다운 메뉴
- 드롭다운 네비게이션 바
- 하위 네비게이션 메뉴
- 올리기 메뉴
- 스upe르 메뉴
- 이동 메뉴
- 커튼 메뉴
- 접히는 측면 바
- 접히는 측면 패널
- 페이지 네비게이션
- 화면 표시 네비게이션
- 버튼 그룹
- 수직 버튼 그룹
- 粘性 소셜 바
- 약丸 네비게이션
- 반응형 헤더
이미지
- 슬라이드 셰이커
- 슬라이드 셰이커 갤러리
- 모달 이미지
- 라이트박스
- 반응형 이미지 그리드
- 이미지 그리드
- 이미지 라이브러리
- 스크롤 가능한 이미지 라이브러리
- 탭 이미지 라이브러리
- 이미지 추가 흐림
- 이미지 추가 슬라이딩
- 이미지 추가 확대
- 이미지 추가 제목
- 이미지 추가 아이콘
- 이미지 효과
- 흑백 이미지
- 이미지 텍스트
- 이미지 텍스트 블록
- 투명 이미지 텍스트
- 전체 페이지 이미지
- 이미지 위의 양식
- 포커스 이미지
- ぼ라이드 배경 이미지
- 스크롤 중 배경 전환
- 가로 이미지
- 원형 이미지
- 프로필 이미지
- 반응형 이미지
- 중앙 정렬 이미지
- 스크린샷
- 이미지 테두리
- 팀 소개
- 粘性 이미지
- 이미지 뒤집기
- 진동 이미지
- 작품집 갤러리
- 필터 가능한 작품집
- 이미지 확대
- 이미지 확대鏡
- 이미지 비교 슬라이더
- 웹 아이콘
버튼
- 경고 버튼
- 계획 버튼
- 분할 버튼
- 애니메이션 버튼
- 단계별 버튼
- 이미지 위의 버튼
- 소셜 미디어 버튼
- 更多/보다 적게 읽기
- 로드 버튼
- 다운로드 버튼
- 약丸 버튼
- 알림 버튼
- 아이콘 버튼
- 다음 페이지/이전 페이지 버튼
- 네비게이션의 더 많은 버튼
- 블록 버튼
- 텍스트 버튼
- 원형 버튼
- 상단으로 돌아가는 버튼
양식
- 로그인 양식
- 가입 양식
- 결제 테이블
- 연락처 양식
- 소셜 로그인 테이블
- 등록 양식
- 아이콘 양식
- 뉴스 구독
- 스타일링 양식
- 반응형 양식
- 팝업 양식
- 인라인 양식
- 입력 필드 지우기
- 숫자 화살표 숨기기
- 텍스트를 클립보드에 복사
- 애니메이션 검색
- 검색 버튼
- 전체 화면 검색
- 네비게이션 바의 입력 필드
- 네비게이션 바의 로그인 양식
- 사용자 정의 체크박스/오른쪽 선택
- 사용자 정의 선택 상자
- 스위치切换
- 체크박스 선택
- 대문자 락업 감지
- 엔터 키로 버튼 트리거
- 비밀번호 검증
- 비밀번호 표시切换
- 다단계 양식
- 자동 완성
- 자동 완성 해제
- 스펠 체크 해제
- 파일 업로드 버튼
- 공란 입력 검증
필터
테이블
更多
- 전체 화면 비디오
- 모달 팝업
- 삭제 모달 팝업
- 시간 표
- 스크롤 인디케이터
- 진행 바
- 스킬 바
- 범위 슬라이더
- 색상 선택기
- 이메일 필드
- 도구 툴팁
- 호버로 표시
- 팝업 창
- 접히는 내용
- 달력
- HTML 포함
- 할 일 목록
- 로드어
- 배지
- 별 등급
- 사용자 평점
- 캡션 효과
- 연락처 칩
- 카드
- 반전 카드
- 개인 프로필 카드
- 제품 카드
- 경고
- 피드백 상자
- 노트
- 태그
- 스티치
- 태그 클라우드
- 원
- 스타일화 수평선
- 할인 کو딩
- 목록 그룹
- 배지가 있는 목록 그룹
- 무목록 표시줄
- 반응형 텍스트
- 影子文字
- 빛나는 글자
- 고정 푸터
- 粘性 요소
- 동일 높이
- 浮动 제거
- 반응형 블로킹
- 알림 표시줄
- 전체 화면 창
- 스크롤 그래픽
- 평滑 스크롤
- 배경 스크롤 변화
- 粘性页眉
- 스크롤할 때 헤더 축소
- 가격 테이블
- 파라다이즈 스크롤
- 비율
- 반응형 내장 프레임워크
- 좋아요/싫어요 전환
- 숨기기/보이기 전환
- 다크 모드 전환
- 텍스트 전환
- 클래스 전환
- 클래스 추가
- 클래스 제거
- 클래스 변경
- 활성 클래스
- 트리 뷰
- 소수점 제거
- 속성 제거
- 오프라인 감지
- 숨겨진 요소 찾기
- 웹 페이지 리디렉션
- 숫자 포맷
- 호버 줌인
- 반전 상자
- 수직 가운데 배치
- DIV 내에 가운데에 배치된 버튼
- 가운데에 나열된 목록
- 호버 트랜지션
- 화살표
- 형상
- 다운로드 링크
- 전체 높이 요소
- 브라우저 창
- 사용자 정의 스크롤바
- 스크롤바 숨기기
- 스크롤바 표시/강제 표시
- 장치 외관
- 편집 가능 내용 테두리
- 플레이스홀더 색상
- 텍스트 영역 크기 조정 비활성화
- 텍스트 선택 비활성화
- 텍스트 선택 색상
- 목록 표시줄 색상
- 수직선
- 분할선
- 텍스트 분할선
- 애니메이션 아이콘
- 카운트다운 타이머
- 타이핑 효과
- 即将上线页面
- 채팅 메시지
- 팝업 채팅 창
- 스크린 분할
- 고객 평가
- 블록 카운터
- 인용 슬라이드
- 가능한 목록 항목
- типичные точки разрыва устройства
- 휘지할 수 있는 HTML 요소
- JS 미디어 쿼리
- 문법 강조기
- JS 애니메이션
- JS 문자열 길이
- JS 지수 연산
- JS 기본 매개변수
- JS 랜덤 수
- JS 숫자 배열 정렬
- JS 확장 연산자
- JS로 뷰로 스크롤
- 현재 날짜를 가져옵니다
- 현재 URL을 가져옵니다
- 현재 스크린 크기를 가져옵니다
- iframe 요소를 가져옵니다
그리드
변환기
선택 과정
과정 추천：
과정 추천：
CodeW3C.com에서 제공하는 내용은 훈련 및 테스트 용으로만 사용되며, 내용의 정확성을 보장하지 않습니다. 이 사이트의 내용을 사용함으로써 발생하는 모든 위험은 이 사이트와 무관합니다. 저작권 소유, 모든 권리를 보존합니다.
