🧑‍🎨

텍스트 요소에 여러 스타일링 적용하기

중요 공지

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

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

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

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

https://nocoders.kr/

1. 텍스트에서 일부분만 스타일을 변경하는 방법

2. bb code란?

3. 나도 한 번 써보자! bbcode!

4. 동시에 여러 스타일 적용하기

1. 텍스트에서 일부분만 스타일을 변경하는 방법

버블에서 텍스트 요소를 활용해 글을 보여줍니다. 이때, 글 중간에 볼드체를 적용하거나 색을 적용하려면 어떻게 해야 할까요?

가장 먼저 떠오르는 방식으로 텍스트 요소를 여러 개 만들고, 각 요소마다 별도의 설정을 적용할 겁니다.

하지만, 이와 같은 방식은 불편하고 번거롭습니다. 요소를 하나하나 만들어 설정하고, 그룹 요소로 묶어서 정렬하고… bb code를 안다면, 더 쉽게 글 중간 부분에 다른 스타일을 적용할 수 있습니다. 눈치 빠른 분들이라면, 텍스트 요소에서 bb code라는 단어를 본 기억이 있을 겁니다. [appearance] 탭을 보면, [Do not apply bb-code]가 떡하니 보입니다.

bb code는 필수적으로 알아야 하는 개념은 아니지만, 제대로 배워둔다면 텍스트를 스타일링할 때 요긴하게 써먹을 수 있습니다.

2. bb code란?

bb code는 “Bulletin Board Code”입니다. bb code는 마크업 언어의 일종으로 HTML의 일부 기능만을 제공합니다. 단, HTML에서 <> 를 사용하는 반면, bb code는 [ ]를 사용합니다. 사용 방법이 완전히 다르기에, HTML과 bb code가 섞일 일은 거의 없습니다. 예를 들어 글씨를 굵게 만들고 싶은 경우, 다음처럼 사용됩니다.

•

HTML 태그 → <b> 글 </b> 

•

bb code → [b] 글 [/b]

버블의 텍스트 요소에 bb code를 입력해 사용할 수 있습니다. 다음 이미지를 보면 “여기서 [b]→볼드체←[/b]를 어떻게 쓸까요?”를 작성했고, 에디터에서 [b]→볼드체←[/b] 부분만 굵게 표시된 걸 볼 수 있습니다,

bbcode를 사용하면, 하나의 텍스트 요소에 존재하는 글을 다양하게 나타낼 수 있습니다. 아래를 보면, 텍스트 요소에 3개의 bbcode를 활용해 3개의 스타일을 각 부분에 적용했습니다.

•

[color=#0060EF]궁금한 걸 알려주는[/color]

•

[b]버블박스[/b]

•

[i]완전 럭키비키자나 [/i]

bbcode를 쓰고 싶지 않다면 [Do not apply bb-code]를 활성화하면 됩니다. 그러면 입력한 태그가 텍스트 내용으로 입력됩니다.

3. 나도 한 번 써보자! bbcode!

bbcode는 [태그]글자[/태그] 형식으로 입력해 사용합니다. 어떤 태그를 쓰느냐에 따라서 글자에 적용되는 스타일이 달라집니다. 태그는 아래와 같으며, 알아두면 요긴한 태그는 을 표기했습니다.

	스타일	태그
	굵은 글씨	[b] 버블박스 최고! [/b]
	기울임 글씨	[i] 버블박스 최고! [/i]
	밑줄 글씨	[u] 버블박스 최고! [/u]
	가로줄 글씨	[s] 버블박스 최고! [/s]
	링크	[url=https://bubblebox.kr] 버블박스 최고! [/url]
	인용	[quote] 버블박스 최고! [/quote]
	코드	[code] 버블박스 최고! [/code]
	사이즈 조절 글씨	[size=24] 버블박스 최고! [/size]
	컬러 글씨	[color=#0060EF] 버블박스 최고! [/color]

bbcode를 작성한 부분은 속성 에디터에 설정한 값보다 높은 우선순위로 적용됩니다. 예를 들어, 텍스트 요소의 폰트 사이즈를 14px로 지정했습니다. 하지만, bbcode로 [size=24][/size]를 입력하면, 24px의 폰트 사이즈가 적용됩니다.

4. 동시에 여러 스타일 적용하기

bbcode로 스타일링을 할 때, 하나의 글자에 여러 태그를 적용할 수 있습니다. 간단히 글자를 감싸는 태그를 계속 추가하면 됩니다. 아래를 보면 “사랑해요 버블박스!”라는 문구에 [size=24],[color=#0060EF], [b] 태그가 존재합니다. 3개의 태그가 해당 문구에 모두 적용됐습니다.

이처럼 버블에서는 생각보다 숨겨진 기능들이 많기에 모든 내용을 처음부터 알 수는 없습니다. 그래서 버블을 공부할 때, 기초 필수 개념만 익혀서 서비스를 빌드하다가, 모르는 부분을 발견했을 때 이를 찾아서 공부하는 게 더 효율적입니다. 버블박스에서 서비스를 빌드하는 데 필요한 개념과 방식을 꽉꽉 눌러담은 책을 집필하고 있습니다. 알림을 신청하면, 책 출간 시에 가장 빠르게 만나볼 수 있습니다.