오늘보다 더 나은 내일

1. shape tool (U) - 모양 편집 후 패널 안쪽에 등록시킬 수 있다. ㄴ> 모양 만들 때에는 패스로만 구성 되어있어야 등록 가능한 상태가 됨 - 패스 오퍼레이션 또는 얼라인 위해서는 작업 할 패스 또는 쉐입이 패스 선택툴로 모두 선택되어 있어야한다. - 패스와 쉐입은 바운딩박스 띄워 변형 가능함 - 패스를 쉐입으로 등록하는 방법 1) 패스를 작업자 스타일에 맞춰 구성하여 만든다 2) 상단메뉴 - edit- define custom shape - 레이어 별로 따로 떨어져 작업된 쉐입들은 이동툴로 관리하면 된다. - 패스 셀렉션툴 이용하여 선택된 쉐입 또는 패스를 잡아 이동 복사 - 이동 복사 : alt+이동 - 수평 수직 이동 복사 : alt+ shift+ 이동 - 쉐입, 패스 이용하여 글자 ..

1. pen tool 이어서 - 곡선 생성 시 이미지의 다음 외곽을 따라 마우스를 움직이면 편리하게 작업할 수 있다. - 작업 중 포인트가 잘못 된 부분에 찍혔다면 ctrl 눌러 direct selection tool 호환하여 포인트와 핸들 수정 가능 - 교차면에 대한 영역관리는 패스를 추가적으로 덧대어 path operations 설정아래 관리할 수 있도록 만들 면 된다. - 작업 시 이미지의 외곽보다 1px 가량 안 쪽으로 들어와 패스 작업해주는 것이 좋다. 1) path operations : 패스 더하기 빼기 (첨부파일 shape_tool_option 참고) - 패스 패널에서 레이어 영역으로 관리 위해서는 단축키 필요 - 영역전환 : ctrl+썸네일클릭 - 영역 제외 : ctrl+alt+썸네일클릭..

※ 도큐먼트 회전 시 상단메뉴 - 이미지 - image rotation 들어갈 수 있다. 1. 변형 (ctrl+T) : 선택된 레이어의 이미지를 다양한 구도로 변형시켜줄 수 있는 기능이다. 1) 폭 조절 : 사이즈조절 + shift - CS 하위 버전에서는 shift 를 눌러야만 비율 고정된 상태로 사이즈 조절할 수 있다. - 특정 부위 고정시켜 사이즈 조절 : alt+이미지 부위 클릭 ㄴ> alt+ 변형해야만 고정부위 활용할 수 있다. 2) 회전 90도 , 180도회전 : shift+회전 *회전 또한 특정 부위 고정시켜 작업할 수 있다. ㄴ> 모든 변형은 알트눌러 위치 고정시켜 변형할 수 있다. 3) distort : 원하는 포인트의 면적을 개별적으로 인식하여 원근 왜곡줄 수 있는 기능이다. - 원근 ..

1. 색 color 1) 명도 : 음영 - 높은 명도 (밝은색) :순수한, 깨끗한, 긍정적인, 가벼운, 맑은, 완벽한, 진실된, 간결한 - 낮은 명도 (어두운 색): 진중한, 중후한, 미스테리한, 권위적인, 고급스러운, 세련된 2) 채도 - 높은 채도 (선명한색): 진보적인, 경쾌한, 활력있는, 동적인, 유아틱한, 화려한, 이국적인, 모험적인, 이질적인 - 낮은 채도 (엷은 색): 소극적인, 정적인, 감성적인, 빈티지한, 침체된, 우울한, 신비로운, 고급스러운, 세련된 3) 톤 tone : 명도나, 채도가 색상과 함께 결합된 상태를 말한다. 4) 배색 : 둘 이상의 색을 미적으로 배열·조합하는 것. - 유사색 배색(비슷한 색) : 무난한, 질리지 않는, 아늑한,차분한, 풍성한, 안정적인, 건전한, 온화한..

※ 포토샵 프로그램 초기화 : ctrl+shift+alt 누르며 프로그램 클릭 ※ 새 작업창 만들기 : 상단메뉴 - 파일 - new (ctrl+N) ※ 환경설정 (프리페어런스/ 컨트롤+K) : 상단메뉴 - edit- priference- 제네럴 (컨트롤+K) ※ 웹 형식의 이미지로 저장하기 : 상단메뉴 - 파일 - export - save for web (ctrl+alt+shift+S) ※ JPG : 웹에서 가장 흔하게 볼 수 있는 이미지 파일 형식 : 색상표현 섬세하고 정교하고, 낮은 용량이 장점이다. 1. 선택 영역툴: 지정된 영역 안에서만 제한적으로 작업할 수 있도록 도와주는 툴 ※ 선택영역반전 : ctrl+shift+I ※ 선택 영역 형태 조정 ㄴ 영역 생성 후 > 우클릭 > 트랜스폼 셀렉션 > ..

