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에서 텍스트, 개체, 심지어 전체 레이아웃을 생성하여 웹 사이트를 더 빠르게 만드는 방법을 참조하십시오.
참고:
CSS 코드를 생성하려면 다음 중 하나를 수행하십시오.
- Illustrator 문서의 개체 이름은 레이어 패널에 지정됩니다.
- 창 > 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);
}
.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;
}