🍽️

요소를 내 입맛대로 커스터마이징하기

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

1. CSS란?

2. 요소 커스터마이징

1. CSS란?

웹 페이지는 크게 (1) HTML, (2) CSS와 (3) JS로 구성됩니다. 각각은 (1) 페이지의 뼈대, (2) 페이지의 스타일와 (3) 페이지의 동작을 관리합니다. 사람의 몸으로 비유하자면, HTML은 뼈를, CSS는 옷을, JS는 뇌라고 생각하시면 됩니다.

출처 : 1training blog

버블에서 요소를 생성하고, 설정 창에서 다양한 스타일을 지정할 수 있습니다. 여기서 지정한 값들이 모두 CSS 영역으로 반영이 됩니다. 예를 들어 현재 폰트의 컬러는 #FFFFFF로 설정했습니다. 그러면 폰트의 컬러를 설정하는 CSS 값에 “#FFFFF”이 적용되는 방식입니다.

CSS로 적용할 수 있는 스타일은 무궁무진하며, 버블의 요소 설정 창에서 제공하지 않는 스타일 설정 값들도 많습니다.

2. 요소 커스터마이징

생성한 요소에 나만의 매력적이고 자유도 높은 스타일을 적용하고 싶다면, CSS 코드를 적용하면 됩니다. 전반적인 프로세스는 아래와 같습니다.

요소의 ID Attribute 기능을 활성화

타겟 요소에 고유한 Id 값 부여

HTML 요소를 생성하고, Id 값을 활용해 타겟 요소 호출

커스터마이징 스타일을 CSS 코드로 입력

1. 요소의 ID Attribute 기능을 활성화

HTML에서 각 태그(a.k.a 요소)는 속성 값을 지니는데, 여기서 Id 속성도 존재합니다. 예를 들어 아래 버튼 태그는 클래스 속성을 지녔고, 속성 값은 “clickable-element bubble-element Button baTaNdaA”입니다. 스타일을 적용할 요소는 이러한 속성 값들을 활용해서 찾습니다.

하지만, 버블이 자동 설정하는 불규칙 속성 값을 사용하기엔 안전성이 떨어집니다. 다행히도 버블에서는 자신이 생성한 요소에 원하는 Id 속성 값을 부여할 수 있는 기능이 있습니다. 즉, 타겟 요소에 고유한 Id 값을 부여하고, 이를 활용해 커스터마이징 스타일을 적용하면 됩니다.

버블에서 별도 설정을 하면, 자신이 생성한 요소에 id 값을 지정할 수 있습니다. [Settings] > [General]로 이동하고 맨 밑으로 스크롤을 합니다

그러면 [Advanced options] 섹션에서 [Expose the option to add an ID attribute to HTML elements]가 있습니다. 이를 활성화합니다.

2. 타겟 요소에 고유한 Id 값 부여

이제 요소를 생성하고 설정 창을 켜보면, [Appearance] 탭의 최하단에 [ID Attribute]가 보이기 시작합니다. 여기에 타겟 요소 고유 id 값을 입력합니다. 아래를 보면, 팝업 요소에 “popup_to_bottomSheet”라는 Id 값을 부여했습니다. 주의할 점으로 id 값을 입력할 때, 공백을 사용하면 안 됩니다.

3. HTML 요소를 생성하고, Id 값을 활용해 타겟 요소 호출

이제 [HTML] 요소를 페이지에 생성합니다. 그러면 HTML 코드를 입력할 수 있습니다.

여기에 아래처럼 입력합니다. 이는 <style>과 </style> 사이에 CSS 코드를 추가하겠다는 의미입니다.

<style>

</style>
HTML
복사

사이 공간에 #{타겟 요소의 Id 값}을 입력하면, 해당 Id 값을 지닌 요소를 불러올 수 있습니다. 예를 들어, 앞서 다룬 팝업을 호출하고 싶다면, #popup_to_bottomSheet 를 입력하면 됩니다.

<style>
 #popup_to_bottomSheet
</style>
HTML
복사

4. 커스터마이징 스타일을 CSS 코드로 입력

이제 호출한 요소의 뒤에 CSS 코드를 아래처럼 입력하면 됩니다. 그러면 해당 요소에 커스튬한 스타일이 적용됩니다.

<style>
 #popup_to_bottomSheet {
      width: 100% !important; 
      max-width: unset !important; 
      bottom: 0px !important; 
      inset: auto auto 0 0 !important;
 }
</style>
HTML
복사