본문 바로가기

분류 전체보기

 (66)
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 3 | 포토샵 - 펜툴, 피그마 입문 펜툴 펜툴은 패스를 생성하는 툴이다. 색상이 비슷하거나 이미지의 품질이 낮은 경우 패스를 직접 만들고 그 만들어진 패스를 영역으로 바꿔다가 사용한다. 사용 방법 펜툴 도구를 선택하고 처음 시작점을 찍는다 - 다음 점을 찍으면 이전 점과 연결된 선이 그어진다. - 마지막에는 처음점과 이어지게 점을 찍는다. 둥글게 선을 긋고 싶으면 다음점 찍을 때 드래그해서 원하는 선이 나오게 한다. 선의 방향이 이상하면 alt를 누르면서 방향점을 조정한다. 곡률 펜 도구를 사용하면 드래그하지 않아도 곡선으로 그어진다. 피그마 피그마란? 어도비 산하의 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업툴이다. 2021년 UX tools에서 실시한 UI툴 랭킹에서 UI 디자인, 핸드오프, 디자인 시스템 등 거의 모든 항목에서 ..
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 2 | 포토샵 심화 포토샵 심화 타이포그래피 텍스트를 가독성이 좋도록, 미적으로 감각있게 배열하는 방법이다. 폰트와 서체 서체와 폰트는 의미가 다르다. 서체는 폰트군 집합을 대표하는 이름이고 폰트는 서체 내에서 다양하게 정의된 스타일을 구분하는 것이다. 세리프와 산세리프 세리프 문자 획 끝에 작은 장식이나 선 또는 꼬리가 나와 있는 형태이다. 부드러운 느낌이 들어 책 같은 인쇄물에 쓰인다. 산세리프 문자 획에 어떠한 장식도 없이 깨끗한 선으로 구성되어 있는 형태이다. 메인 문구와 같이 강조할 때 쓰인다. 여백 네거티브 스페이스(negative space)라고도 하는 여백은 텍스트나 이미지를 둘어싸고 있는 빈 영역을 의미한다. 그래픽 요소 사이에 충분한 공간을 더하면 복잡해지는 것을 피하고 명확해질 수 있다. 여백이 없으면 ..
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 1 | 포토샵 기초 포토샵 기초 Photoshop 어도비 포토샵이란? 1988년 Adobe에서 개발하고 출시한 래스터 그래픽 편집기이다. 이미지 작업을 할 때 범용적으로 사용하고 픽셀을 이용하여 이미지를 만들기 때문에 래스터 기반 아트에 적합하다. 래스터(Raster)란? 컴퓨터에서 화상 정보를 표현하는 한 가지 방법이다. 점을 나열해서 표현하고 해상도가 떨어질 수 있다. 이미지를 2차원 배열 형태의 픽셀로 구성하고, 이 점들의 모습을 조합, 일정한 간격의 픽셀들로 하나의 화상 정보를 표현하는 것이다. Illustrator 어도비 일러스트레이터란? Adobe에서 개발한 벡터 그래픽 기반 편집기 및 디자인 소프트웨어이다. 벡터(Vector)란? 완벽하게 부드러운 선을 만드는 데 사용되는 점이다. 최대 900%까지 확대할 수 ..
[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 3 | UI/UX, 디자인시스템 UI / UX란? UI - User Interface - 어떤 제품이나 소프트웨어를 사용하게 되는 소비자가 제품과 서비스를 이용할 때 처음 접하게 되는 매개물이다. - 흔히 ui 디자인이라고 하면 아이콘, 색감, 타이포그래피 등으로 보여지는 시각 디자인을 의미한다. UX - User eXperience - 유저의 경험을 의미하며 유저가 서비스나 제품을 직접 사용하여 느끼는 것이다. - ux 디자인은 이용을 하는 이용자가 편리하고 만족하게끔 ui를 디자인하는 것을 의미한다. UI 디자인 UX 디자인 직관적이고 심미적으로 만족스러운 시각적/대화형 인터페이스를 구축한다. 사용자의 문제를 식별하고 해결한다. 제품 개발 프로세스를 뒤따른다. 제품 개발 프로세스에 선행된다. 시각적 대화형 요소를 디자인한다. 사용자..
[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 2 | :root, 라이브러리 가상 클래스 :root - 웹 문서에서 가장 상위에 해당하는 태그이다. - 문서에서 쓰일 기본적인 스타일을 지정할 수 있다. 사용방법 1. :root 가상클래스 선택자 내부에 --변수명이라는 변수를 만들어서 css 값을 넣어준다. 2. 변경할 선택자 내부에 var(--변수명)을 입력하면 해당 스타일로 변경할 수 있다. 유용한 라이브러리 Swiper.js 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 효율적으로 만들어준다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions a..
[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 1 | jQuery - 메소드(2), Bootstrap(1) jQuery 메소드 요소 추가하기 append $('선택자').append('추가할 요소'); # 선택자의 마지막 자식으로 요소가 추가된다. # 태그 입력시 html 태그로 받아들인다. prepend $('선택자').prepend('추가할 요소'); # 선택자의 첫번째 자식으로 요소가 추가된다. before $('선택자').before('추가할 요소'); # 선택자의 이전 형제로 요소가 추가된다. after $('선택자').after('추가할 요소'); # 선택자의 다음 형제로 요소가 추가된다. 요소 삭제하기 remove $('선택자').remove(); # 선택자를 삭제한다. empty $('선택자').empty(); # 선택자의 모든 자식 요소를 삭제한다. 요소 탐색하기 parent $('선택자')...
[새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 3 | JS - 이벤트, jQuery - 메소드(1) 이벤트 addEventListener - 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드 click : 클릭 mouseover : 요소에 커서를 올렸을 때 mouseout : 마우스가 요소를 벗어날 때 mousedown : 마우스 버튼을 누르고 있는 상태 mouseup : 마우스 버튼을 떼는 순간 focus : 포커스 됐을 때 blur : 포커스가 벗어나는 순간 keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생 keydown : 키를 누르는 순간에만 발생 keyup : 키를 눌렀다가 떼는 순간 load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료되었을 때 resize : 스크롤이 발생할 때 unload : 링크를 타고 이동..
[새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 2 | JS - DOM 요소 다루기 요소 다루기 태그 내부 내용 - 태그 내에 들어갈 문자열을 지정 innerText : 요소 안의 텍스트를 가져오거나 수정한다. innerHTML : 요소 안의 '코드'를 가져오거나 수정한다. textContent : innerText처럼 텍스트 정보를 표시한다. 속성 setAttribute() : 속성값 설정할 수 있다. getAttribute() : 속성값 가져올 수 있다. html js const pooh = document.querySelector('#pooh') # 메소드로 속성에 접근 pooh.getAttribute('src'); # 점으로 속성에 접근 pooh.src; js에서 style 속성 바꾸기 요소.style.속성 = '속성값'; ex) li.style.backgroundColor = ..

티스토리툴바