웹다이어리

GOOD WEBSITE

Design https://wiss.tistory.com/
Coding https://webzz.tistory.com/
Tutor https://wtss.tistory.com/
Edu https://wess.tistory.com/
Css https://wsss.tistory.com/

BRACKETS

보기->테마->brackets Dark, 글자 크기, 글꼴 재설정
파일->확장기능관리자->beautify(자동정리),emmet(자동완성), custom work(상단 탭 나타냄), indent guide(들여쓰기 가이드),color highlighter(색 보여줌) 등 설치
*새로운 html 파일 수정 시 6~9라인, 84라인 등 필요 시 내 것으로 재설정
img파일 다운받을 때: coding폴더->html폴더->img 넣을 폴더 안에 새 폴더(간단한 이름: img) 만들기->img폴더에 img 저장
이미지 삽입: img+tab (img src="img/html.gif " style="width: 70%")
목록: ul, li 요소 사용
본문 내용 나누기: div class=" " ~ /div 요소 사용
제목: h2 id="intro" class=" " ~ /h2 요소 사용
박스에 내용 추가: p class=" " ~ /p 요소 사용
내용 추가: p ~ /p요소 사용
주석 추가: pre class=" "code; ~/code,/pre 요소 사용
drag->shift tab: 코드 맨 앞으로 옮김(주석 추가 시 사용함)
brackets(coding-html)에 새 폴더 만들기: coding 폴더 안에서 우클릭->새 폴더 만들고 우클릭->index.html만들기
!+tab: doctype설정,

HTML

HTML(HyperText Markup Language): 웹 문서를 표현하기 위한 하이퍼텍스트 마크업언어
태크(tag): HTML에서 정보를 전달하는 방식을 의미
여는 태그(Opening tag): 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성
닫는 태그(Closing tag): 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그와 같음
내용(Content): 요소의 내용
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소라고함

CSS

CSS(Cascading Style Sheet): HTML로 작성된 문서를 쓰기 위한 스타일 시트 언어
CSS선택자(selector): HTML 요소 태그를 선택 접근하여 스타일을 지정케함(종류: 모든 요소, 특정 요소, 속성, 다중, id, class, group, 하위, 결합 선택자 등)
CSS속성(property): 선택자{ 속성: } 형태(종류: 박스, 텍스트 꾸미기, 색상, 배경, 여백, 테두리, 페이지 레이아웃, 정렬, 리스트, 그림자 등)
CSS속성 값(value): 속성을 지정해줌, 수치 지정 방식과 키워드 지정 방식으로 나뉨, 단축형 가능

RANDOM PHOTOSHOP

ctrl+n: NEW프로젝트 열기
image->canvas size 조절
alt delete: 색 겹침 지우기
ctrl + +:" 캔버스 보이는 크기 조절
TEXT툴 왼쪽 클릭->holizontal type tool 선택 후글씨 사이즈, 색 조설
*글씨가 반대로 써질 때: layer panel의 background 클릭->상단edit 설정->preference->east asian으로 설정->포토샵 재실행

BOOK FOR PHOTOSHOP

Ctrl + N: 새 파일 만들기
레이어 패널: F7
Ctrl + Z: 작업 취소하기

