반응형 글쓰기 문장 첫 글자 대문자로 적용하기

블로그의 이용 형태가 모바일 환경으로 급격하게 이동했지만 블로그의 작성된 글이나 스킨들은 아직 모바일 반응형 환경에 완전히 대응하지 못하고 있다. 블로그에서 알아서 되면 좋겠지만 .. 제작자나 이용자 모두 익숙하지 않아서인지 기존의 방식을 계속 유지하고 있다.

이번에는 반응형의 블로그에서 사용할 수 있도록 문장 첫 글자를 대문자로 일괄 변경 또는 필요시 변경하여 사용하는 방법을 간단히 얘기하려고 한다. 이전까지 나도 알고는 있었지만 잘 사용하지 않고 있었는데 이번에 첫 문장의 첫 글자를 대문자로 변경해 보니 훨씬 보기 좋은 글이 되는것 같아 글로 남겨 보고자 한다.

잡지의 기사나 책을 보다보면 글의 첫 문장의 첫 글자를 크게 해서 글을 시작하는 것을 종종 볼 수 있다. 큰 문자를 표시함으로서 글의 시작 부분을 쉽게 찾을 수도 있고 문장의 첫 글자를 통해 글의 내용을 추측해 볼 수도 있다. 그러므로 글을 시작하는 단어를 선택할때도 신중을 기할 필요가 있다.

보통 블로그의 글은 P 태그로 감싸진 문장들로 작성하게 된다. 본문의 P 태그 중 맨 첫 글자를 선택하여 CSS 를 이용해 꾸미면 된다.

전체 글들을 일괄적으로 변경하고자 할때는 본문의 글이 포함된 부분의 클래스명을 확인해서 이용하게 될것이다. 현재 내가 사용중인 CCZ-CROSS 의 경우는 아래와 같이 본문의 글이 .post-content 로 되어 있다.

자신의 블로그 스킨의 HTML/CSS 수정모드에서

블로그의 이용 형태가 모바일 환경으로 급격하게 이동했지만 블로그의 작성된 글이나 스킨들은 아직 모바일 반응형 환경에 완전히 대응하지 못하고 있다. 블로그에서 알아서 되면 좋겠지만 .. 제작자나 이용자 모두 익숙하지 않아서인지 기존의 방식을 계속 유지하고 있다.

이번에는 반응형의 블로그에서 사용할 수 있도록 문장 첫 글자를 대문자로 일괄 변경 또는 필요시 변경하여 사용하는 방법을 간단히 얘기하려고 한다. 이전까지 나도 알고는 있었지만 잘 사용하지 않고 있었는데 이번에 첫 문장의 첫 글자를 대문자로 변경해 보니 훨씬 보기 좋은 글이 되는것 같아 글로 남겨 보고자 한다.

잡지의 기사나 책을 보다보면 글의 첫 문장의 첫 글자를 크게 해서 글을 시작하는 것을 종종 볼 수 있다. 큰 문자를 표시함으로서 글의 시작 부분을 쉽게 찾을 수도 있고 문장의 첫 글자를 통해 글의 내용을 추측해 볼 수도 있다. 그러므로 글을 시작하는 단어를 선택할때도 신중을 기할 필요가 있다.

보통 블로그의 글은 P 태그로 감싸진 문장들로 작성하게 된다. 본문의 P 태그 중 맨 첫 글자를 선택하여 CSS 를 이용해 꾸미면 된다.

전체 글들을 일괄적으로 변경하고자 할때는 본문의 글이 포함된 부분의 클래스명을 확인해서 이용하게 될것이다. 현재 내가 사용중인 CCZ-CROSS 의 경우는 아래와 같이 본문의 글이 .post-content 로 되어 있다.

자신의 블로그 스킨의 HTML/CSS 수정모드에서 이 포함된 부분의 div 클래스명을 확인하면 된다.

1 CCZ-CROSS 의 경우 클래스명 - post-content

<div class="e-content post-content"></div>

2 티스토리 기본 스킨 #1 의 경우 클래스명 - area_view

<div class="area_view"></div>

여기서는 기본 스킨 #1 의 클래스명을 이용하도록 할것이다. 각자의 스킨에 맞는 클래스명을 사용하면 된다.

