블로그를 통해 공부하는 HTML 태그와 CSS 스타일 적용 2
블로그를 통해 공부하는 HTML 태그와 CSS 스타일
이번엔 저번 글에 이어서 정렬부터 인용, 링크 삽입, 리스트(목록), 구분선 추가, 코드 블록, 특수 문자를
더 효율적으로 사용할 수 있는 단축키와 각 단축키에 대한 HTML 태그, CSS style 적용에 대해서 알아보겠습니다.
블로그를 운영하며 글을 작성할 때, 효율적이면서도 높은 품질의 콘텐츠를 생성하는 방법을 고민하게 됩니다.
단축키를 활용하면 글쓰기 속도를 높이고, 콘텐츠 스타일을 바꿔 보는 것도 좋은 경험입니다.
이번 글에서는 인용 변경, 목록 생성, 링크 삽입 등 잘 알려지지 않은 단축키 활용법을 소개하려고 합니다.
이 가이드를 통해 블로그 글쓰기 효율을 높이고, 자신만의 글을 작성해 보시길 바랍니다.
1. 티스토리 블로그 기본 단축키 활용
티스토리에서 제공하는 기본 단축키는 글 작성과 편집을 훨씬 빠르고 효율적으로 만들어 줍니다.
이번 글에서 알아볼 주요 단축키인 인용부터 배경색 변경까지 알아보겠습니다.
- 단축키 보기 : Ctrl + /
텍스트 정렬 : Ctrl + Alt + 5
인용 스타일 변경 : Ctrl + Alt + 3
- 링크 삽입/수정 : Ctrl + K
- 리스트(목록) : Ctrl + Alt + 4
- 리스트(목록) : Ctrl + Alt + 4
코드 블록 : Ctrl + Alt + ,
- 특수 문자 ☆: Ctrl + Alt +.
- 이모지😊 : Win +.
티스토리 블로그를 기준으로 순서대로 각 태그도 알아보겠습니다.
1. 텍스트 정렬 : Ctrl + Alt + 5
텍스트 정렬은 글의 가독성을 높이고, 독자의 시선을 효과적으로 이끌기 위한 필수 요소입니다.
Ctrl + Alt + 5 단축키를 사용해 왼쪽, 가운데, 오른쪽, 양쪽 정렬을 손쉽게 전환할 수 있습니다.
왼쪽 정렬
<div style="text-align: left;">이 문장은 왼쪽 정렬되었습니다.</div>
가운데 정렬
<div style="text-align: center;">이 문장은 가운데 정렬되었습니다.</div>
오른쪽 정렬
<div style="text-align: right;">이 문장은 오른쪽 정렬되었습니다.</div>
Ctrl + Alt + 5
이 단축키를 한 번 누르면 왼쪽 정렬,
두 번 누르면 가운데 정렬,
세 번 누르면 오른쪽 정렬,
네 번 누르면 양쪽 정렬이 됩니다.
이후 다시 단축키를 눌러 처음 값인 왼쪽 정렬로 되돌아갈 수 있습니다.
2. 인용 스타일 : Ctrl + Alt + 3
블로그에서 중요한 메시지를 강조하려면 인용 스타일이 매우 효과적입니다.
Ctrl + Alt + 3 단축키를 이용해 3가지 형태의 인용 스타일을 적용할 수 있습니다.
인용 예시 1
인용 예시 2
인용 예시 3
<blockquote>이 문장은 기본 인용 스타일입니다.</blockquote>
3. 링크 삽입/수정 : Ctrl + K
링크는 독자에게 추가 정보를 제공하는 기능입니다.
Ctrl + K 단축키로 빠르게 링크를 삽입하거나 수정할 수 있습니다
여기서는 제 블로그 주소로 넘어가는 것을 예로 들어보겠습니다.
링크 예시 : https://moment-love.tistory.com/
moment-love 님의 블로그
moment-love 님의 블로그 입니다.
moment-love.com
<a href="https://example.com" target="_blank">여기를 클릭하세요</a>
4. 리스트(목록) : Ctrl + Alt + 4
목록은 정보를 정리하고 가독성을 높이는 데 유용합니다.
Ctrl + Alt + 4 단축키로 3가지 형태의 목록(순서 있는 목록, 순서 없는 목록, 정의형 목록)을 작성할 수 있습니다.
순서 있는 목록 예시
<ol>
- <li>첫 번째 항목 </li>
- <li>두 번째 항목 </li>
</ol>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
순서 없는 목록 예시
<ul>
- <li>첫 번째 항목 </li>
- <li>두 번째 항목 </li>
</ul>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
5. 구분선 추가 : 구분선은 지정된 단축키가 없는 것 같습니다.
혹시 구분선 단축키를 아시는 분께선 댓글 부탁 드립니다!
구분선은 글의 구성을 명확히 하고, 섹션을 나눌 때 유용합니다.
이렇게 기본적으로 제공하는 구분선이 있습니다.
<hr>
6. 코드 블록 : Ctrl + Alt + ,
기술 블로그에서는 코드 블록이 중요한 요소입니다.
Ctrl + Alt + , 단축키를 활용해 깔끔한 코드 블록을 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>코드 블록 예시</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>Moment-Love 입니다.</p>
</body>
</html>HTML5 기본구조
위 코드는 HTML5 문서의 시작점으로, 다음과 같은 요소를 포함합니다:
<!DOCTYPE html>
HTML5 문서임을 선언합니다.
<html lang="en">
문서 언어를 설정합니다.
<meta charset="UTF-8">
문자의 인코딩을 UTF-8로 설정합니다.
<title>
문서의 제목을 설정합니다.
<body>
본문 콘텐츠를 포함합니다.
7. 특수 문자 : Ctrl + Alt + .
©, ™, ∞ 같은 특수 문자는 Ctrl + Alt + . , 단축키로 쉽게 삽입할 수 있습니다.
<pre><code>console.log('Hello, world!');</code></pre>
8. 다음 라인으로 넘어가는 방법 : SHIFT + ENTER
- 리스트(목록)를 사용할 때
- 이렇게 ENTER를 입력하면 다음 라인으로 넘어오게 됩니다.
이때 SHIFT + ENTER를 사용하면 다음 라인으로 넘어갈 수 있습니다!- 보시면 위 문장에는 리스트(목록) 아이콘인 가운데 점 · 이 보이지 않는 것을 확인하실 수 있습니다
- 보시면 위 문장에는 리스트(목록) 아이콘인 가운데 점 · 이 보이지 않는 것을 확인하실 수 있습니다
9. 리스트(목록)를 사용할 때 다음 라인은 들여 쓰기하고 싶을 경우 : TAB
+ 되돌리고 싶을 경우 : SHIFT + TAB
- 리스트(목록)를 사용할 때
- 이렇게 ENTER를 입력하면 다음 라인으로 넘어오게 됩니다.
- ENTER후에 TAB을 한번 입력하면 위 내용에 대한 세부 사항을 설명하듯 한, 연장되는 느낌을 줄 수 있습니다.
- 세부 사항 설명이 끝나면 다시 되돌아가야 합니다.
- SHIFT + TAB를 입력하면!
- 이렇게 첫 라인과 동일한 라인으로 되돌아갈 수 있습니다!
추가로 블로그 외에서도 사용할 수 있는 단축키!
10. 이모지 : Win + .
이모지를 활용 글에 활기를 더할 수 있습니다.
Win + . 단축키로 손쉽게 추가하실 수 있습니다.
(❁´◡`❁)
(●'◡'●)
😊
👍
😁
결론 : 단축키를 활용하여 글쓰기 효율을 향상하고 태그에 익숙해지자!
블로그 글쓰기에서 단축키를 활용하면 글쓰기 효율이 크게 향상됩니다.
단축키를 자주 사용하면서 손에 익숙해지면 글 작성 속도도 크게 향상될 것이며,
사용하고 있는 단축키에 대한 HTML 태그와, CSS 스타일을 직접 편집해 보면서
자신만의 글, 블로그, 더 나아가 웹까지 표현할 수 있다고 생각합니다.
제목 변경부터, 서체 변경, 글씨 스타일 설정, 정렬, 인용, 링크 삽입, 이모티콘 등
다양한 단축키를 활용해 블로그를 더욱 풍성하게 꾸며 보시기 바랍니다.
여러분의 경험이나 추가 단축키 팁이 있다면 댓글로 공유 부탁드립니다