블로그를 통해 공부하는 HTML 태그와 CSS 스타일 적용
이번 글에서는 제목 변경, 본문 변경, 기본 서체 변경, 굵은 텍스트, 글꼴 변경, 색상 조정 등
스타일링 단축키를 다루며, HTML 태그와 CSS 속성이 어떻게 작동하는지 살펴보겠습니다.
그리고 자주 사용하는 기능들이 HTML에서 어떠한 태그로 사용되는지,
이번 글을 통해 간단한 HTML과 CSS를 배우고 활용하여 블로그 경험을 크게 향상할 수 있을 것이라고 생각합니다.
이 글을 읽어주시는 분들께서도 유용한 단축키가 있다면 댓글 부탁드립니다!
* 블로그를 통해 HTML 태그와 CSS 태그 공부하기 *
티스토리 블로그에서 글쓰기에 우측 상단을 보시면
기본모드 라고 되어있는 것을 확인할 수 있습니다.
이를 클릭하여 HTML로 변경하시면 사용된 태그를 확인하실 수 있습니다.
이를 통해 HTML 태그에 조금 더 익숙해질 수 있을 겁니다!
1. 티스토리 블로그 기본 단축키 활용
티스토리에서 제공하는 기본 단축키는 글 작성과 편집을 훨씬 빠르고 효율적으로 만들어 줍니다.
주요 단축키는 다음과 같습니다.
이번 글에선 제목 변경부터 배경색 변경까지 알아보겠습니다.
- 단축키 보기 : Ctrl + /
- 굵게 : Ctrl + B
- 기울임 꼴: Ctrl + I
- 밑줄 : Ctrl + U
취소선: Ctrl + Alt + J- 서체 변경 : Ctrl + Alt + T
- 글자색 변경 : Ctrl + Alt + [
- 배경색 변경 : Ctrl + Alt + ]
- 제목 변경 : Ctrl + Alt + 1
- 제목 1 ~ 3 : Ctrl + Alt + 1
- 단축키를 한 번 누르면 제목 1로, 두 번 누르면 제목 2로, 세 번 누르면 제목 3으로 변경되며,
다시 한번 누르면 제목 1로 변경할 수 있습니다.
- 단축키를 한 번 누르면 제목 1로, 두 번 누르면 제목 2로, 세 번 누르면 제목 3으로 변경되며,
- 제목 1 ~ 3 : Ctrl + Alt + 1
- 본문 변경 : Ctrl + Alt + 2
- 본문 1 ~ 3 : Ctrl + Alt + 2
- 단축키를 한 번 누르면 본문 1로, 두 번 누르면 본문 2로, 세 번 누르면 본문 3으로 변경되며,
다시 한번 누르면 본문 1로 변경할 수 있습니다.
- 단축키를 한 번 누르면 본문 1로, 두 번 누르면 본문 2로, 세 번 누르면 본문 3으로 변경되며,
- 본문 1 ~ 3 : Ctrl + Alt + 2
티스토리 블로그를 기준으로 순서대로 각 태그도 알아보겠습니다.
1. 제목 변경 : Ctrl + Alt + 1
제목 1
<h2>제목 2
<h3>제목 3
<h4>
태그 설명
<h> 태그는 HTML 헤딩 태그로, 문서의 제목이나 부제목을 나타냅니다.
<h1>부터 <h6>까지 있으며,
<h1>은 가장 큰 제목, <h6>은 가장 작은 제목을 나타냅니다.
제목 1, 제목 2, 제목 3 은 각각 크기가 다른 태그란 것을 알 수 있습니다.
2. 본문 변경 : Ctrl + Alt + 2
본문 1
<style="font-size: 18px;">큰 글씨 (대체로 제목 또는 강조된 본문에 사용)
본문 2
<style="font-size: 16px;">보통 크기 (일반 본문에 자주 사용)
본문 3
<style="font-size: 14px;">작은 글씨 (각주나 덧붙이는 글)
태그 설명
CSS를 통해 텍스트의 크기를 지정하는 속성입니다.
크기를 픽셀(px), 상대 단위(em, %), 또는 절대 단위(small, large)로 설정할 수 있습니다.
단위의 의미
px : 픽셀 단위로 고정 크기를 지정.
em : 상대 크기로, 부모 요소의 글꼴 크기에 비례.
% : 상대 크기로, 부모 요소의 글꼴 크기를 기준으로 백분율로 지정.
3. 기본 서체 변경: Ctrl + Alt + T
기본 서체가 적용된 텍스트
<span style="font-family: 'Arial';">기본 서체가 적용된 텍스트</span>
궁서체 글꼴이 적용된 텍스트
<style="font-family: 'GungSeo', serif;">
serif 글꼴이 적용된 텍스트
<style="font-family: serif;">
태그 설명
font-family 속성은 글꼴 스타일(폰트)을 지정하는 역할을 합니다.
HTML 태그 사용법 : style="font-family: '글꼴 이름';"
만약 첫 번째 지정된 글꼴이 없으면 두 번째 글꼴로 대체됩니다.
위를 예로 들면 궁서체 글꼴이 적용되지 않으면 serif 글꼴이 적용됩니다.
활용 예시 : 콘텐츠 분위기에 맞는 서체를 설정하여 읽기 좋은 디자인을 구현할 때 사용합니다.
Tip : 여러 글꼴을 쉼표로 구분해 설정하면, 지정된 글꼴이 없을 경우 대체 글꼴이 적용됩니다.
4. 굵게: Ctrl + B
굵게 표시된 텍스트
<strong>굵게 표시된 텍스트</strong>
태그 설명
선택한 텍스트를 굵게 표시하는 단축키입니다.
HTML 태그 사용법 : <strong> 또는 <b>
활용 예시 : 중요한 키워드나 메시지를 강조할 때 사용합니다.
5. 기울임 꼴: Ctrl + I
<em>기울임꼴 텍스트1</em>
<i>기울임꼴 텍스트2</i>
태그 설명
텍스트를 기울임 꼴로 표시합니다.
HTML 태그 사용법 : <em> 또는 <i>
활용 예시: 외국어 단어, 인용문, 또는 부드러운 강조를 표현할 때 유용합니다.
6. 밑줄: Ctrl + U
<u>밑줄이 그어진 텍스트</u>
태그 설명
텍스트에 밑줄을 추가합니다.
HTML 태그 사용법 : <u>
활용 예시: 강조하거나 링크 텍스트를 표시할 때 사용됩니다.
7. 취소선: Ctrl + Alt + J
<s>취소선 표시된 텍스트1</s>
<del>취소선 표시된 텍스트2</del>
태그 설명
텍스트에 취소선을 추가합니다.
HTML 태그 사용법 : <s> 또는 <del>
활용 예시: 수정되거나 삭제된 내용을 표시하거나 과거 내용을 강조할 때 적합합니다.
8. 글자색 변경: Ctrl + Alt + [
<span style="color: blue;">파란색 텍스트</span>
태그 설명
텍스트의 글자색을 변경합니다.
HTML 태그 사용법 : style="color: 색상;"
활용 예시: 텍스트를 시각적으로 강조하거나 카테고리별로 구분할 때 활용됩니다.
Tip: HTML 태그에서 색상을 지정할 때는 색상 이름, HEX 코드(#0000 FF), 또는 RGB 값을 사용할 수 있습니다.
9. 배경색 변경: Ctrl + Alt + ]
<span style="background-color: yellow;">배경색이 노란색인 텍스트</span>
태그 설명
텍스트의 배경색을 변경합니다.
HTML 태그 사용법 : style="background-color: 색상;"
활용 예시: 메모를 강조하거나 중요한 메시지를 시각적으로 돋보이게 할 때 사용됩니다.
결론 : HTML 편집을 통해 직접 코드를 확인하며 성장하기
단축키들은 글의 스타일을 빠르게 조정하고, 강조하고 싶은 부분을 쉽게 표현할 수 있도록 도와줍니다.
이때 단축키를 사용하면서 HTML과 CSS를 이해하면 자신만의 글을 작성하며 자신만의 블로그를 표현할 수 있습니다.
제목 구조화부터 텍스트 스타일링과 색상 실험까지,
이러한 기술은 워크플로우를 단순화하고 콘텐츠를 더욱 생동감 있게 만들어 줍니다.
오늘부터 이 팁을 적용해 보고 블로그 작성 경험의 변화를 느껴보시기 바랍니다.
그리고 여러분만의 즐겨 쓰는 단축키나 팁이 있다면 아래 댓글로 공유부탁드립니다.