CSS 추출 | Illustrator CC

검색
Adobe Illustrator 사용 안내서

이 페이지

적용 대상: Adobe Illustrator

在中国购买的 Creative Cloud 产品不含 CC 桌面应用程序中的 Creative Cloud 移动应用程序和在线服务及相关功能。

Illustrator에서 HTML 페이지 디자인을 만들 수 있습니다. 이러한 디자인은 웹 개발자가 HTML 편집기에서 레이아웃, 스타일 및 개체를 코딩하는 데 유용한 시각적 가이드가 됩니다. 그렇지만 구성 요소와 개체의 정확한 모양과 위치를 그대로 복제하는 것은 시간이 많이 소요되고 지겨운 프로세스입니다.

Illustrator CC를 사용하면 HTML 페이지의 레이아웃을 만들 때 페이지에서 구성 요소 및 개체의 모양을 결정하는 기본 CSS 코드를 생성한 후 내보낼 수도 있습니다. CSS를 사용하면 텍스트와 개체의 모양을 제어할 수 있습니다(문자 및 그래픽 스타일과 비슷하게). 개별 개체 또는 Illustrator에서 디자인한 전체 레이아웃에 대한 CSS 코드를 내보내도록 선택할 수 있습니다.   

CSS 속성 패널(창 > CSS 속성)에서 다음을 수행할 수 있습니다.

  • 선택한 개체의 CSS 코드 보기
  • 선택한 개체의 CSS 코드 복사
  • 하나 이상 또는 선택한 Illustrator 요소 전체를 CSS 파일로 내보내기
  • 사용된 래스터화가 가능한 이미지 내보내기
  • 브라우저 특정 CSS 코드 생성

비디오: Illustrator CC에서 CSS 추출

비디오: Illustrator CC에서 CSS 추출
Illustrator CC에서 텍스트, 개체, 심지어 전체 레이아웃을 생성하여 웹 사이트를 더 빠르게 만드는 방법을 참조하십시오.
Rufus Deuchler

CSS 코드 보기 및 추출

참고:

CSS 코드를 생성하려면 다음 중 하나를 수행하십시오.

  • Illustrator 문서의 개체 이름은 레이어 패널에 지정됩니다.
  • 창 > CSS 속성 > 돌출 메뉴 > 내보내기 옵션을 클릭하고 이름 없는 개체의 CSS 생성 확인란을 선택합니다. 

  1. 창 > CSS 속성을 선택합니다.

    A. 경고, 일부 스타일을 CSS 코드로 변환할 수 없는 경우 B. CSS 내보내기 옵션 대화 상자 C. 선택한 CSS를 파일로 내보내기 D. 선택한 스타일을 클립보드에 복사 E. CSS 작성 F. 플라이아웃 메뉴 G. 선택한 개체에서 사용한 스타일 H. CSS 코드 

  2. 열려 있는 Illustrator 문서에서 다음 중 하나를 수행합니다.

    • 개체를 하나 선택합니다. 개체의 CSS 코드가 CSS 속성 패널에 표시됩니다.
    • Shift 키를 누른 채로 여러 개체를 선택하고 CSS 속성 패널에서 CSS 생성 단추를 클릭합니다.
    • Ctrl/Cmd + A를 눌러 모든 개체를 선택하고 CSS 속성 패널에서 CSS 생성 단추를 클릭합니다.

    생성된 CSS 코드가 표시됩니다.

  3. 생성된 CSS 코드를 가져오려면 다음 중 하나를 수행합니다.

    • 선택한 코드를 복사하려면 특정 코드를 선택하고 다음을 수행합니다.
      • 클립보드로 복사하려면 선택한 스타일 복사를 클릭합니다.
      • 파일로 내보내려면 돌출 메뉴를 클릭하고 선택한 CSS 내보내기를 클릭합니다.
    • 모든 코드를 복사하려면 CSS 코드에서 아무 것도 선택하지 않은 상태로 다음을 수행합니다.
      • 클립보드로 복사하려면 선택한 스타일 복사를 클릭합니다.
      • 파일로 내보내려면 돌출 메뉴를 클릭하고 모두 내보내기를 클릭합니다.

  4. CSS 코드를 파일로 저장하는 동안 다음 옵션 중에서 선택합니다.

    참고:

    생성된 CSS 코드의 내용을 수정하려면 CSS 속성 패널에서 내보내기 옵션을 클릭하고 적절히 선택합니다.

샘플 CSS 코드

그레이디언트가 적용된 직사각형(모든 브라우저)

.GRADIENT_BOX
{
  background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

그레이디언트가 적용된 직사각형(webkit 기반 브라우저 전용) 

.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

여러 개체 

.NormalCharacterStyle
{
  font-family : Myriad Pro;
  font-size : 12px;
}
.st0
{
  border-style : Solid;
  border-color : #FFFFFF;
  border-color : rgba(255, 255, 255, 1);
  border-width : 0px;
}
.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책