티스토리 블로그 첫 글자 크게 하기 ( 머리 글자 )

▶본래 블로그는  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.자신의 블로그에 맞춰서 여백과 크기를 조절한다

---

반응형

가 포함된 <div ...  문장을 찾자. 보통

반응형

▶본래 블로그는  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.자신의 블로그에 맞춰서 여백과 크기를 조절한다

---

반응형

쪽 문구는 보통 본문의 요소를 결정하는 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.자신의 블로그에 맞춰서 여백과 크기를 조절한다

---