CSS 추출 | Illustrator

검색
  1. Illustrator 사용 안내서
  2. Illustrator 살펴보기
    1. Illustrator 소개
      1. Illustrator의 새로운 기능
      2. 일반 질문
      3. Illustrator 시스템 요구 사항
      4. Apple Silicon용 Illustrator
    2. 작업 영역
      1. 작업 영역 기본 사항
      2. 문서 만들기
      3. 도구기본 키보드 단축키 | Illustrator
      4. 키보드 단축키 사용자 정의
      5. 대지
      6. 작업 영역 사용자 정의
      7. 속성 패널
      8. 도구 갤러리
      9. 환경 설정 지정
      10. 터치 작업 영역
      11. Illustrator에서 Microsoft Surface Dial 지원
      12. 복구, 실행 취소 및 자동화
      13. 회전 보기
      14. 눈금자, 격자 및 안내선
      15. Illustrator의 액세서빌러티
      16. 안전 모드
      17. 아트워크 보기
      18. Illustrator에서 Touch Bar 사용
      19. 파일과 템플릿
      20. Adobe Creative Cloud를 사용하여 설정 동기화
  3. iPad용 Illustrator
    1. iPad용 Illustrator 소개
      1. iPad용 Illustrator 개요
      2. iPad의 Illustrator FAQ
      3. 시스템 요구 사항 | iPad용 Illustrator
      4. iPad용 Illustrator에서 수행할 수 있는 작업
    2. 작업 영역
      1. iPad 작업 영역의 Illustrator
      2. 터치 바로 가기 키 및 제스처
      3. iPad용 Illustrator 키보드 단축키
      4. 앱 설정 관리
    3. Documents
      1. iPad용 Illustrator에서 문서로 작업
      2. Photoshop 및 Fresco 문서 가져오기
    4. 개체 선택 및 정렬
      1. 반복 개체 만들기
    5. 그리기
      1. 패스 그리기 및 편집
      2. 모양 그리기 및 편집
    6. 문자
      1. 문자 및 글꼴 사용
      2. 패스에 텍스트 디자인 만들기
      3. 나만의 글꼴 추가하기
    7. 이미지로 작업
      1. 이미지로 작업
    8. 색상
      1. 색상 및 그레이디언트 적용
  4. 클라우드 문서
    1. 기본 사항
      1. Illustrator 클라우드 문서 작업
      2. Illustrator 클라우드 문서 공유 및 공동 작업
      3. Adobe Illustrator용 클라우드 스토리지 업그레이드
      4. Illustrator 클라우드 문서 | 일반적인 질문
    2. 문제 해결
      1. Illustrator 클라우드 문서에 대한 만들기 및 저장 문제 해결
      2. Illustrator 클라우드 문서 문제 해결
  5. 컨텐츠 추가 및 편집
    1. 그리기
      1. 그리기 기본 정보
      2. 패스 편집
      3. 세밀한 아트 그리기
      4. 펜, 곡률 또는 연필 도구로 그리기
      5. 간단한 선 및 모양 그리기
      6. 이미지 추적
      7. 패스 단순화
      8. 원근감 격자 정의
      9. 3D 오브젝트 만들기
      10. 심볼화 도구 및 심볼 세트
      11. 패스 선분 조정
      12. 쉬운 5단계로 꽃 디자인하기
      13. 원근감 드로잉
      14. 심볼
      15. 웹 작업 과정에 맞도록 픽셀 정렬 패스 그리기
    2. 색상
      1. 색상 정보
      2. 색상 선택
      3. 견본 사용 및 만들기
      4. 색상 조정
      5. Adobe Color 테마 패널 사용
      6. 색상 그룹(조화)
      7. 색상 테마 패널
      8. 아트워크 색상 변경
    3. 페인팅
      1. 페인팅 정보
      2. 칠 및 선을 사용하여 페인팅
      3. 라이브 페인트 그룹
      4. 그레이디언트
      5. 브러시
      6. 투명도 및 혼합 모드
      7. 개체에 획 적용
      8. 패턴 만들기 및 편집
      9. 망
      10. 패턴
    4. 개체 선택 및 정렬
      1. 개체 선택
      2. 레이어
      3. 개체 그룹 만들기 및 개체 확장
      4. 개체 이동, 정렬 및 배포
      5. 개체 누적    
      6. 개체 잠금, 숨기기 및 삭제
      7. 개체 복제
      8. 개체 회전 및 반사
    5. 개체 모양 변경
      1. 이미지 자르기
      2. 개체 변형
      3. 개체 결합
      4. 개체 자르기, 나누기 및 트리밍
      5. 퍼펫 뒤틀기
      6. 개체 크기 조절, 기울이기 및 왜곡
      7. 개체 혼합
      8. 둘러싸기를 사용하여 모양 변경
      9. 효과로 개체 모양 변경
      10. Shaper 및 도형 구성 도구로 새 모양 작성
      11. 활성 모퉁이 작업
      12. 손질 지원으로 향상된 모양 변경 작업 과정
      13. 클리핑 마스크 편집
      14. 실시간 모양
      15. 도형 구성 도구를 사용하여 모양 만들기
      16. 전역 편집
    6. 문자
      1. 텍스트 만들기
      2. 글꼴 및 타이포그래피
      3. 문자의 형식 지정
      4. 텍스트 가져오기 및 내보내기
      5. 단락 서식 지정
      6. 특수 문자
      7. 패스에 문자 입력
      8. 문자 및 단락 스타일
      9. 탭
      10. 텍스트 및 유형
      11. 없는 글꼴 찾기(Typekit 작업 과정)
      12. Illustrator 10의 텍스트 업데이트
      13. 아랍어 및 히브리어 문자
      14. 글꼴 | 자주 묻는 질문 및 문제 해결 팁
      15. 3D 텍스트 효과 만들기
      16. 창의적인 타이포그라피 디자인
      17. 문자 비율 조정 및 회전
      18. 행과 문자 간격
      19. 하이픈 및 줄바꿈
      20. 텍스트 개선 사항
      21. 맞춤법 및 언어 사전
      22. 아시아 문자 서식 지정
      23. 아시아 언어 스크립트용 작성기
      24. 혼합 개체로 텍스트 디자인 생성
      25. 이미지 추적을 사용하여 텍스트 포스터 만들기
    7. 특수 효과 만들기
      1. 효과 사용
      2. 그래픽 스타일
      3. 그림자 만들기
      4. 모양 속성
      5. 스케치 및 모자이크 만들기
      6. 그림자, 광선 및 패더링
      7. 효과 요약
    8. 웹 그래픽
      1. 웹 그래픽을 만들기 위한 최상의 조건
      2. 그래프
      3. SVG
      4. 애니메이션 만들기
      5. 분할 영역과 이미지 맵
  6. 가져오기, 내보내기 및 저장
    1. 가져오기
      1. 아트웍 파일 가져오기
      2. 비트맵 이미지 불러오기
      3. Photoshop에서 아트웍 가져오기
      4. 여러 파일 가져오기 | Illustrator CC
      5. 이미지 포함 취소
      6. Adobe PDF 파일 가져오기
      7. EPS, DCS 및 AutoCAD 파일 불러오기
      8. 연결 정보
    2. Illustrator의 Creative Cloud Libraries 
      1. Illustrator의 Creative Cloud Libraries
    3. 저장
      1. 아트웍 저장
    4. 내보내기
      1. 아트웍 내보내기
      2. 자산 수집 및 일괄 내보내기
      3. 파일 패키지
      4. Adobe PDF 파일 만들기
      5. CSS 추출 | Illustrator CC
      6. Adobe PDF 옵션
      7. 파일 정보와 메타데이터
  7. 인쇄
    1. 인쇄 준비
      1. 인쇄용 문서 설정
      2. 페이지 크기와 방향 변경
      3. 재단 또는 정렬을 위한 자르기 표시 지정
      4. 대형 캔버스 시작하기
    2. 인쇄
      1. 중복 인쇄
      2. 색상 관리를 사용한 인쇄
      3. 포스트스크립트 인쇄
      4. 인쇄 사전설정
      5. 프린터 표시 및 도련
      6. 투명 아트웍 인쇄 및 저장
      7. 트래핑
      8. 색상 분판 인쇄
      9. 그레이디언트, 망 및 색상 혼합 인쇄
      10. 흰색 중복 인쇄
  8. 작업 자동화
    1. [변수] 패널을 사용하여 데이터 병합
    2. 스크립트로 자동화
    3. 액션을 사용하여 자동화
  9. 문제 해결 
    1. 실행 시 충돌 문제
    2. 충돌 후 파일 복구
    3. 파일 문제
    4. GPU 장치 드라이버 문제
    5. Wacom 장치 문제
    6. DLL 파일 문제
    7. 메모리 문제
    8. 환경 설정 파일 문제
    9. 글꼴 문제
    10. 프린터 문제
    11. Adobe와 충돌 보고서 공유

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

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

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

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

CSS 코드 보기 및 추출

참고:

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

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

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

    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 속성 패널에서 내보내기 옵션을 클릭하고 적절히 선택합니다.

샘플 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; }
Adobe 로고

내 계정 로그인

빠른 링크

내 플랜 모두 보기 내 플랜 관리

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