[마꾸] 10. 테두리 꾸미기

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]

네 :D

[맑음때론뿌이]

좋은 강좌 매번 감사합니다

[스타오션3]

맑음때론뿌이님 감사합니다 //_//