1. 방법
소스를 메모장에 복사 > 테두리 너비, 스타일, 색 변경 > css 소스 정리 > 스타일 시트(CSS)에 복사 > 확인
2. 소스
/***************** 테두리 꾸미기 ****************/
/* 상단 닉네임 부분 */
#mypiTop{border-bottom:3px solid #aaa;}
/* 좌측상단 본인 메뉴창 */
.mypiEdit{border:1px solid #ddd;}
/* 좌측상단 방문자가 보는 메뉴창 */
.mypiMeet{border:1px solid #ddd;}
/* 좌측 Category, Profile */
.subject{border-bottom:1px dashed #ddd;}
/* 가운데 인사말 */
.mypiComment{border:1px solid #ddd;}
/* 가운데 게시물 리스트 */
.mypiList{border:1px solid #ddd;}
/* 우측 메뉴 상단 */
.mypiSideUl{border-bottom:1px dashed #ccc;}
/* 게시물 내용 전체 */
#mypiRead{border:1px solid #ddd;}
/* 게시물 제목 */
#mypiRead .m1{border-bottom:1px dashed #d7d7d7;}
3. 컬러코드
https://color.adobe.com/ko/create/color-wheel/
4. 테두리 스타일
- none : 테두리를 사용하지 않음, border-width 의 값은 0이 된다.
- dotted : 점선
- dashed : 굵은 점선
- solid : 실선 (가장 많이 사용하는 속성)
- double : 이중 실선
3. 영상
4. 추가내용
- 테두리 설정은 순서대로 너비, 스타일, 컬러코드 입니다. {border:너비 스타일 컬러코드;}
- 테두리와 관련된 자세한 내용은 밑에 추천 사이트에서 보실 수 있습니다.
- 이외에도 다양한 영역의 테두리를 꾸며주실 수 있습니다.
- 위에 소스를 전부 복사해서 사용하시는 것보다 필요한 부분들을 선택적으로 복사하셔서 사용하는 것이 좋습니다.
5. 추천 사이트
- css 테두리 기초 강좌 : http://blog.wincomi.com/203
스타오션3