스타일링 기초 완벽 가이드 (색상, 타이포그래피, 배경 설정)

엘리멘터 좌측 패널 상단을 보면 항상 세 개의 탭이 존재합니다.

1. 내용 탭 (이전 버전에서는 콘텐츠 Content): 글을 쓰고, 이미지를 고르고, 링크를 거는 곳 (레슨 4, 5에서 배움)

2. 스타일 탭 (Style): 색칠하고, 폰트를 바꾸고, 꾸미는 곳 (오늘 배울 곳 ⭐️)

3. 고급 탭 (Advanced): 여백을 맞추고, 애니메이션을 넣는 곳 (다음 레슨 예정)

캔버스에 앞서 만들어둔 ‘제목(Heading)’ 위젯을 클릭한 후, 좌측 패널 상단의 [스타일] 탭을 눌러주세요.

1. 텍스트 색상 (Text Color) 변경하기

가장 기본이 되는 색상 변경입니다.

• 방법: [스타일] 탭의 ‘텍스트 색상’ 옆에 있는 색상표(Color Picker)를 클릭합니다.

• 팔레트 조작: 마우스로 드래그하여 원하는 색상과 투명도(Opacity)를 직관적으로 조절할 수 있습니다.

• HEX 코드: 회사나 브랜드의 고유 색상이 있다면 하단에 #FF0000 같은 6자리 HEX 코드를 직접 입력하여 정확한 색을 맞출 수 있습니다.

• 기능 설명: 지구본 아이콘 (전역 색상): 지구본 아이콘을 누르면 미리 테마에 세팅된 기본 색상(Primary, Secondary 등)을 원클릭으로 불러올 수 있습니다. 일관된 디자인을 위해 실무에서 가장 많이 쓰는 기능입니다. 전역 설정(사이트 전체에 대한 설정)에 관한 내용은 중급편에서 다루겠습니다.

2. 타이포그래피 (Typography) 완벽 제어

글꼴 하나만 바꿔도 웹사이트의 분위기가 180도 달라집니다. 타이포그래피 옆의 **’연필 아이콘’**을 클릭해 보세요.

• 패밀 (폰트 패밀리, 서체 Family): 수백 개의 구글 폰트(Google Fonts)가 무료로 내장되어 있습니다. 한글 폰트인 ‘Noto Sans KR’이나 ‘Gowun Dodum’ 등을 검색해서 적용해 보세요.

• 크기 (Size): 글자의 크기를 조절합니다. PC에서는 크게, 모바일에서는 작게 설정할 수 있습니다.

• 굵기 (폰트 두께 Weight): 100(가장 얇음)부터 900(가장 두꺼움)까지, 혹은 Bold, Normal 등으로 글씨의 굵기를 세밀하게 조절합니다. 다만, 폰트가 각각의 굵기를 지원해야 반영이 됩니다. 일부 폰트는 100, 200, 800, 900 등이 지원되지 않는 경우가 많고 지나치게 가늘거나 굵어서 가독성이 떨어지는 경향이 있으므로 한글 폰트의 경우 300, 기본(400), 500, 700 정도를 많이 사용합니다.

• 선 높이 (줄 높이 Line-Height): 줄과 줄 사이의 간격입니다. 가독성에 엄청난 영향을 미칩니다. 보통 글자 크기의 1.5배 ~ 1.6배(예: 1.5em)를 주면 가장 읽기 편안합니다. 큰 글씨는 1.8배 정도 필요한 경우도 있습니다.

• 글자 간격 (자간 Letter Spacing): 글자와 글자 사이의 간격입니다. 제목과 같이 큰 글씨의 경우 자간을 약간 좁게(예: -0.5px) 해주면 훨씬 세련되어 보입니다. 아주 작은 글씨(10~12px)의 경우 자간을 넓혀주면 약간 고급스럽게 보입니다.

3. 배경 (Background) 설정: 웹사이트의 분위기 메이커

위젯 자체에 배경을 넣을 수도 있지만, 보통은 넓은 ‘컨테이너(Container)’ 단위에 배경을 적용하여 웅장한 느낌을 줍니다. 캔버스에서 부모 컨테이너(가장 큰 상자)의 점 6개 버튼을 누르고 [스타일] -> [배경]으로 이동합니다.

배경 타입에는 4가지가 있습니다.

1. 클래식 (단색/이미지): 단일 색상을 칠하거나 사진을 깝니다.

2. 그레이디언트 (Gradient): 두 가지 색상이 자연스럽게 섞이는 효과를 줍니다.

3. 동영상 (Video): 유튜브 링크나 MP4 파일을 넣어 배경에서 영상이 자동 재생되게 합니다.

4. 슬라이드쇼: 여러 장의 사진이 페이드(Fade) 효과와 함께 넘어갑니다.

⭐ 시니어의 실무 팁 (배경 이미지 완벽 세팅 공식): ‘클래식’에서 배경 이미지를 넣었다면, 위의 화면처럼 사진이 잘리거나 반복되어 지저분해 보일 수 있습니다. 실무에서는 이미지를 넣은 후 무조건 아래 3가지 옵션을 세팅합니다. (외워두셔도 좋습니다!)

• 위치 (Position): 정중앙 (가운데 중앙 Center Center) -> 사진의 핵심인 정중앙이 보이도록 함

• 반복 (Repeat): 반복 없음 (No-repeat) -> 바둑판처럼 사진이 여러 장 깔리는 것을 방지함

• 표시 크기 (Size): 덮기 (Cover) -> 컨테이너 크기에 맞춰 사진의 비율을 유지하며 빈틈없이 꽉 채움, 포함은 사진이 모두 표시되도록 하기 때문에 컨테이너가 사진보다 큰 경우 빈 공간이 보이므로 잘 사용하지 않습니다.

4. 배경 오버레이 (Background Overlay): 글씨를 선명하게!

배경에 화려한 사진을 깔았더니, 그 위에 적어둔 흰색 글씨가 안 보여서 당황하신 적 있으시죠? 이때 사용하는 필살기가 바로 **’배경 오버레이’**입니다.

• [스타일] 탭에서 [배경] 바로 아래에 있는 [배경 오버레이] 메뉴를 엽니다.
• 배경 타입에서 색상을 ‘검은색(#000000)’으로 선택하고, 불투명도(Opacity)를 0.5 정도로 줍니다.
• 화려했던 배경 사진 위에 얇은 검은색 셀로판지를 덮은 것처럼 사진이 어두워지면서, 그 위에 있는 텍스트가 마법처럼 선명하게 보이게 됩니다!
• 검은 글씨가 안보일 경우에는 흰색 오버레이를 주고 불투명도를 조절하여 배경과 글씨가 잘 보이게 하면 됩니다.
• 또한 텍스트 그림자 효과를 잘 이용하면 좋은데 이 부분은 중급편에서 설명하기로 하겠습니다.

정말 훌륭합니다! 이제 여러분은 단순한 뼈대를 넘어, 색을 입히고 글꼴을 다듬고 멋진 배경 이미지까지 통제할 수 있는 어엿한 ‘디자이너’의 첫발을 내디뎠습니다.

하지만 무언가 아쉬울 겁니다. “글씨와 테두리 사이가 너무 답답해요”, “버튼과 이미지 사이의 간격을 내 맘대로 더 세밀하게 띄우고 싶어요.”라는 생각이 드실 텐데요.

다음 [레슨 7]에서는 초보와 프로를 가르는 결정적인 차이! 웹 디자인의 꽃이자 핵심인 ‘여백의 미학: 마진(Margin)과 패딩(Padding)’의 개념을 완벽하게 파헤쳐 보겠습니다.