본문 바로가기

728x90
반응형

전체 글

(443)
[일러스트레이터] 1강 패턴만들기 1. 패턴 만들기( 1) 혹은 2)의 방법중 하나만 선택해서 만듬 ) 1) [swatches]패널로 드래그 2) [object]메뉴 - [pattern] - [make] ​2. 패턴 적용 ​등록된 패턴은 [swatches]패널에 등록 되어 있으므로 오브젝트를 그리고 선택하면 적용 ​ ​ ​ ​ 3. 여백있는 패턴 만들기 ​ ​ 위와 같이 패턴을 등록하면 원이 타이트하게 붙어서 나옴 ​ 위와 같이 면색, 선색없는 사각형도형으로 빈공간을 만들고 원형도형과 함께 잡아 패턴으로 등록해야함 ​ ​ 4. 패턴 변형 1) 패턴 크기 바꾸기 패턴 적용 후 패턴이 너무 큰 경우 2) 패턴 회전하기 - 십자가를 사각형으로 만든 후 여백으로 쓸 사각형을 면색 선색없이 만듬 ​ ​ 패턴 적용 예시 ​ ​ ​ 5. 투명으로 만..
[CSS3강좌] 9강 CSS 영역(width/height/overflow)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=HuY4WkVOKrY 1. width/height 속성정리 속성 설명 width 선택자의 가로 폭을 설정하는 속성 px 선택자의 가로 폭을 절대적인 px단위로 적용 % 선택자의 가로 폭을 부모에게 상속받아 %단위로 상대적으로 적용 height 선택자의 세로 높이를 설정하는 속성 px 선택자의 세로 높이를 절대적인 px단위로 적용 % 선택자의 세로 높이를 부모에게 상속받아 %단위로 상대적으로 적용 2. 요소의 영역을 절대적으로 처리 - px단위 사용 1) 코드 뷰 p태그영역 2) 코드 완성뷰 3. 요소의 영역을 상대적으로 처리 - %로 지정하면 부모의 영역에서 상대적으로 %를 받는다. 1) 코드..
[CSS3강좌] 8강 CSS border(테두리)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=a930mdh1jGs 1. 속성정리 속성명 설명 border-width (선 굵기 설정) a) 키워드 방식 : thin(얇은), thick(굵은) b) 숫자 방식 : px단위 border-style (선스타일 설정) solid 실선 dotted 짧은 점선 dashed 긴 점선 double 두줄 처리(3px 이상) outset 아래쪽 어둡게 처리 inset 위쪽을 어둡게처리 groove 파인 선(3px이상) ridge 불록한 선(3px이상) none 선없앰 border-color 테두리 색 설정 : a) 키워드 b) rgb방식 c) hsl방식 d) hex코드방식 border 속기법 : width..
[CSS3강좌] 7강 CSS background(배경)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ukPTssZLPoI 1. 속성 정리 속성명 설명 background-color 배경색 지정 속성 - color처럼 키워드, rgb, hex, hsl등 사용 background-image 배경이미지 처리 - ​url(경로); background-repeat (배경이미지 반복속성) repeat 반복(기본값) no-repeat 반복안함 repeat-x x축으로만 반복 repeat-y y축으로만 반복 round 배경이미지를 짤리지 않게 반복하고 남는 영역은 이미지를 늘려서 처리 space 배경이미지를 짤리지 않게 반복하고 남는 영역은 이미지간의 간격을 늘려서 처리 background-positio..
[CSS3강좌] 6강 리스트(ol, ul)관련 속성 ** 영상으로 보고 싶은 분은 아래주소를 클릭하세요. https://www.youtube.com/watch?v=j-TLmxPziLM 1. 속성정리 속성명 설명 list-style (기호나 번호를 바꾸는 속성) ul disc 검은원 circle 빈원 square 사각형 none 없앰 ol decimal 숫자(기본값) decimal-leading-zero 10미만의 숫자앞에 0을 붙임 upper-roman 대문자 로마자 표시 lower-roman 소문자 로마자 표시 upper-alpha 대문자 알파벳 표시 lower-alpha 소문자 알파벳 표시 none 번호 없앰 list-style-image url(경로); ul{ list-style-image: url(ddd.png); } 2. ul의 기호변경 1) 코..
[CSS3강좌] 5강 FONT(글자관련속성) ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=6u1bYDdJmHM 1. 속성정리 속성명 설명 font-family (글꼴 지정속성) serif 명조체 계열 sans-serif 고딕체 계열 font-size 글자 크기 지정 속성 - 사용단위: px, %, em 등, 키워드 : 영문크기 font-weight (글자 굵기 지정 속성) normal 원래 굵게 나오는 글자를 기본상태 bold 글자를 굵게 지정 숫자지정 100~900사이의 숫자 지정(높을수록 굵음) font-style (글자 기울기 지정 속성) normal 기울어져 나오는 글자를 기본상태 italic 글자를 기울게 지정 font-variant (소문자→작은대문자) normal 소문자를..
[CSS3강좌] 4강 TEXT(글자관련속성) ** 영상으로 보고 싶은 분은 아래를 클릭해주세요. https://www.youtube.com/watch?v=L7zdQ6uV3fY 1. 글자관련 속성 정리 속성명 설명 color (글자색 지정 속성) 키워드 h1{ color: red; } =>영문 rgb방식 h1{ color: rgb(100,100,100); } hsl방식 h1{ color: hsl(50,20%,50%); } hex코드 h1{ color: #000000; } rgba방식 h1{ color: rgba(100,100,100,0.5); hsl방식 h1{ color: hsla(50,20%,50%,0.5); } text-align (문단 가로 정렬) left 글자를 왼쪽에 지정 right 글자를 오른쪽에 지정 center 글자를 가운데 지정 ju..
[CSS3강좌] 3강 CSS색상넣기(컬러값처리) 1. CSS색상(컬러)값의 종류 구분 정리 CSS2 키워드 영문으로 컬러값 작성 ex) color: red; rgb 레드그린블루수치작성 ex) color: rgb(20,20,20); hsl 색상,채도,명도수치작성 ex) color: hsl(70,70%,70%); hex rgb를 16진법코드 변환 ex) color: #333333; CSS3 rgba rgb방식에 alpha(투명도)추가 ex) color: rgba(20,20,20,0.5); hsla hsl방식에 alpha(투명도)추가 ex) color: hsla(70,70%,70%,0.5); 2. 컬러값을 적용 시킬 수 있는 CSS속성명 속성명 정리 코드예시 color 글자색 지정 속성 h1{ color: red; } background-color 배경색 ..

728x90
반응형