• [마이피 깍는 외계인] to 月요일 소년 님 리플 관련 부분(mypiReply) 파트42014.02.04 PM 02:31

게시물 주소 FONT글자 작게하기 글자 키우기


 

 

해당 소스는 月요일소년 님 마이피



.readcomment {
padding: 20px 20px;
width: 735px;
min-height: 70px;
border-radius: 25px;
background-color: black;
background: rgba(35,30,25,0.7);
color: #FFF;
font-size: 15px;
line-height: 20px;
word-break: break-all;
p-osition: relative;
margin: -105px auto 0px 150px;
}



div 이름은 넘어가고

 

padding: 20px 20px;

 

본문 여백지정입니다

 

width: 735px;

 

div 의 가로크기를 나타냅니다.

 

min-height: 70px;

 

최소높이를 지정합니다. 지정하지 않을경우 한줄 코멘트의 경우 한줄에 맞춰서

높이가 지정되어집니다. 기본레이아웃 잡기 위해 지정하는 겁니다.

 

border-radius: 25px;

 

테두리 꼭지점을 둥글게 지정합니다. CSS3 명령어 중 하나로 크롬 이나 익스 11

이하의 브라우져에서는 동작하지 않을 수 있습니다.

 

background-color: black;
background: rgba(35,30,25,0.7);

 

백그라운드 색상을 나타냅니다. url을 넣어서 그림을 넣을 수도 있고 색상을

넣을 수 있는데 밑에 rgba는 알파값이 들어간 명령어로 브라우져 특성을 탑니다.

그러기 위해서 위에 백그라운드-컬러 코드를 넣어 하단 코드가 안 먹을 시 임의

로 적용되게 했습니다. CSS는 같은 코드 일 경우 마지막 줄 코드가 우선 적용

됩니다. 이점 유의해 주세요.

 

color: #FFF;

 

글자색입니다. 위 백그라운드 컬러가 브라우져 특성을 타서 지정 되지 않을 경우

흰색으로 나오는데 그것을 방지하기 위해 임의로 백그라운드 컬러 블랙을 더 넣

은 거에요. 호환성을 위한 일종의 꼼수입니다.

 

font-size: 15px;
line-height: 20px;

 

같같 글자 크기 와 줄간격입니다. 설명은 이전 파트에서 했으니 넘어갑니다.

 

word-break: break-all;

코멘트가 들어 가는 경우 이 코드는 추가 해 주시는게 좋습니다.

완성된 문자가 아니더라도 줄넘김 하기 위한 코드에요. 이 것을 지정하지 않을 시

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 일 경우 div테두리를 넘어가도 줄넘김이 안됩니다.

 

p-osition: relative;

 

포지션 코드의 경우 이전에 설명 했으므로 생략 혹시나 다시 말하지만 - 는 빼주셔야 합니다.

 

margin: -105px auto 0px 150px;

 

이전 파트에서 설명 했으므로 추가 설명은 없습니다만 수치가 높으면 의외인 곳에서 레이아웃

이 파괴 될 경우가 있으니 수시로 모니터링 해서 수정해주세요.

 

일단 제 마이피는 보이는대로 수정한 편이긴 하지만 제 스킨을 가져가신 분들 중 수정이 힘든

분들이 있으니 수시로 업데이트 되는 스킨을 적용 시켜 주심 됩니다.

 

 

 

 

댓글 : 11 개
자세한 설명 감사합니다!
조금 있다가 여태까지 올려주신 게시글 참고해서 수정해 봐야겠네요 : )
엘더님 카테고리의 (숫자) 요거 사라지는방법 없을까요?
http://mypi.ruliweb.daum.net/mypi.htm?id=vlymnx_da&num=3130

이분 이십니다. 카테고리 항목에서 수정하심 되요... 이분 아이디를 뭐라고 해야 할지 잘 모르겠음...ㅠㅠ...
근데 이게 보면 카테고리 대괄호 없에는거 아닌가요?
제가원하는건 소괄호인데.. .ㅠ
흐음... 잠시만요... CSS좀 풀이를 해봐야 할듯...
알아낸거 같습니다.
제가 정리해서 올려 드릴께요.
일단 월요일 소년님 질문부터 처리하구요.
호~ 예~ 기다리겟습니다
님 능력자네요 ㅠ
아무리 뜯어도 힌트조차 못알아냇는데 ㅠ
이것저것 만저보고 있는데 댓글 답글 닉네임을 오른쪽으로 밀어버리고 싶은데
어떤 코드인지 모르겠네요 ㄷㄷ;;
설명 해주신건 댓글 닉네임 부분이고 계속 찾아 보곤 있는데 못찾겠습니다 ㅠ_ㅠ
답글의 답글 말하는건가요?
조금만 기다리세요...
친구글 비밀글 댓글 쓰기