다용도실_잡동사니

Odessey 프로필 모듈 수정

다식군! 2021. 5. 23. 16:50
반응형

당초 프로필 모듈 / 변경 후 프로필 모듈

큰맘먹고 정든 티스토리 스킨을 바꾸기로 했다. 

"Odessey"

그래 결정 했다.

 

왠만해서는 스킨을 바꾸는 무리한 일을 하지 않으려고 했다. 한번 바뀔때마다 어찌나 손이 많이 가던지....

내가 CSS를 아는 것도 아니고, 구글의 힘을 빌려 고치기도 힘들고.....

 

근데, 너무 구식의 스킨이라 안되는 것도 많고.......그래서 변경 결정...

 

근데, 눈에 계속 걸린다. 

프로필 모듈의 다식군의 얼굴이 너무 작다....

키워야 한다. 키워야 한다. 생각이 떠나지 않는 관계로 대대적인 수정 실시

"CSS" 수정 전 프로필 이미지 (우측)

[당초 CSS 중 일부]

.area-aside .box-profile .img-profile {
    width: 140px;
    height: 140px;
    margin: 49px 0 14px 0;
    border-radius: 140px;
}

.area-aside .box-profile .text-profile {
    max-width: 210px;
    margin: 0 auto 36px auto;
    font-size: 14px;
    line-height: 1.54;
    color: #777;
}

.area-aside .box-profile .button-subscription {
    width: 84px;
    height: 30px;
    margin: 0 auto 28px auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.area-aside .box-profile .box-sns {

    font-size: 0;
    text-align: center;
		margin-bottom:45px;
}

 

 

"CSS" 수정 후 프로필 이미지 (우측)

[수정 후 CSS 일부]

.area-aside .box-profile .img-profile {
    width: 250px;
    height: 250px;
    margin: 30px 0 10px 0;
    border-radius: 140px;
}

.area-aside .box-profile .text-profile {
    max-width: 230px;
    margin: 0 auto 5px auto;
	  font-family: 'yg-jalnan';
    font-size: 14px;
    line-height: 0;
    color: #777;
}

.area-aside .box-profile .button-subscription {
    width: 84px;
    height: 30px;
    margin: 0 auto 10px auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.area-aside .box-profile .box-sns {

    font-size: 0;
    text-align: center;
		margin-bottom:20px;
}

<<주요수정사항>>

수정사항 명령어 당  초 변  경 비  고
이미지 폭 수정 width/height 140px 250px  
이미지 여백 수정 margin 위49px, 우측0,
하측 14px, 좌측 0
위30px, 우측0,
하측 10px, 좌측 0
 
폰트 추가 font-family - 추가  

 

반응형