글을 돋보이게 하는 방법: 3가지 CSS 스타일링 트릭

게시 됨: 2022-03-22

귀하의 글은 블로그의 중심입니다.

콘텐츠가 왕이죠?

사람들을 끌어들이고 블로그를 계속 읽게 만드는 것입니다.

하지만 그 못지않게 중요한 것은 자신의 글을 실제로 어떻게 보여주느냐 하는 것입니다. 시각적으로 말이다.

귀하의 콘텐츠는 훌륭할 수 있지만 누군가가 읽기 어렵다면 생각보다 많은 독자를 잃게 될 수 있습니다.

보세요, 저는 숙련된 작가는 아니지만 웹 디자이너이고 무엇이 좋아 보이는지 압니다. 그리고 일반적으로 좋아 보이는 것은 장식과 맛에 관한 것이 아니라 작동하는 것과 읽고 이해하기 쉽게 만드는 것에 관한 것입니다.

저는 수년간 콘텐츠를 디지털 형식으로 표시하는 다양한 방법을 연구해 왔으며 웹 디자이너의 관점에서 콘텐츠가 블로그 게시물에 멋지게 표시되도록 하는 몇 가지 빠르고 쉬운 방법을 보여드리고자 합니다.

작은 CSS(Cascading Style Sheets)를 사용하여 블로그에 스타일을 빠르게 조정할 수 있는 몇 가지 방법이 있어 작성자가 귀하의 콘텐츠를 선보이고 독자가 최대한 쉽게 즐길 수 있도록 할 수 있습니다.

사용자 정의 스타일 시트에 추가하고 원하는 대로 편집할 수 있는 몇 가지 CSS 스와이프 코드를 알려 드리겠습니다. 블로그의 사용자 정의 스타일 시트에 액세스하는 방법을 잘 모르는 경우 블로그에서 CSS를 편집하는 방법에 대한 지침을 따르십시오.

글을 보여주기 위해 콘텐츠 스타일을 지정하는 3가지 트릭

  1. 당신의 단락을 아름답게

단락을 읽기 쉽게 하기 위해 기억해야 할 몇 가지 팁이 있습니다. 여기서 p(단락) 태그의 스타일을 지정합니다.

  • 보기 쉬운 글꼴을 선택하십시오. 손으로 쓴 글꼴이 아닌 serif 또는 sans serif 글꼴을 목표로 합니다.

너무 가늘지 않은 무게를 선택하십시오. 일부 매우 얇은 글꼴은 특정 브라우저 및 운영 체제(예: mac 또는 PC)에서 잘 보이지 않으므로 사람들에게 확인하고 엄지손가락을 치워달라고 요청하십시오.

동시에 너무 두껍지 않은 글꼴을 선택하십시오. 굵은 텍스트와 충분한 대비를 갖기를 원합니다.

글꼴을 선택할 때 시스템 글꼴, 블로그 파일에 업로드한 글꼴 또는 Google 글꼴을 사용하고 있는지 확인하십시오. 무료이고 가장 다양하고 사용하기 쉽기 때문에 Google 글꼴을 사용하는 것이 좋습니다. 자세한 내용은 블로그에서 멋진 글꼴을 사용하는 방법을 확인하세요.

글꼴을 선택하면 사용자 정의 스타일 시트로 이동하여 다음 코드를 추가합니다.

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
}
</pre>

  • 모든 크기의 화면에서 읽기 쉬운 글꼴 크기를 사용하십시오. 전화로 블로그를 확인하고 텍스트가 피곤하거나 노인의 눈에 너무 작지 않은지 확인하십시오.

단락에 적합한 크기는 일반적으로 14~16픽셀입니다. 모든 글꼴이 동일한 크기에서 동일하게 표시되는 것은 아니므로 사용하여 가장 잘 보이는 글꼴을 확인하십시오.

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 16px;
}
</pre>

  • 적절한 줄 높이(행간)를 사용하십시오. 적절한 줄 높이는 단락에 숨을 쉴 수 있는 공간을 제공하기 때문에 가독성에도 도움이 됩니다. 좋은 줄 높이는 1.5, 즉 텍스트 크기의 1.5배입니다(줄 높이 2는 두 배 간격).

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 16px;
라인 높이: 1.5;
}
</pre>

  • 흰색에 순수한 검정색 텍스트를 사용하지 마십시오. 눈이 힘들어요. 대신 대비를 약간 낮추기 위해 복사본에 어두운 회색(저는 #333333이 좋습니다)을 선택합니다.

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 16px;
라인 높이: 1.5;
색상: #333333;
}
</pre>

  • 단락 가운데 정렬을 피하십시오. 본문 사본을 중앙에 배치하면 아마추어처럼 보이고 읽기가 더 어려워집니다. 왜요? 눈이 새 줄로 이동할 때마다 다음 줄의 시작을 찾기 위해 고군분투해야 합니다. 같은 위치에 있지 않기 때문입니다.시, 캡션 또는 관심을 끄는 짧은 텍스트의 중앙 정렬을 예약하고 왼쪽을 선택하십시오. 일반 단락을 정렬하거나 정당화합니다. 양쪽 정렬된 텍스트는 단락의 왼쪽과 오른쪽이 모두 직선 가장자리를 갖도록 간격을 두었습니다.

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 16px;
라인 높이: 1.5;
색상: #333333;
텍스트 정렬: 정당화;
}
</pre>

