두 섹션 사이에 간격을 주는 방법 2가지

Photo of author

By know

두 섹션 사이에 간격을 주는 방법으로 2가지를 생각해 봅니다. 아래 코드에서 .spacer 클래스를 통해 두 섹션 사이에 40px의 여백을 설정했습니다. h2 태그에도 상단 간격을 추가하여 보다 깔끔한 레이아웃을 만들 수 있습니다. margin 값을 조정하면서 원하는 간격을 설정할 수 있습니다.

두 섹션 사이에 간격을 주는 방법 2가지

두 섹션 사이에 간격 .space 마진 주기

아래 코드 예를 보면 마진을 적당히 둬 두 섹션 사이의 간격을 조절 할 수 있습니다.

<style>
  .spacer {
    margin-bottom: 40px; /* 두 섹션 사이의 간격 조절 */
  }
</style>

<!-- 두 섹션 사이의 간격을 위한 CSS 적용 -->
<div class="spacer"></div>

타이트 태그(h1, h2)에 마진 주기

문단에 글을 작성 중 타이틀 태그가 너무 위와 문장과 붙어 있다면 아래와 같이 타이틀 태그에 적당한 마진을 주면 된다.

<style>
  h2 {
    margin-top: 40px; /* 제목과 상단 콘텐츠 간격 */
  }
</style>

문장을 작성하다가 특정 단어나 짧은 문장을 강조할 때, 형광펜 효과를 나타내고 싶다며 여기를 참고하세요.

위 글은 블로그의 ‘web‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.

함께보면 유용한 글


링크줄이기 URL 단축 사이트 – 국내 10개 사이트

링크줄이기 또는 url 단축 사이트는 인터넷을 이용하거나 인터넷 마케팅에 많이 활용합니다. 이번 포스팅에서는 국내에서 운영되고 있는 단축URL 사이트를 정리해 보았습니다. 이번 포스팅에서 다루지 않은 사이트는 ... Read more

Long tail 키워드를 활용한 블로그 제목 5개 추천

오늘은 블로그 운영에 정말 중요한 “Long tail 키워드”에 대해 이야기해 보려고 합니다. 네이버 블로그, 티스토리 블로그, 그리고 이곳 워드프레스 블로그까지 블로그를 시작한 지 벌써 수년이 ... Read more

워드프레스 블로그 장점 5가지 vs 티스토리 블로그

워드프레스 블로그 선택 이유 워드프레스 블로그 장점을 말하기 전에 왜 선택했는지 한마디로 말하자면, 티스토리의 애드센스 수익 감소로 인해 워드프레스로 이동한 이유입니다. 한국에서는 티스토리가 대표적인 수익형 ... Read more