관리 페이지에서 스킨의 HTML/CSS 수정하기로 이동하여 CSS 에 아래의 내용을 사용하면 모든 게시글의 첫 글자가 큰 대문자로 바뀌게 된다. 화면 창의 크기를 줄였다 늘였다 해보면 문자의 크기가 화면에 따라 반응하는것을 확인할 수 있다.

그리고 바탕색이나 글자색은 본인의 취향에 맞게 수정하여 사용하면 된다.

모두 멋진 글을 쓰는데 도움이 되었으면 좋겠다. 

.area_view p:first-of-type:first-letter {
      margin: 0 2% -2px 0;
      padding: 0 3% 0;
      font-size: 5vh;
      line-height: 1.5;
      float: left;
      color: #fff;
      background: #5BC0DE;
      vertical-align: bottom;
  }

이 포함된 부분의 div 클래스명을 확인하면 된다.

1 CCZ-CROSS 의 경우 클래스명 - post-content

<div class="e-content post-content">            



            
블로그의 이용 형태가 모바일 환경으로 급격하게 이동했지만 블로그의 작성된 글이나 스킨들은 아직 모바일 반응형 환경에 완전히 대응하지 못하고 있다. 블로그에서 알아서 되면 좋겠지만 .. 제작자나 이용자 모두 익숙하지 않아서인지 기존의 방식을 계속 유지하고 있다.
이번에는 반응형의 블로그에서 사용할 수 있도록 문장 첫 글자를 대문자로 일괄 변경 또는 필요시 변경하여 사용하는 방법을 간단히 얘기하려고 한다. 이전까지 나도 알고는 있었지만 잘 사용하지 않고 있었는데 이번에 첫 문장의 첫 글자를 대문자로 변경해 보니 훨씬 보기 좋은 글이 되는것 같아 글로 남겨 보고자 한다.
잡지의 기사나 책을 보다보면 글의 첫 문장의 첫 글자를 크게 해서 글을 시작하는 것을 종종 볼 수 있다. 큰 문자를 표시함으로서 글의 시작 부분을 쉽게 찾을 수도 있고 문장의 첫 글자를 통해 글의 내용을 추측해 볼 수도 있다. 그러므로 글을 시작하는 단어를 선택할때도 신중을 기할 필요가 있다.
보통 블로그의 글은 P 태그로 감싸진 문장들로 작성하게 된다. 본문의 P 태그 중 맨 첫 글자를 선택하여 CSS 를 이용해 꾸미면 된다.
전체 글들을 일괄적으로 변경하고자 할때는 본문의 글이 포함된 부분의 클래스명을 확인해서 이용하게 될것이다. 현재 내가 사용중인 CCZ-CROSS 의 경우는 아래와 같이 본문의 글이 .post-content 로 되어 있다.
자신의 블로그 스킨의 HTML/CSS 수정모드에서  이 포함된 부분의 div 클래스명을 확인하면 된다.
1 CCZ-CROSS 의 경우 클래스명 - post-content
<div class="e-content post-content"></div>

2 티스토리 기본 스킨 #1 의 경우 클래스명 - area_view
				
<div class="area_view"></div>


여기서는 기본 스킨 #1 의 클래스명을 이용하도록 할것이다. 각자의 스킨에 맞는 클래스명을 사용하면 된다.
관리 페이지에서 스킨의 HTML/CSS 수정하기로 이동하여 CSS 에 아래의 내용을 사용하면 모든 게시글의 첫 글자가 큰 대문자로 바뀌게 된다. 화면 창의 크기를 줄였다 늘였다 해보면 문자의 크기가 화면에 따라 반응하는것을 확인할 수 있다.

그리고 바탕색이나 글자색은 본인의 취향에 맞게 수정하여 사용하면 된다.
모두 멋진 글을 쓰는데 도움이 되었으면 좋겠다. 
.area_view p:first-of-type:first-letter {
      margin: 0 2% -2px 0;
      padding: 0 3% 0;
      font-size: 5vh;
      line-height: 1.5;
      float: left;
      color: #fff;
      background: #5BC0DE;
      vertical-align: bottom;
  }



            


</div>

