레이어에서 CSS 생성하기

마지막 업데이트 날짜 2026년 10월 29일

Adobe Photoshop에서 모양 및 텍스트 레이어로부터 CSS 코드를 추출하여 디자인 속성을 웹용 스타일시트로 번역하는 방법을 알아보세요.

CSS 복사 기능은 Photoshop 레이어에서 직접 Cascading Style Sheet 속성을 생성하며, 생성된 디자인 사양을 스타일시트 파일에 붙여넣을 수 있습니다.이 워크플로는 시각적 디자인과 코드 구현 사이의 간극을 좁혀주며, 특히 웹 프로젝트를 위한 에셋을 준비하거나 정확한 스타일 사양이 필요한 개발자와 공동 작업할 때 유용합니다.

시각적 디자인 요소를 코드에 사용할 수 있는 스타일 선언으로 변환해야 할 때 CSS 복사를 사용하세요.이 기능은 개별 모양 레이어, 텍스트 레이어 또는 이러한 요소가 포함된 레이어 그룹과 함께 사용할 수 있습니다.이 기능은 스타일시트에 직접 붙여넣을 수 있는 CSS를 생성하며, 픽셀 단위로 정확하게 디자인 속성을 캡처합니다.더 광범위한 디자인-투-웹 워크플로의 경우, 추가 스타일링 옵션은 레이어 효과 및 스타일을, 다른 출력 형식은 에셋 내보내기를 살펴보세요.

레이어에서 캡처한 CSS 속성

Copy CSS는 선택한 레이어 유형에 따라 다른 속성을 추출합니다.

모양 레이어는 다음 항목에 대한 CSS를 생성합니다:

크기 및 위치 좌표
선 색상
채우기 색상(그레이디언트 정의 포함)
그림자 효과

텍스트 레이어는 모양 속성과 타이포그라피 사양을 캡처합니다:

글꼴 군
글꼴 크기 및 두께
줄 높이
텍스트 장식(밑줄, 취소선)
세로 정렬(위 첨자, 아래 첨자)
텍스트 정렬

레이어 그룹은 상위-하위 관계를 나타내는 구조화된 CSS 클래스를 생성합니다.그룹 자체는 상위 div가 되고, 그룹 내의 각 레이어는 하위 div를 생성합니다.하위 요소의 위쪽 및 왼쪽 위치 값은 상위 컨테이너를 기준으로 계산되며, 이는 표준 CSS 위치 지정 동작을 반영합니다.

CSS 복사 제한 사항

CSS 복사 기능은 Smart Objects와 함께 작동하지 않습니다. 레이어가 Smart Object인 경우 더블클릭하여 내용을 편집하고 Smart Object 문서 내 레이어에서 CSS를 복사하거나, 워크플로에 적합하다면 먼저 레이어를 래스터화하십시오.

이 기능은 모양 레이어나 텍스트 레이어를 동시에 여러 개 선택하여 처리할 수 없습니다. 단, 그룹화된 경우는 예외입니다. 여러 레이어의 CSS를 한 번에 복사하려면 먼저 레이어를 레이어 그룹에 배치하십시오.

레이어에서 CSS 코드 생성

Layers 패널에서 모양 레이어, 텍스트 레이어 또는 레이어 그룹을 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 CSS 복사를 선택합니다. 또는 레이어를 선택한 다음 Layers 패널 메뉴에서 CSS 복사를 선택합니다.

스타일시트 문서를 열고 Ctrl + V(Windows) 또는 Command + V(macOS)를 사용하여 생성된 코드를 붙여넣습니다.

이제 CSS 코드가 클립보드에 저장되어 웹 프로젝트에 통합할 준비가 되었습니다. 생성된 속성을 검토하여 개발 요구 사항에 맞는지 확인하고, 반응형 디자인이나 브라우저 호환성을 위해 필요에 따라 값을 조정하십시오.

Photoshop으로 멋진 이미지를 만들어보세요
여러분이 알고 사랑하는 업계 최고의 크리에이티브 도구로 사진을 편집하고, 재손질하고, 변형해보세요.

앱 열기

Photoshop에서 메모 사용하기

학습

앱에서 바로 단계별 비디오 튜토리얼과 실습형 안내를 통해 학습하십시오.

커뮤니티

전문가들과 토론하고, 답변을 찾고, 배우며, 여러분의 지식을 공유하세요.

Adobe 홈

즐겨 사용하는 Creative Cloud 앱, 서비스, 파일 관리 등에 액세스하세요.