▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
잡지나 몇몇 문서를 보면 가독성을 위해 첫 글자가 매우 크게 설정 되는 경우가 있다. 밑에 그림과 같은 이러한 문자를 ' 머리 글자 ' 라 하는데 네이버 포스트의 경우 네이버 에디터 3.0에서 자체 지원을 하지만 아직 티스토리 에디터에서는 지원하지 않는다.
하지만 티스토리만의 장점이 뭔가! 바로 Html/CSS 수정을 자유롭게 활용하여 알면 알수록 자유롭게 꾸밀수 있다는 것!
자 그러면 간단한 예제를 통하여 가장 앞 글자를 크게 바꾸도록 하겠다.
먼저 Html 창에서 Ctrl+F 를 통해
▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
잡지나 몇몇 문서를 보면 가독성을 위해 첫 글자가 매우 크게 설정 되는 경우가 있다. 밑에 그림과 같은 이러한 문자를 ' 머리 글자 ' 라 하는데 네이버 포스트의 경우 네이버 에디터 3.0에서 자체 지원을 하지만 아직 티스토리 에디터에서는 지원하지 않는다.
하지만 티스토리만의 장점이 뭔가! 바로 Html/CSS 수정을 자유롭게 활용하여 알면 알수록 자유롭게 꾸밀수 있다는 것!
자 그러면 간단한 예제를 통하여 가장 앞 글자를 크게 바꾸도록 하겠다.
먼저 Html 창에서 Ctrl+F 를 통해 가 포함된 <div ... 문장을 찾자. 보통 바로 앞에 써있다. 밑 이미지에 체크해둔 부분을 복사하거나 메모장에 적어서 복사해둔다.
왜 이 문구를 찾았냐면 쪽 문구는 보통 본문의 요소를 결정하는 HTML 문구 이기 때문이다. div class= 'article' 이란 문구는 article 이라는 이름의 속성을 따른다는 문구 이다.
필자는 article로 되어있기 때문에 노트에 article을 적어두고 실질적인 문구 디자인 변화를 위해 CSS 쪽으로 넘어갔다. 마찬가지로 Ctrl+F 를 써 article 이라고 찾아보니 이미 article 의 속성을 정하는 여러 문구가 있는걸 볼 수 있다. 이 바로 위에 다음과 같이 적어준다.
크롬을 사용하고 있다면 이 블로그의 크롬 우클릭 해체글 을 통해 간단하게 F12를 누른것만으로 이 명령어를 복사 할 수 있으니 참조.
2017/01/20 - [여러가지 정보/일상 IT] - 크롬
.article p:first-of-type:first-letter {
margin: 0 3% -3px 0;
padding: 0 3% 0;
font-size: 5vw;
line-height: 1.6;
float: left;
color: #fff;
background: #000;
vertical-align: bottom;
}
.article 이 부분은 아까 자신이 찾은 class 명칭을 쓰면 된다. 마진과 패딩을 통해 여백을 조절하고 배경칼라와 글짜 칼라까지 조절이 가능하다. 자신의 블로그에 맞춰서 조금씩 숫자를 바꿔 설정해주면 되겠다.
* 각 요소 설명
first-letter 는 첫문장을 p: first-of-type 는 첫 <p>문단을 지칭한다. 만약 <p>문단의 시작점 때문에 다른 부분이 대문자화 되는 문제가 생긴다면 글자 크기가 커지길 원하는 문장의 html을 열어 <p> </p> 안에 넣어주면 해결된다. (ex: 나는 아버지가 좋다.에 나가 커지게 하고 싶다면 html 체크후 <p>나는 아버지가 좋다 </p> )
margin : 외부 여백, padding : 내부 여백, font-size : 폰트 크기, line-height 즐 높이, float : 정렬 방향, color : 글자 색깔, background : 배경 색깔, verticla-align : 글자의 수직 속성
간단요약
1.Html 에서 article_rep_desc 가 들어간 div 문구의 class 이름을 확인 후 복사한다.
2.Css 에 위에 문구를 적어준다. 이때 가장 앞에는 article을 쓰라는게 아니라 아까 확인한 이름을 .이름 이런식으로 써준다.
3.자신의 블로그에 맞춰서 여백과 크기를 조절한다
▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
잡지나 몇몇 문서를 보면 가독성을 위해 첫 글자가 매우 크게 설정 되는 경우가 있다. 밑에 그림과 같은 이러한 문자를 ' 머리 글자 ' 라 하는데 네이버 포스트의 경우 네이버 에디터 3.0에서 자체 지원을 하지만 아직 티스토리 에디터에서는 지원하지 않는다.
하지만 티스토리만의 장점이 뭔가! 바로 Html/CSS 수정을 자유롭게 활용하여 알면 알수록 자유롭게 꾸밀수 있다는 것!
자 그러면 간단한 예제를 통하여 가장 앞 글자를 크게 바꾸도록 하겠다.
먼저 Html 창에서 Ctrl+F 를 통해 가 포함된 <div ... 문장을 찾자. 보통 바로 앞에 써있다. 밑 이미지에 체크해둔 부분을 복사하거나 메모장에 적어서 복사해둔다.
왜 이 문구를 찾았냐면 쪽 문구는 보통 본문의 요소를 결정하는 HTML 문구 이기 때문이다. div class= 'article' 이란 문구는 article 이라는 이름의 속성을 따른다는 문구 이다.
필자는 article로 되어있기 때문에 노트에 article을 적어두고 실질적인 문구 디자인 변화를 위해 CSS 쪽으로 넘어갔다. 마찬가지로 Ctrl+F 를 써 article 이라고 찾아보니 이미 article 의 속성을 정하는 여러 문구가 있는걸 볼 수 있다. 이 바로 위에 다음과 같이 적어준다.
크롬을 사용하고 있다면 이 블로그의 크롬 우클릭 해체글 을 통해 간단하게 F12를 누른것만으로 이 명령어를 복사 할 수 있으니 참조.
2017/01/20 - [여러가지 정보/일상 IT] - 크롬
.article p:first-of-type:first-letter {
margin: 0 3% -3px 0;
padding: 0 3% 0;
font-size: 5vw;
line-height: 1.6;
float: left;
color: #fff;
background: #000;
vertical-align: bottom;
}
.article 이 부분은 아까 자신이 찾은 class 명칭을 쓰면 된다. 마진과 패딩을 통해 여백을 조절하고 배경칼라와 글짜 칼라까지 조절이 가능하다. 자신의 블로그에 맞춰서 조금씩 숫자를 바꿔 설정해주면 되겠다.
* 각 요소 설명
first-letter 는 첫문장을 p: first-of-type 는 첫 <p>문단을 지칭한다. 만약 <p>문단의 시작점 때문에 다른 부분이 대문자화 되는 문제가 생긴다면 글자 크기가 커지길 원하는 문장의 html을 열어 <p> </p> 안에 넣어주면 해결된다. (ex: 나는 아버지가 좋다.에 나가 커지게 하고 싶다면 html 체크후 <p>나는 아버지가 좋다 </p> )
margin : 외부 여백, padding : 내부 여백, font-size : 폰트 크기, line-height 즐 높이, float : 정렬 방향, color : 글자 색깔, background : 배경 색깔, verticla-align : 글자의 수직 속성
간단요약
1.Html 에서 article_rep_desc 가 들어간 div 문구의 class 이름을 확인 후 복사한다.
2.Css 에 위에 문구를 적어준다. 이때 가장 앞에는 article을 쓰라는게 아니라 아까 확인한 이름을 .이름 이런식으로 써준다.
3.자신의 블로그에 맞춰서 여백과 크기를 조절한다
왜 이 문구를 찾았냐면
▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
잡지나 몇몇 문서를 보면 가독성을 위해 첫 글자가 매우 크게 설정 되는 경우가 있다. 밑에 그림과 같은 이러한 문자를 ' 머리 글자 ' 라 하는데 네이버 포스트의 경우 네이버 에디터 3.0에서 자체 지원을 하지만 아직 티스토리 에디터에서는 지원하지 않는다.
하지만 티스토리만의 장점이 뭔가! 바로 Html/CSS 수정을 자유롭게 활용하여 알면 알수록 자유롭게 꾸밀수 있다는 것!
자 그러면 간단한 예제를 통하여 가장 앞 글자를 크게 바꾸도록 하겠다.
먼저 Html 창에서 Ctrl+F 를 통해 가 포함된 <div ... 문장을 찾자. 보통 바로 앞에 써있다. 밑 이미지에 체크해둔 부분을 복사하거나 메모장에 적어서 복사해둔다.
왜 이 문구를 찾았냐면 쪽 문구는 보통 본문의 요소를 결정하는 HTML 문구 이기 때문이다. div class= 'article' 이란 문구는 article 이라는 이름의 속성을 따른다는 문구 이다.
필자는 article로 되어있기 때문에 노트에 article을 적어두고 실질적인 문구 디자인 변화를 위해 CSS 쪽으로 넘어갔다. 마찬가지로 Ctrl+F 를 써 article 이라고 찾아보니 이미 article 의 속성을 정하는 여러 문구가 있는걸 볼 수 있다. 이 바로 위에 다음과 같이 적어준다.
크롬을 사용하고 있다면 이 블로그의 크롬 우클릭 해체글 을 통해 간단하게 F12를 누른것만으로 이 명령어를 복사 할 수 있으니 참조.
2017/01/20 - [여러가지 정보/일상 IT] - 크롬
.article p:first-of-type:first-letter {
margin: 0 3% -3px 0;
padding: 0 3% 0;
font-size: 5vw;
line-height: 1.6;
float: left;
color: #fff;
background: #000;
vertical-align: bottom;
}
.article 이 부분은 아까 자신이 찾은 class 명칭을 쓰면 된다. 마진과 패딩을 통해 여백을 조절하고 배경칼라와 글짜 칼라까지 조절이 가능하다. 자신의 블로그에 맞춰서 조금씩 숫자를 바꿔 설정해주면 되겠다.
* 각 요소 설명
first-letter 는 첫문장을 p: first-of-type 는 첫 <p>문단을 지칭한다. 만약 <p>문단의 시작점 때문에 다른 부분이 대문자화 되는 문제가 생긴다면 글자 크기가 커지길 원하는 문장의 html을 열어 <p> </p> 안에 넣어주면 해결된다. (ex: 나는 아버지가 좋다.에 나가 커지게 하고 싶다면 html 체크후 <p>나는 아버지가 좋다 </p> )
margin : 외부 여백, padding : 내부 여백, font-size : 폰트 크기, line-height 즐 높이, float : 정렬 방향, color : 글자 색깔, background : 배경 색깔, verticla-align : 글자의 수직 속성
간단요약
1.Html 에서 article_rep_desc 가 들어간 div 문구의 class 이름을 확인 후 복사한다.
2.Css 에 위에 문구를 적어준다. 이때 가장 앞에는 article을 쓰라는게 아니라 아까 확인한 이름을 .이름 이런식으로 써준다.
3.자신의 블로그에 맞춰서 여백과 크기를 조절한다
필자는 article로 되어있기 때문에 노트에 article을 적어두고 실질적인 문구 디자인 변화를 위해 CSS 쪽으로 넘어갔다. 마찬가지로 Ctrl+F 를 써 article 이라고 찾아보니 이미 article 의 속성을 정하는 여러 문구가 있는걸 볼 수 있다. 이 바로 위에 다음과 같이 적어준다.
크롬을 사용하고 있다면 이 블로그의 크롬 우클릭 해체글 을 통해 간단하게 F12를 누른것만으로 이 명령어를 복사 할 수 있으니 참조.
2017/01/20 - [여러가지 정보/일상 IT] - 크롬
.article p:first-of-type:first-letter {
margin: 0 3% -3px 0;
padding: 0 3% 0;
font-size: 5vw;
line-height: 1.6;
float: left;
color: #fff;
background: #000;
vertical-align: bottom;
}
.article 이 부분은 아까 자신이 찾은 class 명칭을 쓰면 된다. 마진과 패딩을 통해 여백을 조절하고 배경칼라와 글짜 칼라까지 조절이 가능하다. 자신의 블로그에 맞춰서 조금씩 숫자를 바꿔 설정해주면 되겠다.
* 각 요소 설명
first-letter 는 첫문장을 p: first-of-type 는 첫 <p>문단을 지칭한다. 만약 <p>문단의 시작점 때문에 다른 부분이 대문자화 되는 문제가 생긴다면 글자 크기가 커지길 원하는 문장의 html을 열어 <p> </p> 안에 넣어주면 해결된다. (ex: 나는 아버지가 좋다.에 나가 커지게 하고 싶다면 html 체크후 <p>나는 아버지가 좋다 </p> )
margin : 외부 여백, padding : 내부 여백, font-size : 폰트 크기, line-height 즐 높이, float : 정렬 방향, color : 글자 색깔, background : 배경 색깔, verticla-align : 글자의 수직 속성
간단요약
1.Html 에서 article_rep_desc 가 들어간 div 문구의 class 이름을 확인 후 복사한다.
2.Css 에 위에 문구를 적어준다. 이때 가장 앞에는 article을 쓰라는게 아니라 아까 확인한 이름을 .이름 이런식으로 써준다.
3.자신의 블로그에 맞춰서 여백과 크기를 조절한다
'여러가지 정보 > 블로그 정보 세상' 카테고리의 다른 글
티스토리 Fastboot 스킨 사용자 태터데스크 적용하기, 첫 화면 꾸미기 (0) | 2017.03.25 |
---|---|
텐핑 API 활용, 카테고리 설정 쉽게 이용해 봅시다. (0) | 2017.02.14 |
티스토리 초대 없이 가입하기 (0) | 2017.02.05 |
텐핑 수익 진정성 있게 적어봅니다 ( 전부 수정 ) (8) | 2017.01.25 |
티스토리 구글 검색 연결 시키기 (5) | 2017.01.02 |