2 티스토리 기본 스킨 #1 의 경우 클래스명 - area_view

<div class="area_view">            



            
블로그의 이용 형태가 모바일 환경으로 급격하게 이동했지만 블로그의 작성된 글이나 스킨들은 아직 모바일 반응형 환경에 완전히 대응하지 못하고 있다. 블로그에서 알아서 되면 좋겠지만 .. 제작자나 이용자 모두 익숙하지 않아서인지 기존의 방식을 계속 유지하고 있다.
이번에는 반응형의 블로그에서 사용할 수 있도록 문장 첫 글자를 대문자로 일괄 변경 또는 필요시 변경하여 사용하는 방법을 간단히 얘기하려고 한다. 이전까지 나도 알고는 있었지만 잘 사용하지 않고 있었는데 이번에 첫 문장의 첫 글자를 대문자로 변경해 보니 훨씬 보기 좋은 글이 되는것 같아 글로 남겨 보고자 한다.
잡지의 기사나 책을 보다보면 글의 첫 문장의 첫 글자를 크게 해서 글을 시작하는 것을 종종 볼 수 있다. 큰 문자를 표시함으로서 글의 시작 부분을 쉽게 찾을 수도 있고 문장의 첫 글자를 통해 글의 내용을 추측해 볼 수도 있다. 그러므로 글을 시작하는 단어를 선택할때도 신중을 기할 필요가 있다.
보통 블로그의 글은 P 태그로 감싸진 문장들로 작성하게 된다. 본문의 P 태그 중 맨 첫 글자를 선택하여 CSS 를 이용해 꾸미면 된다.
전체 글들을 일괄적으로 변경하고자 할때는 본문의 글이 포함된 부분의 클래스명을 확인해서 이용하게 될것이다. 현재 내가 사용중인 CCZ-CROSS 의 경우는 아래와 같이 본문의 글이 .post-content 로 되어 있다.
자신의 블로그 스킨의 HTML/CSS 수정모드에서  이 포함된 부분의 div 클래스명을 확인하면 된다.
1 CCZ-CROSS 의 경우 클래스명 - post-content
<div class="e-content post-content"></div>

2 티스토리 기본 스킨 #1 의 경우 클래스명 - area_view
				
<div class="area_view"></div>


여기서는 기본 스킨 #1 의 클래스명을 이용하도록 할것이다. 각자의 스킨에 맞는 클래스명을 사용하면 된다.
관리 페이지에서 스킨의 HTML/CSS 수정하기로 이동하여 CSS 에 아래의 내용을 사용하면 모든 게시글의 첫 글자가 큰 대문자로 바뀌게 된다. 화면 창의 크기를 줄였다 늘였다 해보면 문자의 크기가 화면에 따라 반응하는것을 확인할 수 있다.

그리고 바탕색이나 글자색은 본인의 취향에 맞게 수정하여 사용하면 된다.
모두 멋진 글을 쓰는데 도움이 되었으면 좋겠다. 
.area_view p:first-of-type:first-letter {
      margin: 0 2% -2px 0;
      padding: 0 3% 0;
      font-size: 5vh;
      line-height: 1.5;
      float: left;
      color: #fff;
      background: #5BC0DE;
      vertical-align: bottom;
  }



            


</div>

여기서는 기본 스킨 #1 의 클래스명을 이용하도록 할것이다. 각자의 스킨에 맞는 클래스명을 사용하면 된다.

관리 페이지에서 스킨의 HTML/CSS 수정하기로 이동하여 CSS 에 아래의 내용을 사용하면 모든 게시글의 첫 글자가 큰 대문자로 바뀌게 된다. 화면 창의 크기를 줄였다 늘였다 해보면 문자의 크기가 화면에 따라 반응하는것을 확인할 수 있다.

그리고 바탕색이나 글자색은 본인의 취향에 맞게 수정하여 사용하면 된다.

모두 멋진 글을 쓰는데 도움이 되었으면 좋겠다. 

.area_view p:first-of-type:first-letter {
      margin: 0 2% -2px 0;
      padding: 0 3% 0;
      font-size: 5vh;
      line-height: 1.5;
      float: left;
      color: #fff;
      background: #5BC0DE;
      vertical-align: bottom;
  }