안녕하세요, 주식회사 Webharu 대표이사 구리타입니다. 이번에는 Webflow 조작에 관한 기초 지식을 소개합니다. 주요 내용은 다음과 같습니다.
- Webflow 조작의 기초① | HTML의 위치
- Webflow 조작의 기초② | CSS의 위치
- Webflow 조작의 기초③ | ALL 태그의 존재
- Webflow 조작의 기초④ | CSS 패널 색의 의미
결론: Webflow 사용법은 위의 4가지(HTML의 위치·CSS의 위치·ALL 태그·CSS 패널 색의 의미)를 처음에 아는 것만으로 조작이 10배 빨라집니다. 반대로 모른 채 진행하면 어디를 편집해야 할지 알 수 없는 사이트가 되어 갑니다.
※2026년 추가: 이 글의 스크린샷은 촬영 당시의 것입니다. Webflow는 UI 업데이트가 계속되고 있어 현행 UI에서는 명칭이나 배치가 달라진 경우가 있습니다. 다만 ALL 태그와 CSS 패널의 색 구분이라는 개념 자체는 달라지지 않았습니다.
ALL 태그와 CSS 패널 색의 의미를 모른 채 Webflow를 다루는 분이 많으니 확실하게 확인해 봅시다.
저는 Webflow 학습자에게 직접 지도나 조언을 정기적으로 하고 있습니다. 그 과정에서 특히 문제로 꼽히는 “링크(Link)의 색이 바뀌지 않는다”, “어디를 바꿔야 할지 모르겠다” 같은 질문은 이번 글에서 전부 해결할 수 있습니다. 모르는 것이 있을 것 같다면 이대로 계속 읽어 나가 봅시다.
유튜브를 시작해 보려고 영상을 찍었습니다. 촬영에 익숙하지 않은 데다 초보라 보기 불편할 수 있으니 양해 부탁드립니다. “언젠가 촬영도 능숙해지면 좋겠다”는 마음의 스몰 스타트입니다.
이 글의 요점
- All HTML Tags(ALL 태그)란?
- All HTML Tags(ALL 태그)란 Webflow에서 같은 요소 전부에 공통의 기초값을 설정할 수 있는 태그입니다. CSS의 클래스 지정으로 하는 기초값 설정에 해당하며, 일반 클래스(파란 태그)로 덮어쓸 수 있습니다.
목차
Webflow 사용법의 대전제 | 아이템 이름을 아는 것의 의미
Webflow는 실제 HTML, CSS, JavaScript 코드와 같은 이름을 그대로 채택해 UI에 표시하고 있습니다. 예를 들어 Div block, heading, margin, padding 등 HTML, CSS의 기초를 배운 적이 있는 사람이라면 자주 들어 본 단어입니다.
그 밖에도 많은 아이템(Elements)이 이름 그대로 사용되고 있습니다. 이는 코드를 내보냈을 때의 코드를 머릿속에 그리기 쉬워 도움이 됩니다. 게다가 기존 웹 개발자에게도 친절한 설계입니다.
그렇다면 왜 Webflow의 아이템 이름을 아는 것이 중요할까요. 그 이유는 스스로 검색할 수 있게 되기 때문입니다.
예를 들어 Webflow로 사이트를 만들다가 “margin과 padding의 차이를 모르겠다”가 되었을 때, Webflow 얘기니까 Webflow를 잘 아는 사람에게 물어보자↓
그런데 Webflow에 밝고 편하게 물어볼 사람이 없네↓
Webflow 공식 사이트에서 찾아보자↓
영문이라 잘 모르겠고 좌초
이런 식으로 좌절하게 됩니다.
“blending”의 사용법, “position:sticky”의 사용법을 모르겠다는 분이 자주 있습니다. 하지만 이런 것들은 “CSS blending 사용법”, “CSS position:sticky 사용법”이라고 검색하면 어떤 조건에서 작동하는지 찾아볼 수 있습니다.
HTML, CSS의 동작을 알면 그것을 Webflow에 옮겨서 작동시킬 수 있습니다. 그러니 Webflow에서 모르는 것이 있으면 그 아이템의 이름을 그대로 검색합시다. 그렇게 하면 HTML, CSS에 관한 대부분의 기초 동작은 스스로 해결할 수 있습니다.
Webflow 조작의 기초 | HTML의 위치, CSS의 위치
HTML의 위치
여기서부터는 검색해도 Webflow 공식에만 나와 있는 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로 만들어져 있으면 다른 페이지를 만들 때 반영되지 않아, 파란 태그의 Body를 몇 번이고 붙여 넣게 됩니다.
ALL 태그와 파란 태그의 차이를 이해하셨나요? 여기서 제가 가장 많이 받는 질문을 적어 두겠습니다.
【질문 1위】Q. Webflow에서 링크(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를 가능한 한 적게 적어 나갑시다. 그렇게 하면 디자인의 일관성을 유지하며 더 관리하기 쉽고 잘 무너지지 않는 사이트에 가까워집니다. Webflow 학습이나 커뮤니티를 찾는 분은 제가 운영하는 무료 Webflow 커뮤니티에 오세요. 특별히 활발하지는 않지만 Webflow 동료를 만날 수 있습니다. 어디선가 또 만납시다. 그럼 이만.
(2026년 추가: 현재 최신 정보 안내는 뉴스레터로 일원화하고 있습니다)
다음 한 걸음 | Webflow 사용법을 더 배우기
기초 4항목을 잡았다면 다음은 목적별로 나아갑시다. 항목별 색인인 “Webflow 사용법 정리”와, 한국어·일본어로 배우는 전체 경로를 제시한 “Webflow 일본어 학습의 최단 경로(2026년판)”에서 만들고 싶은 것에 맞춰 고를 수 있습니다.
제작 실적
자주 묻는 질문
Webflow에서 링크(Link)의 색이 바뀌지 않을 때는 어떻게 해야 하나요?
ALL 태그의 Link를 지정해서 바꿉시다. Webflow에서는 부모 요소에 색을 넣어도 링크에는 반영되지 않으므로, ALL Link 태그를 이용해 색을 넣거나 밑줄을 없애는 것이 확실합니다.
Webflow의 ALL 태그는 어디에서 찾을 수 있나요?
예를 들어 H1 아이템을 선택한 상태에서 CSS 패널 위쪽의 “Style Selector”를 비운 상태로 클릭하면 찾을 수 있습니다. ALL 태그의 내용은 파란 태그(일반 클래스)로 덮어쓸 수 있습니다.
Webflow에서 사이트 전체의 폰트를 바꾸려면 어떻게 해야 하나요?
ALL 태그의 “body”를 선택해 사이트 전체의 폰트를 지정합니다. 일반 클래스(파란 태그)의 Body로 설정하면 다른 페이지를 만들 때 반영되지 않아 몇 번이고 붙여 넣게 됩니다.
Webflow CSS 패널의 파랑과 주황은 무엇을 의미하나요?
파랑은 그 클래스에 CSS 수치가 직접 지정되어 있다는 뜻이고, 주황은 다른 요소에서 영향을 받고 있다는 뜻입니다. 주황을 클릭하면 그 수치가 어디에서 영향을 받고 있는지 확인할 수 있습니다.
Webflow 사용법을 가장 빨리 익히는 요령이 있나요?
UI의 아이템 이름이 HTML·CSS와 같은 이름이라는 것을 아는 것입니다. 모르는 항목은 “CSS ○○ 사용법”으로 검색하거나 AI에 물어보면 거의 해결됩니다. 그 전제로 4가지 기초(HTML·CSS의 위치, ALL 태그, CSS 패널 색의 의미)를 먼저 잡아 두면 조작이 10배 빨라집니다.
2026년의 현행 UI에서도 이 글의 내용을 쓸 수 있나요?
쓸 수 있습니다. 스크린샷은 촬영 당시의 것이라 현행 UI에서는 명칭이나 배치가 달라진 경우가 있지만, ALL 태그와 CSS 패널의 색 구분(파랑=직접 지정, 주황=상속)이라는 개념 자체는 달라지지 않았습니다.
