[티스토리블로그] 티스토리 블로그 설명 줄바꿈 효과 넣기

728x90

변경 전 사진을 미리 못 찍어서... 색상 들어간 건 무시해주세요... 중요한건 변경 전에는 줄바꿈이 없다는 것만 봐주세요...😥😥

변경 후도 테스트 도중에 글자가 많아지면 어떻게 되나 궁금해서 도중에 추가된 것입니다.

방금 테스트 및 적용을 끝내고 바로 글을 쓴다.

블로그 설명에 일했던 경력을 쓰고싶어졌다. (아직은 부족하지만, 미래를 위해 ㅎ)

내가 정한 양식은

# 일했던 회사 (간략히)

- 개발했던 업무

- 근무 기간

- 사용 기술 및 플랫폼

이렇게 정하고 블로그 설명창을 봤다.

위 이미지와 같이 줄바꿈 효과가 없었다. 블로그 설명란에 "\n"도 넣어보고 "<br>"도 넣어봤지만, 그냥 고대로 출력만 될뿐 줄바꿈은 되지 않았다.(참고로 html/css를 공부한 적이 없고, 구글링을 통해 필요한 정보만 찾아서 수정하는 수준)

참고로 나도 검색해봣는데 나같이 고민한 사람은 많이 없었나봄ㅎ 아무도 안알려주드라

티스토리 블로그 설명에 줄바꿈 효과 넣기

티스토리 블로그에는 스킨 편집이라는 기능이 있다.

순서

블로그에 들어가 F12을 눌러 속성 이름 찾기
티스토리 블로그의 스킨 편집 중 html 편집으로 접속
CSS화면에서 ctrl+F 사용해서 찾은 속성 이름 검색
white-space 및 text-align 추가
우측 상단에 적용하기 클릭

1. 블로그에 들어가 F12을 눌러 속성 이름 찾기

첫 번쨰로 해야할 것은 변경하고자 하는 곳의 속성 이름을 찾는 것이다.

간단히 설명하자면 오른쪽에 있는 코드들이 왼쪽의 이미지(및 글자)로 나타나게 된다.(이것이 html)

참고로, 우측 화면은 F12을 누르면 나타나게 되고, 필요한 속성까지 찾아가는 방법을 모르시다면 댓글 및 메일 주시면 도와드리겠습니다.(일일이 이미지 올리면서 설명하면 블로그 글이 너무 길어짐)

오른쪽에 <p class= "p.text-profile"> 이라고 되어 있다. 우리가 볼 것은 "p.text-profile"이다.

p 는 <p>이고, 속성 이름은 text-profile이다. (위에서 말했듯이 난 html 안해봄, 그래서 p가 뭔지 잘모르고 속성 이름이라고 부르는게 맞는지도 모름ㅎㅎ) 우리가 기억할 것은 text-profile만 알면됨.

2. 티스토리 블로그의 스킨 편집 중 html 편집으로 접속

접속 방법

- 블로그 관리 - 꾸미기(좌측 카테고리) - 스킨 편집 - html 편집(우측 상단) - CSS 클릭

3. CSS화면에서 ctrl+F 사용해서 찾은 속성 이름 검색

4. white-space 및 text-align 추가

여기까지 잘 따라오셨는지는 알 수는 없지만, 저와 같이 "text-profile"을 잘 찾으셨다면 거의 다 마무리 됬다고 생각하시면 됩니다.

max-width : 가로 길이의 최대 크기. 210 -> 250 늘려줌

margin : 주변 여백. 원래 1줄(상하좌우)에서 4줄 일일히 속성을 나눔

font-size : 글자 크기

line-height : 글자 간 높이 간격

color : 글자 색상

white-space : pre-line; 제일 중요, 여기서 줄바꿈 효과가 나타남

text-align: left; 글자를 왼쪽으로 정렬

나머진 안바꿔도 되지만 줄바꿈 핵심은 white-space와 text-align이다. 저도 자세히는 몰라서 직접 일일히 수정해보고 검색하면서 했음. 자세한 속성 값을 원하시면 구글링 하시면 됩니다.

.area-aside .box-profile .text-profile {
    max-width: 250px; # 좌우 길이 변경 210 -> 250
	margin-top:auto; # margin: 0 auto 36px auto -> 4개로 나눔
	margin-bottom:auto;
	margin-left:10px;
    margin-right:0;
    font-size: 14px; # 글자 크기
    line-height: 1.74; # 글자 높이 간격
    color: #777; # 글자 색상
	white-space: pre-line; # 줄바꿈 효과
	text-align: left; # 글자를 왼쪽으로 정렬(없으면 중앙에 몰림)
}

# text-align 사용 안하게 된다면

참고로 text-align을 안넣으면 아래 처럼 됨.

디자인은 취향이기에 없는걸 원하시는 분들도 있을거라 생각합니다.

그럼 text-align을 뺴주시거나 속성 값을 "left"에서 "center"로 변경해주시면 됩니다.

5. 우측 상단에 적용하기 클릭

당연한 얘기지만 적용하기 안누르면 변경 안됩니다 ㅎㅎ

모를땐 댓글😎😎 달아주세요