<pre>텍스트 정렬: 왼쪽; </pre>는 기본 동작이며 이전 스타일을 재정의해야 하는 경우가 아니면 지정할 필요가 없습니다.

  • 마지막으로 공백을 추가합니다. 최적의 가독성을 위해 단락 사이에 충분한 공백이 필요합니다. 경험상 각 단락 아래에 글꼴 크기의 약 2배에 해당하는 여백을 추가하는 것이 좋습니다.

<사전>
피 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 16px;
라인 높이: 1.5;
색상: #333333;
텍스트 정렬: 정당화;
여백-하단: 32px;
}
</pre>

  1. 계층 사용

제목과 부제목을 사용하여 게시물의 개요를 작성할 때 계층 구조를 사용합니다.

게시물에 시각적 계층 구조를 만들려면 쉽게 구분할 수 있도록 머리글과 부제목의 스타일을 지정하세요. 다음은 몇 가지 팁입니다.

  • 다양한 크기의 모든 제목에 동일한 글꼴을 사용하십시오.
  • serif 또는 sans serif 글꼴과 같이 읽기 쉬운 글꼴을 사용합니다. 본문 사본과 동일한 서체를 더 두꺼운 두께로 사용하거나 본문 사본과 잘 대조되는 다른 서체를 선택할 수 있습니다.
  • 제목과 부제목을 굵거나 무거운 것으로 설정합니다.
  • Typecast를 사용하여 제목에 대해 다양한 글꼴, 크기 및 두께를 사용하고 이를 단락 텍스트와 비교합니다.

다음은 단락의 글꼴 크기가 16px로 설정된 경우 크기 조정을 위해 생각해낼 수 있는 예입니다. 그런 다음 거기에서 위로 올라갈 것입니다.

  • h6 제목 = 16px(일반적으로 단락 텍스트와 같은 크기이지만 굵게 표시되고 한 줄에 있음)
  • h5 제목 = 18px
  • h4 제목 = 22px
  • h3 제목 = 26픽셀
  • h2 제목 = 30px
  • h1 제목(블로그 게시물 제목) = 36px

다시 말하지만, Typecast를 사용하여 눈에 가장 잘 보이는 것이 무엇인지 확인하십시오. 제목에 사용할 글꼴과 크기를 결정했으면 사용자 정의 스타일 시트로 이동하여 모든 제목에 이 CSS를 추가하고 싶을 것입니다.

<사전>
h1, h2, h3, h4, h5, h6 {
글꼴 패밀리: 글꼴 이름 삽입;
글꼴 크기: 36px;
글꼴 두께: 굵게;
}
</pre>

다음으로 제목의 각 수준에 대한 크기를 변경하기 위해 몇 가지 CSS 재정의를 추가합니다.

<사전>
h2 {
글꼴 크기: 30px;
}

h3 {
글꼴 크기: 26px;
}

h4 {
글꼴 크기: 22px;
}

h5 {
글꼴 크기: 18px;
}

h6 {
글꼴 크기: 16px;
}
</pre>

  1. 링크 사용

독자를 생각하게 만들지 마십시오! 귀하의 링크는 링크처럼 보여야 합니다. 즉, 클릭해야 할 대상이라는 것이 완전히 명확해야 합니다. 이를 수행하는 몇 가지 방법은 다음과 같습니다.

  • 일반 텍스트와 대조되는 링크 색상을 선택하십시오.
  • 링크용으로 한 가지 색상만 예약하세요. 제목, 부제목, 사이드바 위젯 제목 또는 기타 텍스트에 동일한 색상을 사용하지 마십시오.
  • 그러나 버튼도 클릭 가능한 요소이기 때문에 원하는 경우 버튼에 이 색상을 사용할 수 있습니다.
  • 링크가 아닌 텍스트에 밑줄을 긋지 마십시오. 사람들은 일반적으로 밑줄이 그어진 텍스트가 링크라고 생각하기 때문에 혼란스럽습니다.

<사전>
ㅏ {
색상: 핑크;
텍스트 장식: 밑줄;
}
</pre>

독자가 링크로 구분할 수 있도록 다양한 링크 상태의 스타일을 지정합니다. 사용자가 해당 링크 위로 마우스를 가져갈 때 모양이 바뀌도록 하면 활성 링크임을 추가로 알 수 있습니다.

<사전>
a:호버 {
파란색;
텍스트 장식: 없음;
}
</pre>

또한 방문한 링크의 스타일을 다르게 지정하여 특정 링크를 이미 방문한 사용자에게 표시할 수도 있습니다.

<사전>
a:방문 {
파란색;
}
</pre>

글을 돋보이게 하려면 몇 가지 간단한 편집만 하면 됩니다.

다음은 읽기 쉽게 작성하여 콘텐츠를 돋보이게 하는 데 도움이 되는 글을 보여주기 위한 몇 가지 트릭일 뿐입니다!

사용자가 쉽게 읽을 수 있도록 블로그 게시물을 레이아웃하는 다른 방법은 무엇입니까?

CSS를 활용하여 독자에게 더 매력적으로 블로그를 만들고 글을 실제로 선보일 수 있는 방법에 대해 더 알고 싶으십니까? 엄청난! 그런 다음 CSS에 대한 무료 비디오 교육에 참여해 주시기 바랍니다. 곧 시작되니 지금 신청하세요.

Pixabay의 이미지 제공