1. 포토샵 구성 인터페이스 1) 툴박스 : 작업에 필요한 도구(툴) 영역 2) 상단메뉴바 : 포토샵의 모든 기능 들어있는 영역 3) 옵션바 : 툴 옵션, 상세설정 영역 4) 패널팔레트 : 작업 상세 설정할 수 있는 패널 집합영역 5) 도큐먼트 : 작업 영역 6) 작업탭 : 열려있는 파일 사항 7) 윈도우 : 모든 패널 관리 2. 해상도 PPI (pixel / inch) 1) 웹용(72): 용량이 적기 때문에 이미지 로딩이 빠른시간 내에 이뤄진다. 2) 작은 인쇄물 (150) 3) 인쇄물(300): 고품질, 고용량 (포스터와 같이 큰 인쇄물 작업 시) 3. 컬러모드 1) RGB : 웹 컬러/ 빛의 3원색 /화면 안 쪽에 들어가는 모든 디자인에는 RGB 컬러모드 적용된다. 2) CMYK : 잉크, 인쇄 컬..

1. max-width - display:block 일때 최대값을 지정하여 너비를 유연하게 하면서도 기준값 이상 커지지 않게 하는 속성

1. float - 상단메뉴 만들때: 한줄에 나오게 하여야한다 1) display: inline-block 텍스트 요소 사이 공백이 생긴다 (정교한 디자인이 어렵다, 하나하나 수치 수정해야한다) 2) float: left 공백이 없다 (너비를 %로 지정하면 자동으로 나눠서 맞춰준다.) * 공백 없애는 방법 1) li엘리먼트 사이 엔터 공백을 하나하나 지운다 2) li엘리먼트 사이 엔터 공백을 주석(/*)을 달아 없애준다 3) CSS font-size-0를 따로 만들어준다 4) li에 float:left;를 준다. - block요소는 float요소를 무시한다 → 자식 요소에 float을 썼다면 부모요소는 자식 요소가 없는 줄 알고 높이가 최소화 된다 그래서 부모요소에 class="row"를 주고 반드시 아..

1. 중간정리: 웹 퍼블리싱 : HTML, CSS, JS HTML 1)태그 - div 계열(block 계열) ex) section, article, nav, ul, li - span 계열(inline 계열) ex) a, img, span 2)관계: 부모자식, 형제 CSS 1) display - inline, inline-block: 글자화(가로) - block: 블럭화(세로) - none: 사라진다 * 중앙정렬: block {margin: 0 auto;} inline-block {text-align:center;} 2) position - static: 사람 - relative: 사람, 유령집 - absolute, fixed(스크롤 따라다닌다):유령, 유령집 2. 좌측 사이드 토글바 만들기

1. position-fixed - 스크롤바를 따라 다닌다 - 유령: absolute,fixed/사람:relative,static 2. ::before/ ::after - 공통되는 데이터가 엘리먼트의 말머리나 말미에 넣어야 할때 CSS 속성을 부여하여 한번에 바꿔줌 - 선택 엘리먼트와는 부모자식 관계이다.(before는 가장 첫째 자식, after는 가장 막내자식) - ul > li::after { content:"님"; } 입력시 모든 div텍스트 뒤에 님이 표시됨 - 기본 display는 inline이다 연예인 1 연예인 2 연예인 3 연예인 4 연예인 5 연예인 6 연예인 7 연예인 8 연예인 9 연예인 10 /* ::after => 새로운 막내자식을 추가한다. */ ul > li::after { ..

1. table 기본 - 기본적으로 table>(thead>tr>th)+(tbody>tr>td)로구성 - : 표의 가로(줄) - : 표의 세로(칸) - : 기준 정보가 되는것은 th로 감싸준다 * 테이블에서 칸수는 반드시 맞춰준다 - HTML 표의 테두리 선 나타내기 - CSS {boder-collapse:collapse;}는 표의 줄들을 한줄로 합쳐준다 만들어준다 2. table정렬 및 병합 - 표 특성 상 좌측상단 첫칸(table>thead>tr:first-child)만 너비를 지정하여도 전체 크기가 바뀐다 - 또는 thead위에 (칼럼)마크업하면 맨 좌측 칸만 크기가 고정된다 - 표의display는 table(block), inline-table(inline-block)있다. - 가로 2칸 병합: ..

1. white-space: nowrap; - 자동 줄바꿈 금지 - 영역이 한정될 경우 텍스트가 영역외로 나가게 된다 2. overflow: hidden; - 영역외로 나간 텍스트를 숨기는 기능 3. overflow: scroll; - 스크롤을 생성하여 보여주게 한다 4. overflow: auto; - 텍스트 길이가 영역외로 나가면 스크롤 생성/ 영역 내이면 스크롤바 작동하지 않음 * 영역내에서만 보이게 잘리고 말미에 ...표시 { white-space: nowrap; overflow: hidden; text-overflow:ellipsis } 5. 3차 메뉴 쉽게 구현하기 1. HTML 입력 nav.menu>ul>li*4>a[href="#"]{1차 메뉴 아이템 $} +ul>li*4>a[href="#"..