본문 바로가기

전체 글57

일러스트레이터 페인트 브러쉬(붓 브러쉬) 안될 때 방법 페인트 브러쉬를 사용하려는데 아래와 같은 금지 표시가 나오면서 안 되는 경우가 있었다. 처음에는 당황스러워서 이것저것 눌러보고 여기저기 찾아보고 했었는데 막상 해결방법은 정말 간단했다. 또 당황하는 일이 없도록 해결방법을 기록하려 한다. 1. 화면 상단메뉴의 Window에서 Brushes패널을 클릭해서 연다. 2. Brushes패널에서 상단 우측 맨 끝에 있는 버튼을 눌러 New Brush창을 연다. 3. New Brush창에서 Calligraphic Brush(붓글씨)를 체크하고 OK버튼을 누른다. 4. Calligraphic Brush Options창이 뜨는데 Size조절하고 OK버튼을 누른다. 5. Brush가 추가되어 작업이 가능해진다. 2022. 8. 29.
햄버거 메뉴 버튼 만들기 1. 소스 [HTML] 햄버거버튼 햄버거버튼 햄버거버튼 [CSS] [JS] 2. 결과 화면 3. 제이쿼리 문법 정리 .toggleClass() : 선택한 요소에 클래스를 추가했다가 제거했다가 반복할 수 있다. 2022. 8. 29.
웹에서 색상을 표기하는 방법 1. 16진수 표기법 16진수 표기법은 # 기호 다음에 6자리의 숫자나 알파벳을 쓰는 표기법이다. 예를 들어 흰색은 #FFFFFF, 검정색은 #000000으로 표기된다. 이 6자리는 앞에서부터 두 자리씩 #RRGGBB으로 표기되는데 R은 빨간색(Red), G는 초록색(Green), B는 파란색(Blue)을 의미한다. 2. rgb, rgba표기법 rgb표기법은 빨간색, 초록색, 파란색의 양을 십진수로 표기하는 방법이다. 색이 하나도 섞이지 않았을 경우 0으로 표기하고 가득 섞였을 경우는 255로 표기하며 색상의 양을 조절한다. 예를 들어 빨간색은 rgb(255,0,0)으로 표기한다. rgba표기법의 경우 맨 끝의 a는 투명도를 값으로 표기하는 것이다. 0에서 1까지에서 나타내는데 1은 완전 불투명하고 0은.. 2022. 8. 28.
이미지로 폰트 찾아 주는 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. 1. 산돌구름 사이트 2. 이용 방법 (1) 찾고싶은 폰트를 캡처하여 이미지 파일을 저장한다. (2) 카메라 버튼을 눌러 캡처한 이미지 파일을 업로드 하고 파른색 검색버튼을 누른다. (3) 붉은색 박스를 마우스로 클릭한다. (4) 이미지 파일과 비슷한 폰트들이 검색된다. 2022. 8. 25.
제이쿼리로 스르륵 열리는 아코디언 메뉴 만들기 (자주하는 질문, FAQ) 1. 소스 [HTML] Q 질문01? A 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 Q 질문02? A 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 Q 질문03? A 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 Q 질문04? A 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 Q 질문05? A 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyu.. 2022. 8. 25.
제이쿼리로 탭메뉴, 탭버튼 만들기 1. 소스 [HTML] 01탭 버튼 02탭 버튼 03탭 버튼 04탭 버튼 내용01 내용01 내용01 내용01 내용01 내용01 내용02 내용02 내용02 내용02 내용02 내용02 내용03 내용03 내용03 내용03 내용03 내용03 내용04 내용04 내용04 내용04 내용04 내용04 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 3. 제이쿼리 문법 정리 .attr() : 선택한 요소의 속성값을 가져온다. .find() : 특정 요소를 찾는다. .addClass() : 선택한 요소에 클래스 값을 추가한다. .removeClass() : 선택한 요소에서 클래스 값을 제거한다. .siblings() : 선택한 .. 2022. 8. 24.
디자인 참고에 좋은 컬러 조합 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. 1. 컬러스페이스(ColorSpace) 컬러스페이스(ColorSpace)는 자신이 원하는 색과 어울리는 컬러 조합을 추천해주는 사이트이다. 화면 중앙에 컬러 코드가 적혀 있는 버튼을 눌러 원하는 색을 선택하고 바로 밑에 GENERATE 버튼을 누르면 선택 색상과 어울리는 컬러 조합을 확인할 수 있다. 2. 브랜드컬러(BrandColors) 브랜드컬러(BrandColors) 는 세계 유명 브랜드의 컬러 정보를 모아둔 사이트로 원하는 컬러를 클릭하면 해당 컬러 코드가 복사되어 쉽게 컬러 정보를 얻을 수 있다. 3. 컬러 헌트(Color Hunt) 컬러 헌트(Color Hunt)는 다양한 컬러 조합을 바로 확인 할 수 있는 사이트로 테마별로 나누어져 있어 원하.. 2022. 8. 23.
테이블 1열이 고정된 가로 스크롤 테이블 만들기 (position: sticky) 데이터 양이 증가하면 스크롤 길이가 길어지면서 데이터 구별이 어려워지는데 엑셀에서는 틀 고정을 이용해서 데이터를 쉽게 파악할 수 있다. 그래서 이번에는 CSS의 position: sticky를 사용해 좌우 스크롤을 해도 테이블의 첫 번째 열은 고정되어 있는 테이블을 만들어 보려 한다. 1. position: sticky ? 부모 요소 안에서 위치값을 고정시켜준다. top, bottom, left, right 중에 하나는 필수적으로 꼭 설정해야 한다. IE11이하 버전은 지원하지 않는다. 2. HTML, CSS 소스 [HTML] Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Cell01 Cell02 Cell03 Cell04 .. 2022. 8. 23.

티스토리툴바