사용 안내서 취소

CSS 추출 | Illustrator

검색
Illustrator

Illustrator

웹에서 열기
  1. Illustrator 사용 안내서
  2. Illustrator 살펴보기
    1. Illustrator 소개
      1. Illustrator의 새로운 기능
      2. 일반 질문
      3. Illustrator 시스템 요구 사항
      4. Apple Silicon용 Illustrator
      5. GPU 성능
    2. 작업 영역
      1. 작업 영역 기본 사항
      2. 문서 만들기
      3. Illustrator 탐색 패널을 사용하여 더 빠르게 학습
      4. 상황별 작업 표시줄을 사용한 워크플로우 가속화
      5. 툴바
      6. 초기값 키보드 단축키
      7. 키보드 단축키 사용자 지정
      8. 아트보드 소개
      9. 아트보드 관리
      10. 작업 영역 사용자 지정
      11. 속성 패널
      12. 환경 설정 지정
      13. 터치 작업 영역
      14. Illustrator에서 Microsoft Surface Dial 지원
      15. 편집 실행 취소 및 디자인 내역 관리
      16. 회전 보기
      17. 눈금자, 격자 및 안내선
      18. Illustrator의 접근성
      19. 아트워크 보기
      20. Illustrator에서 Touch Bar 사용
      21. 파일 및 템플릿
    3. Illustrator에 있는 도구
      1. 도구 소개
      2. 도구 선택
        1. 선택
        2. 직접 선택
        3. 그룹 선택
        4. 자동 선택
        5. 올가미
        6. 아트보드
      3. 탐색 도구
        1. 손
        2. 회전 보기
        3. 확대/축소
      4. 페인트 도구
        1. 그레이디언트
        2. 망
        3. 도형 구성
      5. 텍스트 도구
        1. 문자
        2. 패스에 입력
        3. 세로 문자
      6. 그리기 도구
        1. 펜
        2. 고정점 추가
        3. 고정점 삭제
        4. 고정점
        5. 곡선
        6. 선분
        7. 사각형
        8. 모퉁이가 둥근 직사각형
        9. 원형
        10. 다각형
        11. 별모양
        12. 페인트브러시
        13. 물방울 브러시
        14. 연필
        15. 셰이퍼
        16. 분할
      7. 수정 도구
        1. 회전
        2. 반사
        3. 크기 조절
        4. 기울임
        5. 폭
        6. 자유 변형
        7. 스포이드
        8. 블렌드
        9. 지우개
        10. 가위
        11. Dimension
    4. 생성형 AI(중국 본토에서는 사용할 수 없음)
      1. 텍스트 프롬프트를 사용하여 장면, 피사체, 아이콘 생성
      2. 텍스트 프롬프트를 사용하여 벡터 패턴 생성
      3. 텍스트 프롬프트를 사용하는 벡터 모양 채우기 생성
      4. 텍스트 프롬프트를 사용한 아트워크 다시 칠하기
    5. 빠른 작업
      1. 레트로 텍스트
      2. 네온광 텍스트
      3. 구식 텍스트
      4. 다시 칠하기
      5. 스케치를 벡터로 변환
  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. 문서
      1. iPad용 Illustrator에서 문서로 작업
      2. Photoshop 및 Fresco 문서 가져오기
    4. 개체 선택 및 정렬
      1. 반복 개체 만들기
      2. 개체 혼합
    5. 그리기
      1. 패스 그리기 및 편집
      2. 모양 그리기 및 편집
    6. 문자
      1. 문자 및 글꼴 사용
      2. 패스에 텍스트 디자인 만들기
      3. 나만의 글꼴 추가하기
    7. 이미지로 작업
      1. 래스터 이미지 벡터화
    8. 색상
      1. 색상 및 그레이디언트 적용
  4. 클라우드 문서
    1. 기본 사항
      1. Illustrator 클라우드 문서 작업
      2. Illustrator 클라우드 문서 공유 및 공동 작업
      3. 검토용 문서 공유
      4. Adobe Illustrator용 클라우드 스토리지 업그레이드
      5. Illustrator 클라우드 문서 | 일반적인 질문
    2. 문제 해결
      1. Illustrator 클라우드 문서에 대한 만들기 및 저장 문제 해결
      2. Illustrator 클라우드 문서 문제 해결
  5. 콘텐츠 추가 및 편집
    1. 그리기
      1. 그리기 기본 정보
      2. 패스 편집
      3. 세밀한 아트 그리기
      4. 펜, 곡률 또는 연필 도구로 그리기
      5. 간단한 선 및 모양 그리기
      6. 직사각형 및 극좌표 그리드 그리기
      7. 플레어 그리기 및 편집
      8. 이미지 추적
      9. 경로 단순화
      10. 심볼화 도구 및 심볼 세트
      11. 패스 선분 조정
      12. 간단한 5단계를 통해 꽃 디자인
      13. 원근 격자 만들기 및 편집
      14. 원근 격자에 개체 그리기 및 수정
      15. 반복 사용을 위해 개체를 심볼로 사용하기
      16. 웹 워크플로우에 맞도록 픽셀 정렬 패스 그리기
    2. 측정
      1. 치수 측정 및 플로팅
    3. 3D 개체 및 재질
      1. Illustrator의 3D 효과 정보
      2. 3D 그래픽 만들기
      3. 3D 개체에 아트워크 매핑
      4. 3D 텍스트 만들기
      5. 3D 개체 만들기
    4. 색상
      1. 색상 정보
      2. 색상 선택
      3. 견본 사용 및 만들기
      4. 색상 조정
      5. Adobe Color 테마 패널 사용
      6. 색상 그룹 (조화)
      7. 색상 테마 패널
      8. 아트워크 다시 칠하기
    5. 페인팅
      1. 페인팅 정보
      2. 칠 및 획을 사용하여 페인팅
      3. 라이브 페인트 그룹
      4. 그레이디언트
      5. 브러시
      6. 투명도 및 혼합 모드
      7. 개체에 획 적용
      8. 패턴 만들기 및 편집
      9. 망
      10. 패턴
    6. 개체 선택 및 정렬
      1. 개체 선택
      2. 레이어
      3. 오브젝트 확장, 그룹화, 그룹 해제
      4. 개체 이동, 정렬, 분포
      5. 개체를 경로에서 배치, 정렬, 이동합니다.
      6. 글리프에 개체 물리기
      7. 일본어 글리프에 개체 물리기
      8. 개체 누적    
      9. 개체 잠금, 숨기기 및 삭제
      10. 개체 복사 및 복제
      11. 개체 회전 및 반사
      12. 개체 부분 재배열
      13. 사실적인 아트 목업 만들기
    7. 개체 모양 변경
      1. 이미지 자르기
      2. 개체 변형
      3. 개체 결합
      4. 개체 자르기, 나누기 및 트리밍
      5. 퍼펫 뒤틀기
      6. 개체 크기 조절, 기울이기 및 왜곡
      7. 개체 혼합
      8. 둘러싸기를 사용하여 모양 변경
      9. 효과로 개체 모양 변경
      10. Shaper 및 도형 구성 도구로 새 모양 작성
      11. 활성 모퉁이 작업
      12. 손질 지원으로 향상된 모양 변경 워크플로우
      13. 클리핑 마스크 편집
      14. 실시간 모양
      15. 도형 구성 도구를 사용하여 모양 만들기
      16. 전역 편집
    8. 문자
      1. 텍스트 추가 및 문자 개체를 사용하여 작업
      2. 리플로우 뷰어
      3. 글머리 기호 및 번호 매기기 목록 만들기
      4. 텍스트 영역 관리
      5. 글꼴 및 타이포그래피
      6. 이미지 내의 텍스트를 편집 가능 텍스트로 변환
      7. 텍스트에 기본 서식 추가
      8. 텍스트에 고급 서식 추가
      9. 텍스트 가져오기 및 내보내기
      10. 단락 서식 지정
      11. 특수 문자
      12. 패스에 문자 입력
      13. 문자 및 단락 스타일
      14. 탭
      15. Adobe Fonts에서 누락된 글꼴 추가
      16. 아랍어 및 히브리어 문자
      17. 글꼴 | FAQ 및 문제 해결 팁
      18. 창의적인 타이포그래피 디자인
      19. 문자 비율 조정 및 회전
      20. 행과 문자 간격
      21. 하이픈 및 줄바꿈
      22. 맞춤법 및 언어 사전
      23. 아시아 문자 서식 지정
      24. 아시아 언어 스크립트용 작성기
      25. 혼합 개체로 텍스트 디자인 생성
      26. 이미지 추적을 사용하여 텍스트 포스터 만들기
    9. 특수 효과 만들기
      1. 효과 사용
      2. 그래픽 스타일
      3. 모양 속성
      4. 스케치 및 모자이크 만들기
      5. 그림자, 광선 및 패더링
      6. 효과 요약
    10. 웹 그래픽
      1. 웹 그래픽을 만들기 위한 최상의 조건
      2. 그래프
      3. SVG
      4. 분할 영역과 이미지 맵
  6. 가져오기, 내보내기 및 저장
    1. 가져오기
      1. 여러 파일 가져오기
      2. 연결 및 임베드된 파일 관리
      3. 연결 정보
      4. 이미지 임베드 취소
      5. Photoshop에서 아트워크 가져오기
      6. 비트맵 이미지 불러오기
      7. Adobe PDF 파일 가져오기
      8. EPS, DCS 및 AutoCAD 파일 불러오기
    2. Illustrator의 Creative Cloud Libraries 
      1. Illustrator의 Creative Cloud Libraries
    3. 저장 및 내보내기
      1. 아트워크 저장
      2. 아트워크 내보내기
      3. Adobe PDF 파일 만들기
      4. Adobe PDF 옵션
      5. Photoshop에서 Illustrator 아트워크 사용
      6. 에셋 수집 및 일괄 내보내기
      7. 파일 패키지
      8. CSS 추출 | Illustrator CC
      9. 문서 정보 패널
  7. 인쇄
    1. 인쇄 준비
      1. 인쇄용 문서 설정
      2. 페이지 크기와 방향 변경
      3. 재단 또는 정렬을 위한 재단선 표시 지정
      4. 대형 캔버스 시작하기
    2. 인쇄
      1. 중복 인쇄
      2. 색상 관리를 사용한 인쇄
      3. PostScript 인쇄
      4. 인쇄 사전 설정
      5. 프린터 표시 및 도련
      6. 투명 아트워크 인쇄 및 저장
      7. 트래핑
      8. 색상 분판 인쇄
      9. 그레이디언트, 망 및 색상 혼합 인쇄
      10. 흰색 중복 인쇄
  8. 작업 자동화
    1. [변수] 패널을 사용하여 데이터 병합
    2. 스크립트로 자동화
    3. 액션을 사용하여 자동화
  9. 문제 해결 
    1. 해결된 문제
    2. 알려진 문제
    3. 충돌 문제
    4. 충돌 후 파일 복구
    5. 안전 모드
    6. 파일 문제
    7. 지원되는 파일 형식
    8. GPU 디바이스 드라이버 문제
    9. Wacom 디바이스 문제
    10. DLL 파일 문제
    11. 메모리 문제
    12. 환경 설정 파일 문제
    13. 글꼴 문제
    14. 프린터 문제
    15. Adobe와 충돌 보고서 공유
    16. Illustrator 성능 개선

