0403 uiux 4일차

0403 수 uiux 4일차

웹코딩 참고 사이트 김영원 강사님 ( https://kimyws.tistory.com/29 ) ( https://webstoryboy.co.kr/ ) 플렉스 개구리 ( https://flexboxfroggy.com/#ko )

 

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ). 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) 피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), 마디아님껀 좀 더 편집디자인스러움(개인적 메모) 작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스 자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

 

---

 

포토샵

 [ctrl] + [,] 레이어 눈 끄고 키기

 병합(merge) [ctrl] + [E]

 보이는 레이어 모두 병합 [ctrl] + [shift] + [E]

 보이는 레이어 모두 병합, 원본 레이어들은 남김 [ctrl] + [alt] + [shift] + [E] 

항상 원본을 남겨놔야 하니까 컨트롤 알트 시프트 e가 제일 나은 걸로. 아님 그냥 그룹으로 관리하기

convert to layers (컨버트 투 스마트 오브젝트 해제 후 그룹으로 만듦)

 

블렌딩 모드 3대장(?)

멀티플라이(곱하기) 흰색 → 투명, 겹치는 부분 → 어둡게 표현

스크린

오버레이

단축키 안되는 경우

esc

1) 블렌딩 모드 변경 시 모드 박스 테두리가 파란색으로 되어있다면 ESC 누르면 됨

2) 한영키(한글로 되어있으면 영어로 바꿔주기)

 

컬러닷지 채도 증가

이미지-어드저스트먼트(조정)-인버트(색 반전)

 

선택영역 거꾸로 마스크 만들기

 선택영역으로 영역 선택 후 [alt] + 레이어 마스크 만들기 

 그냥 레이어 마스크 만들기 누른 후 [Ctrl] + [i]

 

 

컨트롤 썸네일 클릭하면 오브젝트의 투명도에 따른 선택영역이 생긴다.(투명도 50퍼센트 오브젝트면 선택영역 선택 후 색채우기 하면 연하게 색이 채워짐)

 

---

 

박스모델

실제크기: 콘텐츠

패딩, 보더

 

약어

div*3 div (태그 연속으로 3개)

div>div*3 (div 태그 안에 div 태그 3개 만들기)

div+span+p (div span p 태그 하나씩 만들기)(응용으로 곱하기 넣어서 ○*2+●*3+◎*2 이렇게도 가능함)

챗gpt한테 emmet 태그 물어보기

 

.클래스명

div 형태로 클래스를 넣어서 만들어줘

.a*3 (div태그가 세 개 만들어짐)

span.a*3 (스판태그가 세 개 만들어짐)

 

클래스(또는 아이디)가 있는 태그 만들기(클래스 이름 정하지 않고 여러 개 만들 때)

div[class]*3 ( [class]*3을 적어도 div가 기본 설정이기 때문에 div는 안해도 됨)

span[id]*3 (

 

이름 적고 Tap키 누르면 다음꺼 이름 적을 수 있음!! 

 

 #abc*3   

<div id="abc"></div>이게 세 개 적힘

 #abc$@*3 $@(숫자 점점 증가하면서 적힘)

<div id="abc1"></div>  <div id="abc2"></div>  <div id="abc3"></div>

 

.a*2>#abc$@*3

이름이 a인 클래스 2개를 만들고 그 안에

 

.클래스 이름

#아이디 이름

[] 속성

{} 내용

div{개체$@}*3

 ㄴ div 세개를 만들건데 개체라는 이름을 넣을거고 이름 뒤에 숫자 순서대로 각 1 2 3이 들어가면 좋겠다.

div.a{개체$@}*3

 ㄴ a라는 클래스명을 가진  div를 만들 건데 ~~~ 숫자 순서대로 각 1 2 3이 들어가면 좋겠다.

 

padding-left: 10px; 줄이면 pl10;

bd 보더

bgc 백그라운드 컬러

mg 마진

pd 패딩

별다줄... 암튼 쓰고 Tap키 누르면 알아서 풀어서 써짐