모르면 손해. Webflow 조작이 10배 빨라지는 기초 지식

All HTML Tags(ALL 태그)

All HTML Tags(ALL 태그)는 Webflow에서 같은 요소 전체에 공통 기본값을 설정할 수 있는 태그입니다. CSS 클래스 지정으로 기본값을 설정하는 것에 해당하며, 일반 클래스(파란 태그)로 덮어쓸 수 있습니다.

안녕하세요, Webflow 전문가 마사토입니다. 이번에는 Webflow 조작에 관한 기초 지식을 소개합니다. 주요 내용은 다음과 같습니다.

• Webflow 조작의 기초①｜HTML의 위치
• Webflow 조작의 기초②｜CSS의 위치
• Webflow 조작의 기초③｜ALL 태그의 존재
• Webflow 조작의 기초④｜CSS 패널 색상의 의미

ALL 태그와 CSS 패널 색상의 의미를 모른 채 Webflow를 다루는 분들이 많으니 확실히 확인해 봅시다.

저는 Webflow 학습자를 직접 지도하고 조언하는 일을 정기적으로 하고 있습니다. 그중 특히 자주 나오는 “링크 색이 바뀌지 않아요”, “어디를 수정해야 할지 모르겠어요” 같은 질문은 이 글에서 모두 해결할 수 있습니다. 모르는 내용이 있을 것 같다면 그대로 읽어 나가세요.

유튜브를 시작해 보려고 영상을 찍었습니다. 촬영 초보라 보기 불편할 수 있지만 양해 부탁드립니다. “언젠가 촬영도 늘겠지” 하는 마음으로 시작한 스몰 스타트입니다.

Webflow 조작의 기초｜아이템 이름을 알아야 하는 이유

Webflow는 HTML, CSS, JavaScript 코드와 같은 이름을 그대로 UI에 사용합니다. 예를 들어 Div block, heading, margin, padding 등은 HTML·CSS 기초를 배운 적이 있다면 익숙한 단어입니다.

그 밖에도 많은 아이템(Elements)이 코드 그대로의 이름으로 사용됩니다. 덕분에 코드 내보내기 시의 결과물을 떠올리기 쉽고, 기존 웹 개발자에게도 친절한 설계입니다.

그렇다면 왜 Webflow 아이템의 이름을 아는 것이 중요할까요. 스스로 검색할 수 있게 되기 때문입니다.

예를 들어 Webflow로 사이트를 만들다가 “margin과 padding의 차이를 모르겠다”가 되면, Webflow에 대해 잘 아는 사람에게 물어보려 해도↓
주변에 Webflow를 아는 사람이 없고↓
공식 사이트에서 찾아보려니↓
영문이라 이해가 안 돼 좌초

이런 식으로 좌절하게 됩니다.

“blending” 사용법, “position:sticky” 사용법을 모르겠다는 분들이 많습니다. 하지만 이것들은 “CSS blending 사용법”, “CSS position:sticky 사용법”으로 검색하면 어떤 조건에서 동작하는지 알 수 있습니다.

HTML·CSS의 동작을 이해하면 그것을 Webflow에 적용해 구현할 수 있습니다. Webflow에서 모르는 것이 있으면 그 아이템의 이름을 그대로 검색해 보세요. 그렇게 하면 HTML·CSS의 기본 동작 대부분은 스스로 해결할 수 있습니다.

Webflow 조작의 기초｜HTML의 위치, CSS의 위치

HTML의 위치

여기서부터는 검색해도 Webflow 공식 문서에만 나오는 UI 이야기입니다. 먼저 어디가 HTML이고 어디가 CSS인지 알아 둡시다.

먼저 왼쪽 상단의 Add Elements“＋”를 클릭합니다. 그러면 HTML 아이템(Elements)이 나타납니다.

이것이 기본적으로 HTML입니다. 2024년 초에 업데이트된 “V Flex”, “H Flex” 등은 Webflow 오리지널입니다. 검색하면 Webflow 관련 글이 많이 나오므로 거기서 판단할 수 있습니다.

솔직히 저는 이 아이템들을 거의 쓰지 않습니다. 취향의 문제겠지만, 개인적으로는 초기 스타일이 없는 Div block이 더 편하다고 생각합니다.

다른 아이템은 모를 때마다 그때그때 찾아보면 됩니다. 기본적으로는 직관적으로 알 수 있습니다. 사실 저도 처음에는 HTML·CSS를 가볍게 배워 간단한 사이트 하나 만들 수 있는 정도까지만 공부했습니다. 나머지는 직관과 검색으로 해결됐으니, 같은 방법으로 독학·무료로 나아갈 수 있습니다.

CSS의 위치

다음은 CSS의 위치입니다. 아주 간단합니다. 화면 오른쪽이 대부분 CSS입니다.