개별 오브젝트 또는 Illustrator에서 디자인된 전체 레이아웃에 대한 CSS 코드를 추출하고 내보내는 방법에 대해 알아봅니다.

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

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

CSS 코드 보기 및 추출

CSS 속성 패널에서 사용자는 다음과 같은 작업을 수행할 수 있습니다.

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

A. 경고, 일부 스타일을 CSS 코드로 변환할 수 없는 경우 B. CSS 내보내기 옵션 대화 상자 C. 선택한 CSS를 파일로 내보내기 D. 선택한 스타일을 클립보드에 복사 E. CSS 작성 F. CSS 속성 패널 메뉴 G. 선택한 오브젝트에서 사용한 스타일 H. CSS 코드 

CSS 코드를 보고 추출하려면 다음 단계를 따르십시오.

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

    참고:

    Illustrator 문서의 오브젝트 이름은 [레이어] 패널에 지정됩니다.

  2. 생성된 CSS 코드를 표시하는 방법:

    오브젝트가 하나인 경우:

    오브젝트를 하나 선택합니다. 오브젝트의 CSS 코드가 CSS 속성 패널에 표시됩니다.

    오브젝트가 여러 개인 경우:

    Shift 키를 누른 채로 여러 오브젝트를 선택한 다음 CSS 속성 패널에서 CSS 생성을 선택합니다.

    모든 오브젝트를 선택하는 경우:

    Ctrl/Cmd+A를 눌러 모든 오브젝트를 선택한 다음 CSS 속성 패널에서 CSS 생성을 선택합니다.

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

    선택한 코드 복사 방법:

    • 특정 코드를 선택하고 선택한 스타일 복사를 선택하여 클립보드에 복사합니다.
    • CSS 속성 패널 메뉴( )를 선택하고 선택한 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 Illustrator 커뮤니티에 참여하십시오. 여러분의 소중한 의견을 기대하겠습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?

빠른 링크

내 플랜 모두 보기 내 플랜 관리
빠른 링크 보기
빠른 링크 숨기기

법적 고지 사항    |    온라인 개인정보 처리방침