112. 일러스트 CC : 윈도우(W) → CSS 속성

웹사이트를 제작할때 디자인과 별개로 사용하는 기능들이 있습니다. CSS는 그 중 속해 있는 것이구요.

하나의 웹을 만들기 위해선, HTML이라는 뼈대와 CSS라는 살과 옷이 있습니다.

사람의 인체로 간단하게 설명하자면 머리 몸통 다리 발 이렇게 대략적으로 나누어, 머리에는 눈과 코와 귀가 있어야해! 라고 HTML로 뼈대를 설정해 줍니다. 그곳에 살을 붙여 주는것이 CSS입니다. CSS는 눈에는 쌍카풀, 갈색 눈동자, 긴 속눈썹! 이렇게 뼈대에 살과 멋을 붙여주는 것인데요,

여기에 움직임과 제어를 주는 것이 Java, jQuery 등등이 있습니다.

CSS 복사 메뉴를 이해하기 위해 간략하게 설명한 것이니 가볍게 읽고 이해하시면 됩니다.

​일러스트레이터에서 HTML페이지의 레이아웃을 만들 때 페이지에서 구성 요서 및 오브젝트의 모양을 결정하는 CSS를 생성하여 내보낼 수 있습니다.

한마디로 일러스트레이터에서 디자인한 오브젝트를 CSS로 만들 수 있습니다.

최상단 메뉴의 윈도우(W) → CSS 속성를 클릭하여 볼까요?

위와 같은 창이 뜹니다.

어떻게 사용하는지 보도록 하겠습니다.

오브젝트를 만들어 줍니다.

! 오브젝트를 만들 때 레이어를 사용하여 만들어 줍니다. !

저는 square라는 레이어 안에 오브젝트 이름을 각각 설정해 주었습니다.

오브젝트 이름을 각각 설정해 주지 않으면 CSS로 변환이 되지 않으니 참고하세요~

CSS 속성창의 하단 CSS 작성을 클릭합니다.

​CSS 코드가 작성되었습니다.

​ 

이 코드를 가지고 CSS에 적용하면 됩니다.

오브젝트의 색상값만 추출이 되었네요.

보통 위치나 오브젝트의 너비, 높이, 폰트의 사이즈 등등도 추출이 됩니다.

CSS 속성 창을 잠깐 보고 넘어가도록 하겠습니다.

1. 내보내기 옵션

내보내기 옵션을 설정합니다.

2. 선택한 CSS 내보내기

만들어진 코드를 내보내합니다.

3. 선택한 스타일 복사

만들어진 코드를 복사합니다.

4. CSS 작성

오브젝트를 선택한 후 CSS 작성을 누르면 코드화 합니다.

일러스트레이터의 CSS 코드는 편리한 기능을 가지고 있지만, 내가 개설한 HTML의 뼈대와 부모 자식, 속해있는 구조의 속성에 맞추어 CSS를 주어야 하기 때문에 100% 신뢰하고 사용하여선 안됩니다.

구조를 파악하여 속성 정도만 참고하는것이 좋을 것 같습니다.