-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renweal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[branding]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
-
COA Lab's Works
[renewal]
더보기
COA Lab's Trend
-
레이아웃의 흐름
그동안 레이아웃을 정리하는 방법론은 몇번의 흐름이 있어왔다. 90년대 중반에 사용하던 프레임셋 요소를 시적으로, 90년대 후반부터는 행열정렬이 가능한 테이블요소 가지고 페이지의 레이아웃에 사용하였으며, 2000년대 들어서서는 div같은 블록요소에 위치속성( float이나 position 등)을 부여하여 패이지 레이아웃을 정리하여왔다. 2010년대 웹표준 문서에 대한 규격이 적극 권장되면서 드디어 논리적, 의미론적 시맨틱 태그가 새롭게 탄생하고, 이 시맨틱 태그와 위치속성(여전히 float, position 등)을 할용하여 레이아웃을 정리하였다. 이후, 위치 속성 중 flex가 보편화 되어 가는 추세이며, flex를 발전 시킨 grid를 권하고 있는 흐름이다. 우리 나라의 경우 IE에 대한 애정도가 높았고..
더보기
-
디자이너가 알아야 할 passive income 전략
누구든 부지런해야 한다. 역시 살아 숨쉬는 동안은 부지런히 움직이는 방법이 최고라는 진리. 템플릿도 만들어 배포하고, 다양한 인쇄물도 제작하고, 또 나에게 있는 전문 지식들을 많은 사람들에게 나누어 공유하는 일들도 게을리 하지 않는것은 두말하면 잔소리일것이다. https://dribbble.com/stories/2020/02/27/passive-income-for-designers?utm_campaign=2020-03-10&utm_medium=email&utm_source=courtside-20200310 5 passive income strategies every designer should consider It's never a bad idea to diversify your income source..
더보기
-
AI Tools for Designers
점점 사용하기 간편해지고 좋아지는 것일까 의문이기는 하지만, 시간을 줄여주고, 더 좋은 효과들을 많은 고민과 연구 없이 사용하게 될 수 있는게 풍부해지고 있다는 점은 분명하다. https://digitalsynopsis.com/design/ai-tools-for-designers/ Top 8 AI Tools For Designers Artificial Intelligence can help designers boost their creativity by providing them with material and inspiration. It can also speed up workflow by taking care of boring and tedious tasks that require a lot of t..
더보기
-
UI/UX 2020 Trend
https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6 (자료출처) 8 UI design trends for 2020 The rapid growth of technology influences design trends every year. As designers we need be aware of the existing and upcoming design… uxdesign.cc Welcome to Swiggy by Saptarshi Prakash Onboarding animations — Virgil Pana Menu toggle close animation — Aaron Iker Tab bar active animation — Aaron Ike..
더보기
COA Lab's HTML
-
semantic tag
시맨틱 요소는 브라우저와 개발자 모두에게 각 영역에 태그로 그 의미를 부여한다. 비의미론적 태그 : , - 내용에 대해 아무 의미가 없는 공간만 분할해 주는 태그이다. 의미론적 태그 : , , - 내용을 명확하게 정의한다. 시맨틱 태그는 태그 자체가 보여주는 기능은 없지만, 영역에 대한 의미를 명확하게 정의하는 태그로서, 블록요소이며, 아래와 같은 태그가 있다. 태그 설명 article 게시물, 기사, 컨텐츠내용을 정의 aside 좌우측에 들어갈 컨텐츠를 정의 details 상세설명을 정의 figcaption figure의 설명을 정의 figure 특별한 이미지, 도표, 사진 등 시각적 요소를 정의 header 상단에 로고, 제목요소 등의 내용을 작성 footer, address, header는 자식요소..
더보기
-
entity와 Emoji (엔티티와 이모티콘)
엔티티(entity) 문자는 예약어라고도 하며, 웹브라우저에서 예약된 문자를 표시하기 위해 사용한다. ※ 예를 들어 ..보다 작음의 기호로 (
더보기
-
form 요소
HTML 양식은 검색, 로그인, 회원가입 등에서 사용자 입력을 수집하는 데 사용하며, 사용자 입력은 처리를 위해 서버로 전송된다. ※ form, fieldset 요소 태그명 설명 인라인 | 블록 form 입력값을 처리하는 프로그램으로 전송할 때 사용하는 태그 블록 action 속성을 갖는다. 서버에 전달할 값을 처리하는 프로그램 주소를 지정한다. method 속성을 갖는다. 어떤 방식으로 전달할지를 정의하며, get방식 : 검색 등 비보안 데이터를 위해 사용(method="get") post방식 : 중요정보 보안 데이터를 위해 사용(method="post") fieldset > legend 입력양식을 그룹화 할 때 사용하는 태그, 자식요소로 legend를 포함한다. 블록 팁 : 양식 데이터에 민감한 정보..
더보기
-
기본태그연습
기본태그 설명 인라인 | 블록 br break line 줄 바꿈 태그 블록 p paragraph 문단 태그 블록 h headline text 제목태그 , 진하고, 크기가 크다. 블록 hr horizontal line 수평선 태그 블록 ol>li ordered list 순서가 있는 목록 태그이고 li(list)는 자식태그 블록 ul>li unordered list 순서가 없는 목록 태그이고 li(list)는 자식태그 블록 dl>dt+dd description list 정의목록, 자식으로 dt와 dd를 사용 블록 span 공간분할 인라인 div 공간분학 블록 img 이미지태그 필수속성 : src(이미지경로)와, alt(대체텍스트) 인라인(인라인블록) 오늘은 웹표준 배우는 첫번째 날입니다. 오늘은 웹표준 배우..
더보기
COA Lab's CSS
-
Flexbox Layout
레이아웃을 정리할 때 사용하는 속성으로 flex를 소개한다. flex는 블록속성의 박스를 만들어 준다. 레이아웃을 정리 할때, 브라우저에서 긴 레이아웃을 정리 할때 보통 스크롤을 내려서 볼 수 있도록, header, section, footer, div(구) 등의 순서가 아래로 내려오도록 정리했다. 이러한 태그들은 블록속성을 가지고 있기 때문에 자연스럽게 아래로 내려가는 수직구조를 만들어 준다. 블록 속성을 가진 태그들은 row 전체를 차지 하기 때문이다. 이러한 블록 속성으로 인해 세로로 떨어지는 수직구조를 작성 할 때는 어려움은 없지만, li태그를 이용한 가로 배치 메뉴 등을 만들거나, 3단, 4단 등의 배치를 하는 레이아웃은 float:left나, display:inline-block(여백이 생김)..
더보기
-
css 위치와 공간 해석 - float
float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져나와 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float 은 left, right, none, static 등으로 속성값을 부여할 수 있다. float:left는 원래 좌측으로 보내라는 의미로 흔히 받아들이고 있다. 그렇다고 해서, float을 위치를 지정하는데 사용한다고 무조건 해석하면 무리가 있을때가 있다. float:left는 이미지와 같은 요소의 옆에 글씨를 작성했을 때, 아래 그림처럼 글씨가 이미지의 하단에서부터 시작하게 되는데, 이를 이미지와 같은 높이에서부터 시작하도록 하기 위해 사용하는 속성이라고 할 수 있다. 아래 첫번째 그림처럼..
더보기
-
css 공간의 이해 3 - margin collapsing
블록속성을 가진 요소를 자식으로 가지고 있는 부모요소는 margin이 생기지 않는다. 예를 들면, h태그는 위아래 margin을 가지고 있는데, 부모요소인 container3에 배경색을 넣고 보면, 자식요소인 h1에 margin이 표현되지 않은걸 확인할 수 있다. 이때, 부모에 overflow:hidden이나, 이 방법 외에도, display:flow-root를 적용하면, 자식요소인 h1의 margin이 표현되는 걸 확인 할 수 있다. 1. HTML 부분 box3 2. CSS 부분 .container3{ background: #f00; /* overflow: hidden; */ display:flow-root; } h1{ background: #fee; } 이처럼, 자식요소의 공간에 float, marg..
더보기
-
css 공간의 이해 2 - - margin collapsing
margin은 겹침현상이 생긴다. margin이 적용된 부분이 겹치게 되면 두번 모두 적용되는 게 아니라 한번만 적용된다. 1. HTML 부분 box2 box2 2. CSS 부분 .container2{ background: #8887a1; width:300px; overflow: hidden; } .box2{ width:200px; height:200px; background: #f80; margin:20px; } 이미지 첨부 예정~!
더보기
-
css 공간의 이해 1 - BFC
1. block formatting context 블록 속성을 가진 자식 요소에 float 을 부여하게 되면, 부모 요소는 자신의 높이값을 잃게 된다. 부모는 자식을 포함하므로, 자식의 높이값을 모두 품을것이라고 생각 할 수 있지만, 모든 요소에 해당하지는 않는다. 아래 사이트에 여러가지 예가 정리 되어 있으니 참조바람, 대표적으로 float 속성을 가진 자식요소가 있을때이다. float은 원래 이미지와 문단의 정렬을 위해 사용하는데, 이미지를 좌측, 이미지를 감싸고 문단의 내용이 들어가게 하게 정렬이 된다. 이렇듯, 부유하는 속성을 가진 float 이 적용된 요소의 부모요소는 자식요소 의 높이값을 포함하지 않게 되는데, 이럴때 문제점~!! 1. 배경에 적용한 색상이나 배경이미지가 잘리는 경우 2. 다음..
더보기
-
coding tip - 2. about margin & overflow(BFC)
1. BFC : Block Formatting Context BFC 의미 : overflow는 새로운 body가 생기는것처럼 독립적인 문서가 시작된다. 자식요소에 float이 들어가면 부모는 높이를 갖지 못한다. float의 개념때문인데, (부유함)이때 overflow:hidden을 주는것이 이 때문. 1-1. 안에 있는p태그의 시작점은 container의 시작점과 같다. 이때가장 쉬운 방법: margin을 적용하여 .left와 떨어뜨린다는 점이 있는데, overflow:hidden은 부모의 높이를 유지하려고 만든 속성은 아니다. 그러나 float와 같이 쓰일때, 높이 유지의 문제해결을 할 수 있다. 왜일까? float는 위로 뜬다. 부모입장에서 float의 높이를 인지하지 못한다. body는 최상위 요..
더보기
-
coding tip - 1. about vertical-align
vertical-align: middle/baseline은 서체의 기본 위아래 여백에 의해 유동적일 수 있다. 그러나, vertical-align: top;은 변수가 좀 적다. 영어의 베이스라인은 세로정렬이 어느정도 비슷하지만, 한글은 초-중-종성을 모두 갖고 있어 좀 더 유동적이다. 그래서 되도록 상단을 기준으로 여백을 맞춰 주는 게 좋고, 오류를 최소화 해준다. 이렇게 vertical-align을 사용해서 세로간의 기준을 맞춰주고, 조금씩 서체의 여백에 의해 생기는 간격은 브라우저를 확인하면서 margin으로 정리한다. 인라인 텍스트 여기는 새로운 badge입니다. body{background: #eee;font-size: 3.0em;} .container{background: #fff; color:..
더보기
-
웹표준 검사
웹표준 검사를 HTML과 CSS 각각 진행해 본다. HTML문서에 대한 validator 검사를 진행하면 아래와 같은 그림처럼 나온다. 그리고 하단에 아이콘이 생성되고, 코드를 복사해서 문서에 첨부 하면 된다. validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org css-validator.kldp.org/ W3C CSS 검사 서비스 파일 업로드를 통한 검사 직접 입력을 통한 검사 css-validator..
더보기
COA Lab's JS
-
자바스크립트 22 - for 정리
자바스크립트에서는 여러가지 형태의 for문이 있다. 1. 일반적 for문 : 일반적으로 가장 많이 사용한는 for문의 형태 for(let i=0; i
더보기
-
자바스크립트 21 - class 관련 정리
className : 특정 엘리먼트의 클래스 속성값을 가져오거나 설정하기 위한 속성 clasList : className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 방법 clasList.add(class) : 엘리먼트에 클래스 속성값을 추가하기 위한 메서드 clasList.remove(class) : 엘리먼트에 클래스 속성값을 제거하기 위한 메서드 clasList.toggle(class, true|false) : 엘리먼트에 클래스 속성값을 추가/제거하기 위한 메서드 let elem = document.querySelector('#item'); if(elem.className ==='on'){ elem.className = 'off'; }else{ elem.className ='on'; }..
더보기
-
자바스크립트 20 - 데이터유효성검사 3
함수를 만들어 dom요소에 이벤트를 인라인 방식으로 연결 각 하수에서는 이름, 연락처, 메일을 확인하고 정규표현식에 테그트하여 결과값을 보=여준다. function submitCheck(mform){ let reg1 = /^[가-힣]{2,5}$/; let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let reg3 = /^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/; let name = mform.name; let tel = mform.tel; let mail = mform.mail; if(!(reg1.test(name.value))){ alert('이름을 확인하세요'); name.value = ''; name.focus..
더보기
-
자바스크립트 19 - 데이터유효성검사 2
정규표현식 만들고, 적용하기 let reg1 = /^[가-힣]{2,5}$/; let name = prompt('이름을 입력하세요', ''); while(true){ if(reg1.test(name)) break; alert('이름을 다시 확인하세요'); name = prompt('이름을 입력하세요', ''); } let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let phone = prompt('연락처를 입력하세요',''); while(true){ if(reg2.test(phone)) break; alert('연락처를 다시 입력하세요'); phone = prompt('연락처를 입력하세요',''); } // admin@naver.com // admin@daum.net..
더보기
COA Lab's jQuery
-
메서드2
DOM객체 조작하는 메서드 ------------------- 요소의 속성 변경 1. 선택자 속성의 값을 가져온다 2. 선택자의 속성값을 변경 3. 선택자의 속성값을 제거 $(selector).removeAttr() ------------------- 요소의 스타일 변경 1. 선택자 스타일의 해당값을 가져온다. 2. 선택자 스타일의 값을 변경한다. 3. 선택자에 여러 스타일을 한번에 설정한다. ------------------- 클래스 사용하기 1. 선택자에 class 추가 2. 선택자에 특정 class가 있는지 찾기 3. 선택자에 class제거 4. 선택자에 class추가 제거 반복 ------------------- 제거,비우기 1. 선택자 노드 제거 - $(selector).remove() 2. 선..
더보기
-
선택자 및 메서드 1
jq의 cdn 작성 위치와, cdn다운받는 곳 - code.jqeury.com jq의 기본 구문 작성법 $(selector).method(); ------------------- 기본선택자 5가지 이상 - 요소(태그명), 아이디(#), 클래스(.), 종속( ), 자식(>), 이웃(+), 형제(~), 그룹(,), 모든(*)선택자 탐색선택자 5가지 이상(구조, 순서) li를 예로 들면, - li:first-child - li:last-child - li:nth-child(n) - li:nth-child(2n+1) - li:nth-last-child(n) ... 제이쿼리 선택자(짝홀수, 2번째, 첫번째, 마지막li, 3번째 뒤에 있는 모든 li, 3번째 앞에 있는 모든 li) - li:even - li:odd..
더보기
-
jQ 5 - each()
each() : 배열객체를 순서대로 순환하는 메서드이다. $(셀렉터).each(function(){....}) 와 같이 작성하는데, function의 ()안에는 2개의 인자값이 들어가고, 첫번째는 index순서, 두번째는 배열의 값이 들어간다. each(function(index, item){...})와 같다. $(셀렉터).each()에서 셀렉터는 배열객체가 된다. 1. 배열객체를 초기화 해두고, 여기에서 객체의 value값을 순서대로 가져오는 방법을 본다. $(function(){ let arr = [ {name : '네이버', link : 'https://www.naver.com'}, {name : '다음', link : 'https://www.daum.net'}, {name : '구글', link ..
더보기
-
jQ 4 - append 활용 : 배열객체, 이미지를 추가하기
1. append vs appendTo 차이점 $(A)append(B) : A의 end tag 바로 앞에 B를 추가한다. $(B).appendTo(A) : A의 end tag 바로 앞에 B를 추가 한다. 2. 배열객체를 만들어서 div태그에 값을 추가해 본다. $(function(){ let content = [ {name : '손지영', position : '영상부장'}, {name : '조성민', position : '아이디어부장'}, {name : '김서희', position : '디퍼부장'} ]; $('div').append(function(index){ let item = content[index]; let output =''; output += '' + item.name + ' : '; out..
더보기
COA Lab's Coding Tips
- git, git Hub -2. 깃 도메인 연결하기..작성중 작성중.. 더보기
-
git, git Hub -1. 작업환경 설정 및 프로젝트 업로드
1. git 다운로드 : git 검색 2. github.com 가입 아이디 생성 3. 폴더 안에서 우클 > git bash 확인 4. git bash cmd에서 아래 내용 치고 들어감 1) git init 2) git remote add origin 주소(git에서 레포지토리주소 복사 http주소.git) 주의 : remote가 이미 존재한다는 에러가 발생했을때는 아래처럼 remote를 remove하고 다시 remote해 준다. [[[[[[[[[[[ git remote remove origin ]]]]]]]]]]]]]]] $ git remote add origin https://github.com/..../tutorial.git error: remote origin already exists. 리모트 했..
더보기
-
vscode 편리한 팁
많이 사용하는 것 참조 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf visual studio code의 확장메뉴 설치 거의 필수
더보기
-
vscode 마우스휠로 화면확대
Ctrl +를 누르면 인터페이스 전체가 확대되어 화면영역을 차지하게 된다. 아래와 같은 방법을 사용하면 인터페이스 화면영역의 크기와 상관 없이 코드영역의 크기만 조절 가능하다. File>Preferance>Settings>Text Editors>mousewheel검색하여 체크해 둔다. 이렇게 하면 화면의 글자크기를 마우스휠로 조정이 가능해 진다.
더보기
COA Lab's UI/UX Design
-
figma 3 - icon 제작
material.io/design/iconography/system-icons.html#design-principles Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams..
더보기
-
figma 2 - component
1. master component : 반복적으로 재활용 될 UI 에셋 2. instance : master component를 복사한 인스턴스 * 무료로 Figma 시작하기 : https://www.figma.com/ 피그마가 스케치, 포토샵 보다 나은 이유 - 포토샵, 스케치 대비 반응형 UI 디자인에 최적화된 UI 편집 툴 - 쉽고 빠르다. 업무 효율성 Good - 무료로 사용 가능 (팀 라이브러리 기능 제외) - 윈도우, Mac 상관 없이 인터넷이 된다면 UI 편집 가능. - 실시간 파일 동기화 및 커뮤니케이션 - 웹 & App 개발 협업툴 - 실시간 멀티플레잉 편집 기능 - Private Project 기능 - figma & 포토샵 & 스케치의 차이점 - 내부 GUI Code View ( = ..
더보기
-
figma 1 - referance
material.io/design/layout/responsive-layout-grid.html Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io material.io/design/layout/responsive-layout-grid.html#breakpoints Material Design Build beautiful, usable products faster. Material Design is an adaptab..
더보기
-
reference site
[참고할만한 사이트] 여러분도 자유롭게 참고공유하고 싶은 사이트를 올려주세요(댓글/글쓰기OK) 좋은 사이트를 많이 보고 참고하세요~! 어워드 http://www.i-award.or.kr/web/ http://www.gdweb.co.kr/ https://www.jungle.co.kr/ 디자이너 블로그 https://www.pinterest.co.kr/ https://dribbble.com/ https://www.behance.net/ 일러스트 자료 공유 https://www.freepik.com/ https://www.flaticon.com/ http://www.deviantart.com/ https://www.redbubble.com/ http://abduzeedo.com/ 이미지소스 http://eve..
더보기
