• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

블로그에 글을 쓸 때 알아두면 좋은 것 01 - <br> 태그와 글꼴 색상

이윰
152 1 0

# <p> 태그와 <br> 태그를 적절히 사용하기

<p> 태그와 <br> 태그는 줄 바꿈을 하는 태그입니다.

<p></p> 사이에 위치한 내용이 하나의 문단을 구성 하는 것이고</ br> 태그는 문단 내에서 강제로 줄 바꿈을 해줍니다.

 

<p>, <br>태그로 줄 바꿈 하는 방법

에디터에서 글쓰기를 할 때 Enter를 이용하여 줄 바꿈을 하면 <p> 태그가 적용됩니다.
Shift+Enter 를 이용하여 줄 바꿈을 하면 <br> 태그가 적용됩니다.

 

두 가지 태그의 다른 점은 <br> 태그는 행간의 공백없이 줄 바꿈이 되지만 <p> 태그는 행간 공백이 생긴다는 것입니다.
좌우로 글이 길어질 경우 가독성 향상을 위해서 줄 바꿈을 해주는데 <p> 태그를 너무 많이 사용한다면 행간이 넓어지면서 오히려 가독성을 해칠 수 있습니다. 그래서 <p> 태그에 CSS를 적용해 공백을 없애주는 처방을 하기도 하지요.

 

현재 필자의 사이트도 <p> 태그의 공백을 CSS로 없애놓은 상태라 습관적으로 줄 바꿈을 할 때 Enter 키를 눌러 <p> 태그를 써왔습니다. 그런데 기사를 간소화해서 볼 수 있는 프로그램 (읽기 도구)으로 보니까 의미 없이 행의 간격이 벌어져 있는 것을 확인할 수 있었어요. (이미지 참조 : 에버노트 클리퍼)
'읽기 도구 이용자가 얼마나 되겠나'라고 생각할 수 있지만, 이것뿐만 아니라 검색엔진이 HTML 구조를 파악하는데 영향을 줄 수 있으므로 SEO를 위해서라도 문단의 남발은 좋지 않다고 합니다.

20200113-min.png.jpg

# 에디터에서 색상 지정하지 않기

최근 다크모드와 라이트모드를 선택해서 볼 수 있도록 사이트를 개편하면서 느낀 점입니다. 
기존에 사이트는 하얀색 페이지였기 때문에 글을 쓸 때 강조하고 싶은 문장에 에디터의 색상 툴을 이용해서 글자의 색상을 변경해서 작성해왔습니다. 그런데 다크 모드에서 보니 그 때 지정한 색상이 눈이 아프더라고요.
저의 사례처럼 에디터 툴에서 색상을 지정하면 <span> 태그가 추가되기 때문에 사이트 스타일이 바뀌어도 기존에 지정한 색상이 적용된 상태로 출력되어 사이트의 스타일에 어울리지 않거나, 글자가 아예 보이지 않을 수도 있습니다.
예를 들어 에디터에서 색상 툴을 이용해 진한 회색으로 글자 색상을 지정했는데 다크모드는 페이지 바탕이 진한 색이니 글자가 안 보이게 되는 상황이 있을 수 있는 것입니다.

 

그래서 저는 스타일 시트에서 지정해 주는 방식으로 바꾸었습니다.
제목 색상, 강조 색상 1, 강조 색상 2, 그레이 색상의 class를 만들고 색상을 지정해 주는 것입니다.

 

예시 )

h3 {color : #ff5656;}

이렇게 하면 차후 사이트의 디자인이 변경되어도 스타일 시트에서 색상값만 변경하여 사용할 수 있기 때문에 작성했던 글의 글자 색상을 일일이 수정하지 않아도 됩니다.

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 최종 글 조회 수
0
normal
  27
+1
normal
  32
0
normal
  32
+1
image
  166
+1
image
  187
+1
normal
  287
+1
image
  181
+1
image
  152
0
normal
  142
0
normal
  173
+1
normal
  698
+1
normal
  155
+1
normal
  298
+1
image
  180
+1
normal
  228
+1
normal
  185
+1
normal
  209
+2
image
  391
0
normal
  502
+2
image
  161