WeWeb 프로젝트에 맞춤 CSS를 추가하는 방법에 대한 쉽게 따를 수 있는 가이드를 찾아보세요. 독특한 디자인과 스타일링 세부사항으로 웹사이트의 미학을 향상시키세요. 여기에서 더 자세히 알아보세요.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: WeWeb 프로젝트 열기
첫 번째 단계는 WeWeb 계정에 로그인하여 기존 프로젝트를 열어야 합니다. WeWeb 계정이 없다면 WeWeb 공식 웹사이트에서 가입할 수 있습니다. 그 쪽에서 "내 웹사이트" 탭을 선택하면 WeWeb에서 만든 모든 웹사이트를 찾을 수 있습니다. 수정하려는 프로젝트를 클릭하세요.
2단계: 설정 패널로 이동하기
웹사이트 프로젝트를 열면 설정 패널로 이동하세요. WeWeb 대시보드에서는 일반적으로 왼쪽 탐색 바에 위치한 설정(기어) 아이콘을 클릭하여 설정 패널에 액세스할 수 있습니다. 설정 패널에서는 웹사이트에 대해 다양한 사용자 지정을 실험할 수 있습니다. 여기에는 사용자 지정 CSS를 추가하는 것도 포함됩니다.
3단계: 개발자 섹션으로 가기
설정 패널에서는 개발자 섹션을 찾을 수 있습니다. 이 특정 섹션은 사용자 지정 CSS를 입력할 곳입니다. 이 탭을 클릭하여 아래에 있는 옵션을 연 후, 코드 괄호 또는 수리 아이콘으로 개발자 탭을 확인할 수 있습니다.
4단계: 사용자 지정 CSS 섹션 찾기
개발자 탭 아래에서 "사용자 지정 CSS"라고 레이블이 붙은 영역을 찾을 수 있습니다. 이 영역에서는 웹사이트 모양을 바꾸기 위해 사용자 지정 CSS 코드를 입력할 수 있습니다. 이것을 클릭하면 코딩 텍스트 상자가 열립니다.
5단계: 사용자 지정 CSS 코드 입력하기
이제 "사용자 지정 CSS" 옵션을 선택하여 나타난 텍스트 상자에 사용자 지정 CSS 코드를 입력할 수 있습니다. 이 코드는 웹사이트의 스타일, 포함된 텍스트, 레이아웃, 글꼴, 색상 체계 등을 조작하는 데 사용됩니다. 원하는 효과를 얻기 위해 정확한 CSS를 입력하는 것이 중요합니다.
6단계: 사용자 지정 CSS 테스트하기
사용자 지정 CSS를 입력 한 후에는 이 코드를 테스트하는 것이 좋습니다. 미리보기 버튼을 클릭하여 CSS가 적용된 상태에서 웹사이트가 어떻게 보일지 확인하세요. 결과가 스크립트 작성 시 기대했던 것과 일치하는지 확인하세요.
7단계: 변경 내용 저장하기
미리보기 중에 보는 것에 만족하고 CSS 코딩에 오류가 없다고 확인하면 변경 내용을 저장하는 시간입니다. "저장" 또는 "적용" 버튼을 클릭하세요. 이 버튼은 일반적으로 화면 상단이나 코딩 텍스트 상자 근처에 위치해 있습니다.
캐시 때문에 변경 사항이 즉시 표시되지 않을 수 있으므로 몇 분 동안 기다리거나 캐시를 지우거나 사이트를 익명 모드에서 보는 것이 좋습니다.
8단계: WeWeb 프로젝트 게시하기
CSS 변경을 완료 했으므로 이제 업데이트 된 웹사이트를 게시하여 모두가 새로운 스타일을 볼 수 있도록 해야 합니다. 대시보드로 돌아가서 "게시" 버튼을 찾으세요. 이 버튼은 일반적으로 화면 오른쪽 상단에 위치해 있습니다. 이 버튼을 클릭하면 새로운 사용자 지정 CSS가 있는 웹사이트가 곧 라이브로 전환됩니다.
사용자 지정 CSS를 웹사이트에 추가하면 웹사이트의 모양이 향상되고 사이트가 더 정교하고 전문적으로 보일 수 있다는 것을 기억하세요. 그러나 주의해야 합니다. 항상 프로젝트에 적용하기 전에 코드를 두 번 확인하고 웹사이트에서 이상이 있는지는 정기적으로 점검하세요.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.