2020.03.11
브라켓 확장기능
- Emmet : 단축키
- Custom Work : 상단에 탭 메뉴 기능
- Beauty : 코드 정렬
- Indect Guide : 코팅 라인 가이드
단축키
- 복사하기 : Ctrl + C
- 붇여넣기 : Ctrl + V
- 전체 복사하기 : Ctrl + A
- 4칸 이동하기 : Tad
- 4칸 반대로 이동하기 : Shift
- 여러칸 만들기 : ul>il*10 Tad
- 작업 취소하기 : Ctrl + Z
- 블랙켓 글 편하게 소환 : ! + Tab
사이트
2020.03.12
포토샵
- 줄자 : Ctrl + R
- 줄자 박스맞춰주는거 : Shift + Ctrl + ;
- 레이어 글자 복사하기 : Alt
- 텍스트가 그림처럼 인식함 : Ctrl + E
- 레이어 복사 : Ctrl + J
- 채도 변경 : Ctrl + U
- feather 복사 : Ctrl + F6
브라켓
- 박스 : div
- 이름 지정 : id
- 아이디가 붇은 박스 지정 : div#box1
- 크기 글시 색 지정 : {width: 100%; height: 300px; background: red;}
- 이미지 불러오기 : img src="이미지 경로" alt="사진대처문자" style="width=크기"
- 크기 쉽게지정하기 : w크기 + Tad , h크기 + Tad
- 색상 불러오기 : bgc#색갈코드 + Tad
- 전체 선택하기 : *
- 여백 지우기 : {margin: 0; padding: 0;}
- 코드처럼 보이게 하기 : code
- 글자 크기 : font-size: 크기
- 글자 위치 : text-align: 위치
- 링크 추가 : a href="파일 위치"
브라켓 단축키
- 시작 자동문 : ! + Tab
- 자동 괄호 만들기 : Tab
- 같은 줄 만들기 : Ctrl + D
사이트
크롬 웹 스토어
2020.03.13
브라켓
- 기호 보이게하기: &#코드;
- 사이드 붇히기: float: 방향
- 깨진 박스 보이게하기: clear
- 글자 대문자로 보이게하기 : text-transform: uppercase
포토샵
- 줄자 지우기: Ctrl + ;
사이트
2020.03.16
브라켓
- 아이디박스 바로만들기 : div#이름 + Tad
- 아이디박스 같은이름으로 여러개 만들기 : div#이름>div#이름*만들숫자 + Tad
- 박스 색갈 : background-color : #색갈 코드
- 한칸식 드레그 : Shift + 방향키
- 한줄 끝 드레그 : Shift + End
- 한줄 드레그 : shift + Home
- 숫자형 목록코드 :
<ol></ol> - 이름 표시 : class,id
- 글자 폰트 위치 지정바로가기 : li h,w 크기 + Tad
포토샵
- 선택 툴 반전 : Ctrl + Shif t+ I
- 흑백 : Ctrl + Shift + U
- Curves : Ctrl + Shift + M
사이트
2020.03.17
브라켓
<div id="이름">바로만들기 : #이름 + Tab<div class="이름">바로만들기 : .이름 + Tab- 부모의 값을 상속 : inherit
- RGB로 색갈넣기!(A는 투명도임!) :
<background: rgba(R, G, B, A);>
포토샵
- 선택된 레이아웃 그룹화 : Ctrl + G
사이트
크롬 웹 스토어
2020.03.18
브라켓
- 표만들기 : table
- 세로 늘리기 : tr
- 가로 늘리기 : td
- 표 세로 합치기 : rowspan
- 표 가로 합치기 : colspan
- 글시 중앙에 가게하기 : class="ce va"
- 글시 밑으로 내려가게하기 : br
사이트
2020.03.19
브라켓
- 친구 지정하기 : +
- 태그 여러개 지정하기 : ,
- 레이아웃 가운대 정렬 : m0-a + Tab
- 코드 나열할때 뒤에 있는 코드의 우선순위가 높다.
- 글 끝날때 /* 주석표시로 보기 편하게 하자!
일러스트
- 일러스트 설정 : Ctrl + K
- 10칸식 늘리기 : Shift + 방향키
- 원 만들기 : L
- 네모 만들기 : M
- 선 정렬맞춰서 복붇하기 : 선택 후 Alt + Shift
- 자른 면 선 이어주기 : Ctrl + J
- 페스파인더 : Shift+ Ctrl + F9
- 스트록 : Ctrl + F10
- 레이어 : F7
- 레이어 제일 뒤로 보내기 : Ctrl + Shift + [
2020.03.20
브라켓
- 주석표시 편하게하기 : 드레그 후 Ctrl + /
- text-align: right; 쉽게쓰기 : tar + Tab
- 5px 20px 6px 20px 쉽게쓰기 : p5-20-6-20
사이트
2020.03.23
브라켓
- 의미가 있는 이미지(img태그)는 대처문자(alt)를 꼭 넣자.
- 바로만들기 ""안에 글시까지 넣기 : a[#] + Tab
(다른 에디켓에서 간흑 바로만들기가 안될때 a[href="#"] + Tab으로도 됩니다.) - 마지막 선택자 지명하기 : .이름:last-child {}
(자식을 지명할땐 ".이름:last-child 자식이름{}"으로 하자.)
사이트
2020.03.24
브라켓
- vertical-align: top: 이미지 간격을 없에줌
- <div class="column col1"> : .col$ + Tab
($를 2개를 쓰면 숫자가 2글자가 됩니다.) - 접근성을 위한 숨기기 : aria-hidden="true"
2020.03.25
브라켓
- {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} : 글자 한줄로 만들기
사이트
smudge효과
- 팬툴로 선따기
- Ctrl + J 로 레이어에 그린거 두기
- 배경 레이어 Filter > Add Noise(15%,Gaussian,Monochromatic)
- 배경 레이어 Filter > Gaussian Blur(1.5) - Ctrl + L > Leveks (13, 0.59, 221)
- 그림 레이어 Ctrl + U > Hus Saturation (-2, 28, 0)
- 그림 레이어 Filter > Unsharp Mask (123, 7.7, 0)
- 팬 종류 Pastel 34
2020.03.29
사이트
최신 공지사항 만들기
-
HTML
<div class="notice5"> <h4>최신 <em>공지사항</em></h4> <ul> <li><a href="#">JPE, PNG, GIF의 차이점은 무엇인가요?</a><span>2020.03.25</span></li> <li><a href="#">Ul 디자인과 Ux 디자인의 차이점을 설명하세요?</a><span>2020.03.25</span></li> <li><a href="#">인터렉션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2020.03.25</span></li> </ul> <a href="#" class="more" title="더보기">더보기</a> </div> -
CSS
.notice5 {position: relative; border: 1px solid #ccc; margin-top: 15px;} .notice5 h4 {border-bottom: 1px solid #ccc; padding: 8px 10px; color: #2c94c4;} .notice5 h4 em {color: #cf3292;} .notice5 ul {padding: 10px; } .notice5 li {overflow: hidden; padding-left: 8px; background: url(../img/dot.gif) no-repeat 0 8px;} .notice5 li a {float: left; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .notice5 li span {float: left; width: 30%; text-align: right;} .notice5 .more {position: absolute; right: 9px; top: 9px;} - border: 1px solid #ccc; : 박스 만들기
- border-bottom: 1px solid #ccc; : 밑선 만들기
- position: absolute; right: 9px; top: 9px; : 위치 초기화 후 지정
- float: left; : 가로정렬
- overflow: hidden; : float 깨짐 형상 방지로 부모한테 넣자!
- text-overflow: ellipsis; : 지정된 칸 넘어간 긴 글시 ...으로보이기
- white-space: nowrap; : 길고 긴 텍스트 문자 1줄로 만들기
- margin-top: 15px; : 위쪽 여백
- padding-left: 8px; : 이미지와의 간격
- background: url(../img/dot.gif) no-repeat 0 8px; : 아이콘
no-repeat : 이미지 반복여부 결정(no)를 주면 반복안함!
2020.03.31
브라켓
- 부모 > 부모 : 첫번째 자식만 적용
- width = margin + padding + border
비주얼 스튜디오 코드
- Ctrl + D : 같은 글 여러개 동시선택가능
- Alt + 클릭 : 선택한 줄에 글 동시에 쓰기가능
- Alt + 방향키 : 줄 위치 위아레 변경가능
- Ctrl + Alt + 방향키 : 방향키 방향으로 글자 복붇하기
- Alt + 마우스 드레그 : 처음 마우스 커서 기준으로 드레그하기
- Ctrl + E : 줄 정리
사이트
2020.04.02
비주얼 스튜디오 코드
- .box.sha2*10>.shadow$$@11 : 11번부터 만들기
일러스트
- Ctrl + Shift + I : 일러스트 perspective grid tool 삭제방법 (원근감 격자도구)
사이트
2020.04.06
비주얼 스튜디오 코드
- Ctrl + H : 드레그 한 단어 모두 선택
- Shift + Tab : 글 앞에 여백 지우기
사이트
2020.04.13
비주얼 스튜디오 코드
- 자동완성 보기 : Ctrl + 스페이스바
제이쿼리 (웹 디자인 기능사 실기)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var slideCount = $(".slideImg").length;
//alert(slideCount);
var currentIndex = 0;
var slidePosition = 0;
setInterval(function(){
if(currentIndex < 2){
currentIndex++;
} else {currentIndex = 0;}
slidePosition = currentIndex * (-1000)+"px";
$(".slideList").animate({ left: slidePosition },400);
},3000)
</script>클리어 픽스
/* clearfix */
.clearfix::before, .clearfix::after {
content: ''; display: block; clear: both;
}2020.04.14
사이트
자바스크립트 반복문
for(let i=0; i<arr6.length; i++){
document.write(arr6[i]);
}2020.04.21
일러스트
- 줄자 만들기 : Ctrl+R
사이트
SCSS
- 클레스 다중 선택 (SCSS)
div[class^="bubble-"]{} - px+%다중계산
left: calc(100% - 150px);
2020.04.29
비주얼 스튜디오 코드
- Ctrl + Shift + k : 행 삭제
- Ctrl + X : 행 잘라내기
- Alt + Up,Down : 행 위아레로 이동하기
- Ctrl + Enter : 아랫줄에 행 산입
- Ctrl + Shift + Enter : 아랫줄에 행 산입
- Ctrl + Alt + Up,Down : 여러줄 선택
- Ctrl + Shift + L : 현제 드래그한 글 단체선택
- Ctrl + [,] : 들여쓰기,내여쓰기
- Ctrl + / : 주석 처리