Korean 
English 
Arabic 
버튼 주변의 간격을 조정하거나 글꼴 크기를 변경하거나 독특한 시각 효과를 만드는 등 워드프레스 웹사이트의 모양을 조정하고 싶지만 CSS가 두렵게 느껴진 적이 있나요? 기존에는 이런 종류의 수정을 하려면 코드를 직접 작성하거나 개발자를 고용해야 했습니다. 하지만 더 간단한 방법이 있다면 어떨까요? 정말 인공지능을 사용하여 CSS 필요하신가요? 물론이죠! 이제 AI의 강력한 기능을 활용하여 워드프레스 사이트를 사용자 정의하는 데 필요한 CSS 코드를 생성하여 누구나 디자인을 수정할 수 있습니다. 이 가이드는 AI를 활용하여 웹사이트에 새로운 차원의 디자인 유연성을 부여하는 쉬운 단계를 안내합니다.
1단계: 수정하려는 요소 식별하기
첫 번째 단계는 웹사이트의 어떤 요소를 변경할지 정확히 파악하는 것입니다. 버튼, 제목, 섹션 배경, 아니면 다른 요소인가요? 명확한 목표를 염두에 두면 AI와 효과적으로 소통하는 데 도움이 됩니다.
2단계: 요소에 고유 CSS 클래스 부여하기
CSS(및 AI)에 어떤 특정 요소를 참조하고 있는지 알려주려면 고유한 CSS 클래스를 부여하는 것이 가장 좋습니다. 일반적으로 이렇게 하는 방법은 다음과 같습니다:
1. 워드프레스 블록 편집기(구텐베르크)에서: 페이지 또는 글을 편집할 때 수정하려는 블록을 선택합니다. 오른쪽 사이드바에서 "고급" 섹션을 펼칩니다. "추가 CSS 클래스"라고 표시된 필드를 찾을 수 있습니다. 여기에 설명이 포함된 이름을 입력합니다(예:, 내 사용자 지정 버튼, 홈페이지-히어로 섹션, 특별 제목). 여러 클래스를 공백으로 구분하여 추가할 수 있습니다.
2. 페이지 빌더 사용(예: 엘리멘터, 비버 빌더): 대부분의 페이지 빌더는 요소 설정에 비슷한 옵션이 있습니다. '고급' 탭 또는 특정 모듈이나 위젯에 CSS 클래스 또는 ID를 추가하는 섹션을 찾아보세요.
2단계: 요소에 고유 CSS 클래스 부여하기
CSS(및 AI)에 어떤 특정 요소를 참조하고 있는지 알려주려면 고유한 CSS 클래스를 부여하는 것이 가장 좋습니다. 일반적으로 이렇게 하는 방법은 다음과 같습니다:
1. 워드프레스 블록 편집기(구텐베르크)에서: 페이지 또는 글을 편집할 때 수정하려는 블록을 선택합니다. 오른쪽 사이드바에서 "고급" 섹션을 펼칩니다. "추가 CSS 클래스"라고 표시된 필드를 찾을 수 있습니다. 여기에 설명이 포함된 이름을 입력합니다(예:, 내 사용자 지정 버튼, 홈페이지-히어로 섹션, 특별 제목). 여러 클래스를 공백으로 구분하여 추가할 수 있습니다.
2. 페이지 빌더 사용(예: 엘리멘터, 비버 빌더): 대부분의 페이지 빌더는 요소 설정에 비슷한 옵션이 있습니다. '고급' 탭 또는 특정 모듈이나 위젯에 CSS 클래스 또는 ID를 추가하는 섹션을 찾아보세요.
고유한 클래스를 추가한 후에는 변경 사항을 저장하세요.
3단계: 브라우저에서 요소 검사하기
다음으로 수정하려는 요소의 기본 코드를 확인해야 합니다. 브라우저의 "검사" 도구를 사용하여 이 작업을 수행할 수 있습니다:
1. 새 탭에서 웹사이트의 해당 요소가 있는 페이지를 엽니다.
2. 2. 변경하려는 요소를 마우스 오른쪽 버튼으로 직접 클릭합니다.
3. 3. 검사 또는 요소 검사 를 클릭합니다. 그러면 보통 화면 하단이나 측면에 브라우저의 개발자 도구가 열립니다.
4단계: 요소의 코드 및 기존 스타일 찾기
개발자 도구에서 페이지의 HTML 구조를 볼 수 있습니다. 마우스 오른쪽 버튼으로 클릭한 요소가 강조 표시되어 있어야 합니다. 오른쪽(일반적으로 "스타일" 또는 "계산됨"이라고 표시된 탭)에는 테마 및 플러그인에서 해당 요소에 현재 적용되고 있는 CSS 규칙이 표시됩니다.
5단계: AI(예: Gemini 또는 ChatGPT)에 CSS 생성 요청하기
이제 인공지능의 마법이 시작됩니다! 선호하는 AI 도구(예: Gemini 또는 ChatGPT)를 열고 다음 정보를 입력합니다:
1. 요소에 추가한 CSS 클래스 (예 .my-custom-button). 클래스의 선행 점을 포함해야 합니다.
2. 수정하려는 내용에 대한 명확하고 간결한 설명. 가능한 한 구체적으로 작성하세요. 예를 들어
- "배경색을
.my-custom-button하늘색입니다." - "내부 텍스트의 글꼴 크기를 늘리려면 어떻게 해야 하나요?
.special-heading20픽셀로?" - "고객
.homepage-hero-section미묘한 상자 그림자를 추가하려면 어떻게 해야 하나요?" - "링크 내의 밑줄을 제거하고 싶습니다.
.my-custom-section.” - "텍스트를 가운데에 배치하려면 어떻게 해야 하나요?
.my-custom-button?”3. (선택 사항이지만 도움이 됩니다:) 브라우저 개발자 도구의 '스타일' 탭에서 찾은 기존 CSS 속성 중 일부를 AI에 제공할 수도 있습니다. 이렇게 하면 AI에 더 많은 컨텍스트를 제공할 수 있습니다.
6단계: 생성된 CSS를 복사하여 워드프레스에 붙여넣기
AI가 원하는 수정에 필요한 CSS 코드를 제공합니다. 이 코드를 주의해서 복사하세요.
그런 다음 워드프레스 대시보드로 돌아가 다음 항목으로 이동합니다. 모양 > 사용자 지정 > 추가 CSS. 복사한 CSS 코드를 텍스트 영역에 붙여넣습니다.
7단계: 미리보기 및 조정
CSS를 붙여넣는 즉시 오른쪽의 사용자 정의 기능 미리보기가 변경 사항을 반영하도록 업데이트됩니다. 생각했던 것과 다르더라도 걱정하지 마세요. AI로 돌아가서 조정하고 싶은 내용을 설명한 다음 CSS를 수정하도록 요청할 수 있습니다. 그런 다음 업데이트된 코드를 복사하여 추가 CSS 섹션에 다시 붙여넣기만 하면 됩니다.
결과가 만족스러우면 게시 버튼을 클릭하여 변경 사항을 저장하고 라이브 웹사이트에 적용합니다.
디자인 잠재력 발휘하기
AI의 도움으로 사용자 지정 워드프레스 웹사이트의 디자인에 대한 접근성이 그 어느 때보다 높아졌습니다. 더 이상 코딩 전문가가 아니어도 사이트를 돋보이게 하는 작지만 영향력 있는 조정을 할 수 있습니다. 이제 개선하고 싶은 요소를 파악하고 인공지능에게 CSS의 마법을 요청하여 워드프레스 디자인의 잠재력을 발휘하세요!
