웹 - wp in Korea

위와 같이 컨테이너 사이의 이미지 또는 텍스트를 CSS의 ::before 가상요소 선택자로 만드는 방법을 안내하겠습니다.

::before 가상요소 선택자

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  transform: translate(0, -50%);
  width: 20px; 
  height: 20px;
  background-image: url("주소"); 
  background-size: contain;
  background-position: center;
}

이미지, 아이콘, 텍스트를 가상요소 선택자를 활용하여 자유자재로 삽입할 수 있습니다.

워드프레스 또는 티스토리를 통해 블로그를 운영할 때 소제목 서식을 사용하면 시각적인 효과가 있고, 한 눈에 보기 쉬어 가독성이 향상 됩니다. 오늘 포스팅에서는 몇가지 추천드리는 소제목 디자인과 CSS 코드를 제공하겠습니다.

소제목 꾸미기

소제목 CSS 코드

소제목1

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; border-bottom: 4px #5B78FB solid;">소제목 1</h3>

소제목2

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5B78FB; border-bottom: 2px #5B78FB solid;">소제목 2</h3>

소제목3

<h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5b63fb;">소제목 3</h3>

소제목4

<div style="background-color: #EEF3FF; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
        <h3 style="border-left: #5B78FB 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em;">소제목 4</h3>
    </div>소제목 1</h3>

소제목5

<h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #EEF3FF; margin: 0.5em 0em; border-left: #5B78FB 10px solid;">소제목 5</h3>

소제목6

<h3 style="background: #EEF3FF; margin: 1em 0em; padding: 15px 20px; border-radius: 20px 0px 20px 0px;">소제목 6</h3>

소제목7

<h3 style="background: linear-gradient(to right, #7b2ff7 0%, #396afc 100%); color: #fff; font-size: 22px; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 1px 20px 1px;">소제목 7</h3>

마무리

상단의 이미지에 사용하실 소제목을 아래의 코드를 활용해 여러분의 블로그를 멋지게 꾸며보세요.

Bubble은 코딩 없이 베이스로 웹, 앱을 구축할 수 있는 인기있는 노코드 플랫폼입니다. 프로젝트 시작을 위해서 버블에서 기본 세팅하는 방법을 안내하겠습니다.

Bubble 기본 세팅

커스텀 폰트 설정

버블 에디터 페이지의 왼쪽 메뉴바에서 Settings > General 의 Custom fonts 섹션에서 폰트명과 CSS 파일 경로를 등록할 수 있습니다. 경로는 구글에서 폰트를 검색하여 그대로 복사하면 됩니다. 혹은 Settings > SEO/metatags의 HTML 헤더 섹션에 <link>태그를 추가하여 구글 폰트 등과 같은 웹폰트를 설치할 수 있습니다.

Style > Style variables 에서 Fonts를 위에서 등록한 커스텀 폰트명으로 지정합니다.

컬러 설정

Style > Style variables 에서 Colors 섹션에서 색상을 설정할 수 있습니다.

SEO 설정

Settings > SEO/metatags에서 각 페이지마다의 제목과 메타 설명글, 검색엔진 사이트 등록시의 메타태그 코드를 설정할 수 있습니다.

마무리

이러한 기본 설정은 Bubble 프로젝트의 사용자 경험을 향상하고 검색엔진 노출을 극대화하는데 필수적입니다.

웹사이트를 제작할 때 html 특수기호 삽입이 필요한 경우 특수기호 모음 제공 사이트를 통해 빠르게 찾고, 복사하여 사용할 수 있습니다. 이 글에서는 사이트를 안내하겠습니다.

html 특수기호 모음 사이트

구글에서 html entity를 검색하여 위의 사이트에 들어갑니다.

원하는 기호를 찾아 복사하여 사용하면 됩니다. 아이콘 이미지를 그대로 사용하여 Html 편집기에 복사해도 됩니다.