CSS도 이름이 거의 그대로이므로 “이게 뭐지?” 싶은 기능은 모두 검색하면 나옵니다. 요즘은 GPT도 답해 줍니다. 이런 식으로↓

생각보다 제대로 나옵니다. 이제 해설이 필요 없을 정도네요.

Webflow 조작의 기초｜ALL 태그의 존재

“ALL 태그” — 저는 핑크 태그라고 부르지만 정식 명칭은 “All HTML Tags”입니다. CSS의 클래스 지정에서 각 요소의 기본값을 설정하는 행위와 같다고 생각하면 됩니다.

ALL 태그는 예를 들어 “H1” 아이템을 선택한 상태에서 CSS 패널 상단의 “Style Selector”를 빈 상태로 클릭하면 찾을 수 있습니다.

ALL 태그는 같은 요소 전체에 동일한 영향을 주지만 그 우선순위는 가장 아래에 위치합니다. (코드상으로는 가장 위 — 코드는 나중에 쓴 것이 덮어쓰기 때문)

따라서 핑크 태그의 내용은 파란 태그로 덮어쓸 수 있습니다. 파란 태그는 일반적인 CSS 클래스와 같은 의미입니다.

예를 들어 사이트 전체의 폰트를 바꾸고 싶다면 ALL 태그의 “body”를 선택해 폰트를 지정합니다. 이것을 일반 클래스(파란 태그)의 Body로 설정하면 다른 페이지를 만들 때 반영되지 않아 매번 다시 붙여넣게 됩니다.

ALL 태그와 파란 태그의 차이를 이해하셨나요. 여기서 제가 가장 많이 받는 질문을 소개합니다.

Q. 링크(Link)의 색이 바뀌지 않아요.

A. ALL 태그의 Link를 지정해 변경하세요.

Webflow는 어째서인지 Link 태그만 초기 색상이 지정되지 않은 상태입니다. 그런데 삽입한 링크는 처음부터 파란색. HTML에 내장된 것이라 CSS와는 무관하다는 뜻일지도 모르지만, 그렇다면 다른 요소는 어떠냐는 이야기가 되죠.

H1, H2 등도 초기부터 폰트 크기가 달라져 있고 Webflow CSS 패널에 반영되어 있습니다. 그러나 Link만은 색상이 반영되어 있지 않습니다. 그래서 찾기가 꽤 어렵습니다.

일반적인 코드와 달리 부모 요소에 색을 넣어도 링크에는 반영되지 않으므로 Link에 직접 색을 넣어야 합니다. 매번 색을 넣는 것은 번거로우니 ALL Link 태그를 활용해 색 지정과 밑줄 제거를 해 둡시다.

ALL 태그를 모르면 반드시 헤매는 항목 랭킹 1위였습니다.

Webflow 조작의 기초｜CSS 패널 색상의 의미

위 이미지에서는 폰트가 파랗게 표시되어 있습니다. 굵기와 크기는 주황색. 확대해 봅시다.

이 이미지에서는

• H1 클래스에 Droid Serif 폰트가 지정되어 있다
• Weight, Size, Height 등은 다른 요소의 영향을 받고 있다

는 것을 알 수 있습니다.

파란 “font” 글자는 그 클래스에 직접 CSS 값이 지정되어 있다는 의미입니다.

참고로 주황색을 클릭하면 그 값이 어디에서 영향을 받는지 알 수 있습니다. 앞으로 템플릿을 사용해 사이트를 만들 때는 아래처럼 모두 접어서 보면 값을 한눈에 파악하기 좋습니다.

Typography에 주황과 파란 점이 보이죠. 여기에 값이 있다는 표시입니다. 템플릿을 수정할 때는 “파란 점”에 주목해 찾아가면 값의 출처를 바로 찾아 삭제나 변경을 할 수 있습니다.

불필요한 파란 값은 모두 삭제합시다. 예상치 못한 곳에서 영향이 나타날 수 있습니다. 특히 Webflow는 반응형 디자인까지 신경 써야 하므로, 의미 없는 값이 모바일 사이트를 무너뜨리는 원인이 되기도 합니다.

정리

반드시 알아야 할 기초 지식은 여기까지입니다.

HTML의 위치, CSS의 위치, ALL 태그의 존재, CSS 패널 색상의 의미.

이것들을 모른 채 Webflow를 다루면 사이트가 뒤죽박죽이 되어 어디를 수정해야 할지 모르는 상태로 나아가게 됩니다.

먼저 ALL 태그에 기본값을 넣고, 그 위에 가능한 한 적게 CSS를 추가해 나갑시다. 그러면 디자인의 일관성이 유지되고, 관리하기 쉽고 무너지지 않는 사이트에 가까워집니다. 궁금한 점이 있다면 문의 폼으로 편하게 상담해 주세요. 어디선가 다시 만납시다.