이미지: (참고-https://unsplash.com/t/nature)

Ctrl + O: 이미지 불러오기
Ctrl + 1: 이미지 100%비율로 확대
Ctrl +: 이미지 확대/ Ctrl + -: 이미지 축소
작업 창 정렬: window->arrange(이미지 불러와야 창 분리됨)
Ctrl + K: 환경설정(edit->preference ->general ->unit ruler )
Ctrl + F8: 정보 (window->info->아래 화살표 클릭->efficiency 체크->100%로 변경됨)
색상코드: (참고-https://materializecss.com/color.html)->핵사코드 복사
새 도형 색 변경 안될 때: layer에서 직접 변경
Ctrl + T: 이미지 크기 변경
layer double click: 자물쇠 풀림->왼쪽 툴바 move tool 체크-> auto select 체크->layer 체크
Alt + Ctrl + G: 클리핑 마스크(사진 아래 alt 누르기 or layer->creat clipping mask)
글씨체 변경: TTF파일 다운로드 압축 푼ttf 파일 우클릭 설치 (참고-https://noonnu.cc/)
Alt + Delete: 배경색 바꾸기
Shift+layers: 결합 이동
도형 서식: 도형선택-> fx클릭->stroke
레이어 서식 복사: 도형 우클릭->copy layer style 클릭->다른 도형 우클릭->paste layer style

GOOD WEBSITE

가상현실, 3D효과: (참고- https://threejs.org/examples/#webgl_lights_spotlight)
구글 웹스토어: muzli, Surfit 설치
muzli: behance awwards codrop codepen csswinner csstric

CSS

속성: margin padding width height Text-align font-size

BOOK FOR PHOTOSHOP

u: 도형 툴
i: 색 추출하기
클리핑마스크: 레이어 사이에 마우스를 갖다 대고 alt누름->하위레이어 클릭
도형서식: 레이어선택->하단 fx클릭->stoke, dropshadow설정
선택영역편집: marquee툴 선택->점선도형그림->점선 추가,삭제로 조정->상단select클릭->feather설정->inverse설정->ctrl+delete->ctrl+d
레이어마스크: 레이어를 특정 모양으로 오려내는 효과를 줌, 원본 레이어 자체는 건들지 않고 그 위에 해당 모형이 나타나도록 함
레이어마스크로 글자 안에 하위 레이어 들어가 보이게 하기(+배경도 보이게): 각 글자 레이어 병합(ctrl+e)->ctrl 누르고 병합된 레이어 클릭 후 숨김 클릭->하위 레이어 클릭 후 하단 레이어마스크 클릭->해당 레이어 복사 후 레이어마스크는 삭제

HTML

html에서는 특정 기호가 문자 데이터로 인식이 되지 않기 때문에 entity code를 사용해야 함 (참고-https://entitycode.com/)

CSS

속성: float

RANDOM PHOTOSHOP

ctrl+r: 위쪽, 왼쪽 눈금자 표시 후 끌어당겨 가이드 생성(ctrl+세미콜론(;): 가이드 지우기)
박스, 글씨 정렬: movingn tool로 정렬할 도형 선택->ctrl클릭 후 글씨 레이어 선택->

HTML

emmet cheat sheet: (참고-https://docs.emmet.io/cheat-sheet/)

CSS

속성: fz50+tab(=font-size: 50px;)/ w100p+tab(=width: 100%)
색상: 16진수 표기법, 색상이름표기법, rgba표기법, hsl표기법
선언: css 선언문(=속성: 값)/ 선언문; 선언문

RANDOM SHORTCUT KEY

shift+end: 해당 줄 마지막 글자까지 drag
shift+home: 해당 줄 첫 글자까지 drag

BOOK FOR PHOTOSHOP

ctrl+shift+i: 선택 영역 반전
ctrl+d: marquee tool 선택 해제
글자레이어 선택->레이어 오른쪽 상단 fill을 0%로 설정
layer 패널 fx(add a layer style) 클릭(또는 layer->layer style)->bevel&emboss, contour, stroke, drop shadow 등 설정
레이어 우클릭->copy layer style

GOOD WEBSITE

우수웹디자인: (참고-https://www.dbcut.com/bbs/index.php)
크롬 웹스토어: capture, web developer 설치

CSS

속성: background-color를 rgba(0,0,0,투명도)로 설정하기
선택자: id 선택자, class선택자 비교

HTML

ul>li*2>ol>li*3: ul목록 넣고 그 안에 항목 2개, 각 항목에 ol목록 넣고 그 안에 항목 3개
#+tab: ‹div id="선택자"›
상속: style 문단에서 '.class 선택자{}'로 속성 설정->‹div id="선택자"› 안에 ‹div class="선택자"› 넣기

RAMDOM PHOTOSHOP

ctrl+g: 여러 레이어 그룹으로 묶기
pen tool 클리핑 마스크: pen tool->window->path->펜툴로 그림 그리기->path패널 점선 클릭->레이어 추가->점선 도형에 alt+delete로 색 채우기->이미지 불러와서 클리핑 마스크
ctrl+g: 여러 레이어 그룹으로 묶기

GOOD WEBSITE

디자인툴조사결과: (참고-https://uxtools.co/survey-2019/)

CSS

#header+#contents+#footer
ctrl+/: 블록 주석 만들기(원래대로: 다시 ctrl+/)

HTML

태그: table thead tbody th td br 정리
표 만들기 과제-교과목 구성

RAMDOM PHOTOSHOP

ctrl+u: 이미지 색상 변경(=image->adjustment->hue)
layer double 클릭: 레이어 스타일 변경(=layer->layer style->stroke 등)
magic lasso tool: 툴을 가장자리를 따라 이동시키면 자동으로 누끼를 땀
magic wand tool: 삭제를 원하는 부분에 툴을 대고 클릭하면 이미지의 가장자리를 자동으로 인식하여 누끼를 땀
문양 넣기: custom shape tool->위쪽 패널 shape 선택
단면화: filter->pixelate->facet

CSS

속성: background-color~position

HTML

웹 표준과 웹 접근성 차이점

LANDOM ILLUSTATOR

ctrl+k: 초기 설정(pixel로)
edit->preference->general->guides grid
포토샵 도형은 백터 방식임
도형 변경: 도형툴 길게 클릭
l: 도형툴
원형툴 선택+m: 원형툴->사각형툴
v: moving tool로 변경
모서리 10px씩 움직이기: direction selection tool 선택->모서리 선택->shift+화살표아래 위
둥근 모서리: effect->stylize->round corner
원형 아래 anchor 클릭->delete
v click+alt+shift: 복사 후
ctrl+d: 연속 복사
pathfinder창 열기: window->pathfinder->divide, crop
stroke창 열기: window->stroke->cap, corner
layer창 열기: window->layer
effect->warp->

HTML

태그: table-표 만들 때 주의점
- 가장 먼저 열 최댓값, 행 최댓값 확인
- colspan, rowspan부분 확인
- rowspan 처음 나온 행 다음부터 해당 rowspan적용되는 마지막 행까지 th또는 td 생략하고 나머지만 data 입력

GOOD WEBSITE

웹 표준
- 다음: darum
- 네이버: nuli
- 웹 접근성연구소: https://www.wah.or.kr:444/

HTML

단축 표현
- ul>li*n>a[#] = ul>li*n>a[href="#"]

CSS

속성 축약형: ovh+tab(=overflow: hidden;)/ inline->inline-block으로 바꾼 다음에 margin-top
속성: text-indent, z-index
선택자: last-child 선택자

RANDOM PHOTOSHOP

텍스트, 배경 가로, 세로 가운데 정렬: 배경 이미지가 아닌 패널 크기에 맞는 배경 레이아웃 선택->텍스트 선택->정렬
레이어마스크: 배경색 설정->이미지 배치 후 레이어마스크 클릭->레이어마스크 선택 후 g(=gradiant tool) 클릭->black and white 클릭->원하는 방향으로 선 긋기

HTML

단축 표현
- .column.col$*6>h3+p
- .column.col$$*6>h3+p

속성: aria-hidden="true

CSS

속성 축약형:
속성: vertical-align
선택자: 구분(기본 선택자, 계층 선택자, 속성 선택자, 가상 요소, 가상 클래스, 링크 가상 클래스, 폼 관련 선택자

RANDOM PHOTOSHOP

텍스트, 배경 가로, 세로 가운데 정렬: 배경 이미지가 아닌 패널 크기에 맞는 배경 레이아웃 선택->텍스트 선택->정렬
레이어마스크: 배경색 설정->이미지 배치 후 레이어마스크 클릭->레이어마스크 선택 후 g(=gradiant tool) 클릭->black and white 클릭->원하는 방향으로 선 긋기

HTML

태그: span dl dd dt strong em span

CSS

속성: overflow: hidden text-overflow: ellipsis white-space: nowrap overflow-x overflow-y visibility

GOOD WEBSITE

부트스트랩: https://getbootstrap.com/docs/3.4/css/#tables

HTML

반응형

RANDOM PHOTOSHOP

패턴 만들기: 작은 크기(50px, 50px)의 레이어에 반복할 도형 삽입->edit->difine pattern->layer style->pattern overlay

인물누끼 따기
- 펜툴로 부분 누끼 땀-> 점선 활성화된 상태에서 ctrl+j-> 레이어 추가 후 배경색 채우기->필터->에드노이즈->가시안, 모노크로마틱 체크->필터->블러->가시안블러-> 누끼 딴 인물 선택 후 ctrl+l-> 순서대로 13/0.59/251 정도로 조절->ctrl+u-> 순서대로 -2/28/0 정도로 조절->필터-> sharpen-> unsharp mask-> 윈도우 브러시 또는 반창고 옆 브러시 클릭-> 설정-> load brush-> 눈물 모양 툴-> 스머지 툴로 변경 후 작업

HTML

레이아웃 연습

HTML

태그: address form fieldset legend input label button
속성: maxlength

CSS

속성 축약형: ul>li*5>a[#]>img[src="img/gallery$$.jpg" alt="갤러리$"]

HTML

태그: HTML5에 새롭게 추가된 태그 HTML5에 없어진 태그 시멘틱 태그 section nav main aside header footer article

LAYOUT

responsive layout: 시멘틱 태그 처음 사용함

HTML

html5shiv
조건식 주석

RANDOM ILLUSTRATOR

GOOD WEBSITE

https://kenwheeler.github.io/slick/

JAVASCRIPT

slick 웹: get it now 다운로드->css폴더에 slick.css, slick-theme.css파일 넣고 js폴더에 slick.min.js, jquery.min_1.12.4.js 파일 넣기-> css, js파일 둘 다 html파일에 연동시키기->(웹에서 페이지 소스보기->css, js파일 링크 클릭해서 내용 나오는지 확인)->slick 소스 가져와서 푸터 아래에 넣기-> 자바스크립트 적용하고자 하는 요소의 클래스 이름 수정->자바스크립트 소스 추가, 삭제 등

GOOD WEBSITE

https://sachinchoolur.github.io/lightgallery.js/

GOOD WEBSITE

https://wsss.tistory.com/category/Animation/Loading
https://wsss.tistory.com/
https://wtss.tistory.com/182

CSS

속성: display: flex; justify-content: center; align-items: center;
애니메이션: bar animation, circle animation, wave animation

GOOD WEBSITE

격자 가이드: https://material.io/design/layout/responsive-layout-grid.html#grid-customization
포토샵 격자: https://guideguide.me/changelog/

RANDOM PHOTOSHOP

해상도: 패널의 가로x세로 픽셀 크기, 해상도 모두 2배로 늘려서 작업-> 실제 해당 그림을 디바이스에서 봤을 때 화질 떨어지지 않음
여러 객체 양옆 간격 유지하면서 정렬

RANDOM ILLUSTRATOR

블렌트 툴: 블렌트 툴 더블 클릭-> 지정된 단계 숫자 조정-> 두 객체 연속 클릭-> 도형 상단에 그리기-> 블렌트 툴 적용 객체와 도형 선택, 우클릭-> 클리핑 마스크 적용

웹디자인 기능사 필기 시험

GOOD WEBSITE

JAVASCRIPT

반복문

SCSS

hover effect

RANDOM PHOTOSHOP

농심 사이트 만들기

GOOD WEBSITE

HTML

농심 사이트 만들기: 농심 사이트 들어가기-> 검사-> 배너 모바일용, 데스크탑용 이미지 주소 복사-> html 파일의 style 속성 background에 붙여넣기 -> 웹에 나타나는 이미지 따로 저장하기

CSS

속성: ☆ display: flex, ☆ display: grid

PIGMA

정리

GOOD WEBSITE

https://animate.style/#documentation
https://vanschneider.com/colors

JAVASCRIPT

Tab메뉴

GOOD WEBSITE

https://greensock.com/docs/v3/Eases

JAVASCRIPT

cssA, jqeryA, gsapA

CSS

inline-block: 간격이 4px씩 생김, 이미지에 사용하지 말기

GOOD WEBSITE

웹스토리보이 사이트, 쿼리 라이브러리 사이트, 코드펜, 크롬앱
PHP: https://www.mamp.info/en/windows/
PHP: https://getbootstrap.com/
PHP: https://sir.kr/g5_pds/5260

JAVASCRIPT

slider마무리

PHP

PHP시작: 닷홈 아이디 다시 만들기-> 파일질라 접속-> gnuboard, php 디렉토리 생성-> 그누보드 다운 후

REACT

리액트 시작

REACT

함수형 컴포넌트, 클래스형 컴포넌트
state설정

STUDY Reference v1.0 </doc>

2020.03.11

2020.03.12

2020.03.13

2020.03.16

2020.03.17

2020.03.18

2020.03.19

2020.03.20

2020.03.23

2020.03.24

2020.03.25

2020.03.26

2020.03.27

2020.03.30

2020.03.31

2020.04.01

2020.04.13

2020.04.14

~2020.04.16

2020.04.21

~2020.04.24

~2020.04.27

2020.04.28

2020.05.18

2020.05.22

2020.06.01

2020.06.22

2020.06.26