본문 바로가기
카테고리 없음

블로그를 통해 공부하는 HTML 태그와 CSS 스타일

by moment-love 2025. 1. 20.

블로그를 통해 공부하는 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로 변경할 수 있습니다.

  • 본문 변경 : Ctrl + Alt + 2
    • 본문 1 ~ 3 : Ctrl + Alt + 2
      • 단축키를 한번 누르면 본문 1로, 두 번 누르면 본문 2로, 세 번 누르면 본문 3으로 변경되며,
        다시 한번 누르면 본문 1로 변경할 수 있습니다.

 

2. HTML 태그와 CSS 스타일 활용하기

 

HTML 태그는 블로그 글을 꾸미는 데 중요한 역할을 합니다.

 

이번 글에서는 기본적인 단축키를 소개하면서 <li>, <ul>, <ol> 태그도 같이 사용되었습니다.

  • <--  지금 이 기능!
    • 저희가 자주 사용하는 이 기능은 HTML 태그 중 목록을 표시할 때 사용되는 태그입니다.
    • 순서가 없는 목록을 표시할 때는 <ul> 태그를
    • 순서가 있는 목록을 만들 때는 <ol> 태그를
    • 각 목록에 작성하는 데이터 즉 항목은 <li> 태그로 각 항목을 나열할 수 있습니다.

 

 

이러한 기본적인 HTML 태그들을 사용하면 블로그 글을 더 구조적으로 정리할 수 있습니다.

스타일을 추가할 때는 **text-align: center;**와 같은 CSS를 사용해 가운데 정렬을 구현하여 가독성을 높일 수 있습니다.

 

 

<li>, <ul>, <ol> 태그를 사용하면 제목, 본문으로 설정이 기본 제공기능으로는 변경하기 어렵습니다.

<li>, <ul>, <ol> 태그는 목록 (List)을 작성할 때 사용되는 HTML 태그입니다.

 

특히, 순서가 없는 목록을 나타낼 때는 <ul> 태그를

 

순서가 있는 목록을 나타낼 때는 <ol> 태그를

 

이들 목록에 표기하는 데이터를 나타낼 때는 <li> 태그를 사용합니다.

 

 

이번 글에선 태그에 익숙해지기 위해 어떤 차이가 있는지만 봐주시면 됩니다.

아래의 예는 HTML 편집기를 사용하여 가운데 정렬을 설정한 것입니다.

<div style="text-align: center;">
    <h2>순서가 있는 목록 (Ordered List)</h2>
    <ol style="list-style-position: inside; display: inline-block; text-align: left;">
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
    </ol>

    <h2>순서가 없는 목록 (Unordered List)</h2>
    <ul style="list-style-position: inside; display: inline-block; text-align: left;">
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
    </ul>
</div>

순서가 있는 목록 (Ordered List)

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

순서가 없는 목록 (Unordered List)

    • 첫 번째 항목
    • 두 번째 항목
    • 세 번째 항목

3. CSS 스타일로 텍스트 스타일링하기

 

글 작성 시, 텍스트의 스타일을 설정하는 CSS는 매우 중요합니다.

예를 들어, font-family 속성을 사용하여 서체를 변경하거나, font-size를 통해 텍스트의 크기를 조절할 수 있습니다.

또한 color: 색상을 통해 글자색, 배경색을 변경할 수 있습니다.

 

자주 사용하는 기본 서체 변경과 글자 색 변경, 배경색 변경에는 각각의 HTML 태그를 활용하여,

글을 작성하는 모든 분들이 직접 변경하여 자신만의 글을 표현할 수 있습니다.

 

CSS 코드와 스타일은 블로그 글을 더 다채롭게 꾸미는 데 큰 도움이 되며,

단축키 소개와, 각 태그 소개를 끝낸 후 CSS 스타일에 대한 더 자세한 정보와 활용 방법을 소개할 예정입니다.

 

 

 

결론 : 블로그를 통해 HTML 태그와 CSS 스타일에 익숙해지기

 

이번 글에서는 티스토리 블로그에서 제공하는 단축키와 HTML 태그에 대해 소개했습니다.

단축키를 활용하면 글 작성과 편집을 더욱 효율적으로 할 수 있으며,

HTML 태그와 CSS를 적절히 사용하면 글의 구조와 스타일을 개선할 수 있습니다.

 

저도 이번에 소개한 내용들을 바탕으로 블로그 글을 더욱 매력적이고 읽기 좋은 형태로 작성해보려고 합니다.

CSS 스타일에 대한 자세한 내용은 다음 글에서 다룰 예정이니 많은 기대 부탁드립니다!

 

 

 

반응형