AI코딩후 미세한 디테일작업은 결국 사람이 해야하는 현실

커서를 사용하다 클로드 윈도우로 수정 효율이 더 쉽고 간단해졌다. 문제는 비용이다.
간단한 디자인 하나 수정해도 동일한 토큰이 소비된다. 결국 미세한 작업은 사람이 해야한다.
그리고 작은 오류는 잘  찾아주질 못한다. 빈데잡으려다 초가삼간 태우는 상황이 온다. 과금폭탄!!

디자인 마무리 작업과 오류를 찾는 작업은 본인이 능력을 길러야한다.
그게 노하우고 실력이 된다.
주로 CSP순서로 인한 충돌이나 보통 css 수정에서의 미세한 충돌현상은
AI가 찾아주더라도 오류가 많이 생긴다.

---

예를들어 F12 검사에서 Elements 코드에서 style에서 element.style 에 링크파일이 안보이면
그코드는 어디에서 찾아야하는걸까? 수고스럽더라도 일일이 확인해서 찾아가서 고치는 수 밖에 없다.

F12 개발자 도구(Elements 패널)의 element.style 섹션은 해당 요소의 인라인 스타일만 보여줍니다.

즉, <div style="color:red">...</div>처럼 직접 HTML에 명시된 스타일만 나타납니다.

스타일 소스가 element.style에 보이지 않을 경우

실제 웹사이트의 스타일(색상, 레이아웃 등)은 대부분 외부 CSS 파일이나 내부 <style> 태그, 또는 JavaScript 동적 조작으로 적용됩니다. 이런 경우 element.style에는 아무것도 보이지 않을 수 있습니다.

적용된 스타일의 위치 찾기

1. Styles 탭 확인
   • Elements→오른쪽 Styles 탭에서 해당 요소에 적용된 모든 CSS 규칙을 확인할 수 있습니다.
   • 각 규칙 옆에는 적용된 CSS 파일명과 줄 번호가 표시됩니다. 이를 클릭하면 해당 소스 위치로 이동할 수 있습니다.
2. Computed 탭 활용
   • Computed 탭에서는 실제로 계산된 모든 스타일 속성이 나옵니다.
   • 속성 옆의 화살표(▶)를 클릭하면, 그 스타일이 어떤 CSS 규칙에서 유래한 것인지 추적할 수 있습니다. 이를 통해 CSS가 어느 파일/라인에서 적용됐는지 찾을 수 있습니다.
3. 링크 파일이 보이지 않는 경우
   • element.style 자체에는 파일 링크가 없고, 인라인 스타일만 보입니다.
   • 클래스(.class), ID(#id), 태그(tag) 등으로 스타일이 적용된 경우는 Styles/Computed 패널에서 파일 위치를 확인하세요.
4. 동적으로 적용된 경우
   • JavaScript 등으로 동적으로 CSS가 추가/변경된 경우, 스타일시트가 아닌 JS 또는 <style> 태그에 적용 사항이 나타날 수 있습니다. 이 경우도 Styles, Computed 탭에서 위치 확인이 가능합니다.

요약

• element.style은 인라인 스타일만 보여주며, 대부분의 CSS는 외부 파일 또는 내부 스타일시트에 위치합니다.
• Styles, Computed 탭을 사용해 실제 적용된 CSS의 위치(파일명, 줄번호 등)를 확인해야 합니다.
• 특정 규칙이 어디서 유래했는지 추적이 안 된다면, 자바스크립트 또는 스타일시트 동적 생성 가능성도 고려해야합니다.