PPOMI + 3 CATS = INFINITY



제일 속상할때가

열심히 만들어놨는데

익스에서 동작 안 할때...........ㄱ-...


우리나라에서 가장 많이 쓰는 인터넷익스플로러가 지원하는 내용이 적어서

항상 브라우저 호환성을 염두에 두고 작업을 해야한다


하지만 만들고 발견하는 경우가 허다하니..

이런 부분을 보완해주는 것이 바로 Modernizr 모더나이저이다



구글에서 modernizr.com 을 입력하면 바로 들어간다



사용하는 브라우저의 특성에 대응해준다고 한다.



영어로 되어있지만 당황하지 않고

Add your detects 버튼을 눌러준다



그럼 이렇게 지원이 필요한 기능을 선택할 수 있다

오늘의 경우  SVG 이미지가 지원 안 되는 브라우저일 때

SVG 이미지 대신 대체 이미지를 띄울 부분을 보완하는 것이라


SVG만 클릭했다




클릭하면 이렇게 오른쪽에 SVG에 관한 내용이 나온다.



그냥 그 위의 BUILD 버튼을 눌러주면된다



그럼 이렇게 팝업이 뜨는데,

Build 부분의 DOWNLOAD 를 눌러주면 된다.



js 파일을 다운 받는 것이라 경고창이 나타난다

무시하고 계속 받으면 된다



다운로드 받은 modernizr!

이를 보완이 필요한 페이지에 link태그로 연결하고

스크립트 내용을 넣어주면 된다.




만약 muffin.svg 이미지가 표시되지 않는경우

pf.png 를 보여주라는 내용의 스크립트!


자바 스크립트 잘 못 쓰는 나도

이건 쉬웠다..헤헿







어쩌다보니 일주일이나 글을 안 썼다


오늘은 아아아아아아아아주 유용한 웹 코딩 사이트를 알게 되어 공유한다.


JS Bin



접속하면 이렇게 기본 태그가 적혀있다.




HTML 부분에 내용을 적으면 오른쪽에 실시간으로 반영이 된다.

여러가지 사이트가 있겠지만 오늘은 JS Bin을 추천!



CSS 도 추가하여 내용을 적으면 이렇게 실시간으로 반영이 된다.

자꾸 로그인을 하라고 하는데, 특별히 유료는 아닌걸로 보인다.



File > Download 를 누르면 위와 같이 작성한 html 파일을 다운로드 받을 수 있다.



열어보면 작성한 부분과 동일하게 나타난다



하지만 css의 경우 html파일에 포함된 상태로 나온다

그치만 뭐 이것도 다시 저장해서 하면 되니까...!



여러 사이트가 있겠지만 아주 간편하면서도

다른 사이트보다 리젠이 빠른거 같아서 좋은 것 같다!



JS Bin




 

웹표준을 지켜서 코딩을 해야하는데

솔직히 제대로 찾아보지를 못해서

맞게 하는건지 의문이 들 때가 많다

 

 

오늘의 경우에도 PC버전 완성해서 모바일로 상태를 봤는데

완전 중구난방이었다

 

 

오늘도 웹표준을 검색하고 있는데

다음에서 웹표준 가이드를 제시했다는 내용을 확인하고

접속해보았다.

 

 

다음 웹표준 가이드

 

ui.daum.net

 

 

 

 

뭔가 메뉴가 많다.

 

 

HTML 가이드, CSS 가이드는 물론

네이밍이나 체크리스트 까지 제공하고 있다.

 

 

꼼꼼히 읽어보았는데, 나에게는 naming 규칙이 상당히

흥미로운 내용이었다.

 

어떤 사람도 자신만의 규칙을 가져야 하는데

나의 경우 가르치는 사람에게서 영향을 많이 받는 편이라

이제껏 전 회사의 개발팀장님의 방식을 따랐었다

 

이젠 가이드대로 하면 헷갈릴 필요가 없을것 같다

 

 

체크리스트 내용을 클릭해 보면

아래의 세부 내용으로 이동한다.

 

음..

아직 나에게는 필요 없는 내용인 듯 하다

 

너무도 멀고 먼 ..

 

 

 

CSS 가이드 쪽에서

이부분이 가장 흥미로운 내용이었다.

 

이미지 대체 텍스트에 관한 부분인데

권장하는 첫번째 방법이 상당히 인상적이었다

 

-9999px 이라니

 

 

이거 웹페이지로 말고 책이나 pdf 로 정리해줬으면 좋겠다

책장에 꽂아두고싶다

 

 

처음 보는 사람들도 쉽게 공부할 수 있는

CSS Property 내용도 제공을 하기 때문에

 

나같은 초보에게는 딱 좋을거 같다

 

 

오늘도 프론트엔드 개발자를 위해 화이팅!

(오늘따라 오글거린다)

 

 

 

 

 

 

 

 

창작은 힘들다

 

이제껏 웹과 관련해서는 창작을 해 본적이 없다

전부 이미 있는 사이트들을 베낀 것들 뿐

 

 

포트폴리오 준비를 위해 필요한

"잘 된" 웹디자인 혹은 사이트를 모아놓은 사이트를 소개한다.

 

 

 

1. DBcut

 

 

 

웹디자인 평가나 우수한 사이트를 모아 놓았다.

 

접속하면 오픈/리뉴얼 된 사이트들을 확인할 수 있다.

아무래도 등록일 순으로 조회하면 최신 트렌드를 읽을 수 있다

 

기존에 사용하던 Behance나 Github의 경우

영어 기반이라 참고하기 쉽지 않았는데

 

디비컷의 경우 다 우리나라 사이트라서 좋다.

 

 

 

아래로 내려보면 이렇게 카테고리화가 되어 있어서

만들고 싶은 사이트 분류를 확인할 수 있다.

 

물론 나의 경우 일단 다 훑어보고 카테고리를 정할 듯...

 

 

 

2. WordPress Themes

 

항상 워드프레스는 디자인이 좋았다

 

물론 사용이 어려워서 많이 안 만져봤지만...(내 기준)

 

웹에이전시에 따라 워드프레스로만 제작하는 곳이 있다고 해서

슬슬 공부를 시작해볼까 싶다. (사실 뭘 공부해야하는지 잘 모른다)

 

 

이것도 영어권이긴 하지만...

강사님이 추천해주셔서..일단 넣는 것으로...ㅋㅋㅋㅋ

 

 

 

 

일단 dbcut만 봐도

우리나라 웹디자인 트렌드를 읽을 수 있다

 

반응형 웹.. 언제 제작하지...

솔직히 베껴오는거 말고는 아무 생각이 안 떠올라서 큰일이다

 

진짜 창작자가 되고 싶다.

 

 

 

 

 

 

오늘은 포토샵으로 그라디언트를 배웠다

쉬운 부분이긴 하지만, 보통 직접 만들어 쓰지는 않는다

 

직접 컬러 찍는거 보다 훨씬 예쁜 그라디언트가 이미 만들어져 있는 곳을

소개하려고 한다.

 

 

1. webgradients.com

 

웹그라디언트 닷컴

 

 

 

보다시피 접속하면 아주 예쁜 그라디언트들이 보인다

두 가지 색을 사용한거 뿐인데

진짜 예쁜게 많다

 

 

이 그라디언트를 사용해 보기로 했다.

첫 색인 앞의 코드를 더블 클릭해서 복사했다

 

 

포토샵 그라디언트 컬러 코드에 넣어주고 OK를 눌러

그어준다.

 

 

예뿌당...

 

 

사이트의 화살표를 클릭하면 PNG파일을 받을 수 있고

 

 

아래의 Copy CSS 버튼을 누르면

CSS 코드를 자동으로 복사해 준다

 

 

 

 

두 번째 소개할 곳은

 

uigradients.com

 

 

 

 

접속하면 이런 식으로 바로 그라디언트가 보인다

summer라는 이름의 이 그라디언트도

상큼하고 예쁘다

 

 

왼쪽 상단의 버튼을 누르면

모든 그라디언트 목록을 볼 수 있다.

 

 

세 번째 소개할 곳은

 

css3generator

 

 

 

접속하면 이거 밖에 안나오는데,

메뉴를 클릭하면

 

 

그라디언트가 보인다.

클릭해 주면 새로운 주소를 가르쳐 주는데

이동하면 된다.

 

 

그렇게 도착한 곳이 이곳!

포토샵의 그라디언트와 동일하게 편집이 가능하다.

게다가 그라디언트 방향도 설정할 수 있어서

 

CSS 코드에 관한 부분이라면 이 사이트가 가장 적합하다

 

 

 

아래로 스크롤 하면

브라우저 적합성도 확인할 수 있다

 

 

역시 익스는...(절레절레)

 

 

 

 

 

 

 

항상 포토샵은 "그냥" 사용하는 것이었다.

 

최근에 드디어 설정창을 만져서 여러가지를 변경해서

사용해 봤다...

 

근데 플러그인도 있다고 하는게 아닌가

 

 

오늘 강사님이 가르쳐주셔서 소개하고자 한다.

 

 

솔직히 회사에서 포토샵 CC 2017 버전을 사용했기 때문에..

플러그인을 찾을 필요가 전혀 없었는데

 

지금은 학원에서 CS6 버전을 사용하고 있으니

플러그인이 상당히 유용하다.

 

 

 

구글에 Assistor PS 를 검색해 준다.

한글이 나오는걸 보니, 우리나라 제작자 분이 만드신걸까 싶다

 

 

현재 접속이 불가하다

 

네이버에서 Assistor PS를 검색해준다.

 

 

바로 다운로드 해준다

 

 

실행하면... 로그인하라고 한다... 30일 무료 사용가능한듯

그냥 30 Day free Trial 을 눌렀다

 

 

가장 많이 사용하는 기능은 이 부분일것이다.

CC버전의 경우 radius rectangle을 만들고 상단 패널에서 radius 값을 변경하면

바로 반영이 되는데, 그 이하버전은 안된다.

 

이때 이 기능을 사용해 "APPLY"버튼을 눌러주면

알아서 바꿔준다.

 

 

다른 기능도 있지만

이부분이 가장 유용한.!

 

생각보다 많은 분들께서

기능에 관한 정리를 해 두셨으니

잠깐 네이버에 검색하면 정보를 얻으실 수 있습니다.

 

그럼 빠빠

 

 

 

 

 

 

 

 

 

 

 

웹표준 웹표준 그러는데

솔직히 이전 회사에 있을 때는

지킬 일이 전혀 없었다.

 

완전 주먹구구식 처리.

 

심지어 내 뒤에 들어온 자칭 '웹디자이너'는

공백을 흰색 jpg로 처리...

퍼즐 맞추듯이 모든 이미지를 "썰어"줘서

충격이었다

 

 

오늘은 웹표준을 지켰는지 안 지켰는지 확인할 수 있는

한 가지 툴을 소개하고자 한다.

 

Color Contrast Analyzer : 줄여서 CCA라고 한다.

 

 

오늘 강사님의 소개말씀으로는

글자색과 배경색의 명도대비가 적어도 4.5 이상이어야 된다고 하셨다.

 

 

일단 CCA부터 다운로드 받아보자.

 

 

구글에 검색하면 최상단에 보인다.

 

 

 

이러한 페이지가 열리고, 나는 윈도우니까 "Download for Windows" 버튼 클릭

 

 

Downloads 중에

Source code ZIP 파일을 다운로드 받으면 된다.

 

 

 

압축을 푼 후, Package 폴더 안의 응용프로그램 중 자신의 사양과 맞는 것을 실행시켜 주면 된다.

 

 

 

실행 후에는 검사를 하고 싶은 페이지의 글자 부분과 배경 부분을 각 피커로 찍어보면

아래 창에서 결과를 확인할 수 있다.

 

검정색과 흰색으로 하면 최대치인 21:1이 나온다.

 

 

이젠 접근성인지 표준성인지 죄다 지켜야지

 

하하

 

 

 

 

 

포토샵에서 패턴을 만들고

패턴을 적용하고, 패턴을 수정하는 법을 배웠다.

 

나도 그렇지만 패턴을 직접 만들어 쓰는 경우는 거의 없고

다운로드해서 사용하는 편이다.

 

 

오늘은 패턴을 미리볼 수 있는 사이트와

다운로드 할 수 있는 사이트를 공유하려 한다.

 

 

 

1. Patternify

 

패턴을 미리보며 만들어 볼 수 있고, CSS코드로 생성해 준다.

 

 

기본 화면이다

 

왼쪽 아래에 이미 만들어진 프리셋을 이용할 수도 있고

컬러나 투명도를 변경하여 직접 위의 캔버스에 찍을 수도 있다.

 

찍은 패턴은 Preview 부분에서 확인할 수 있고,

바로 아래칸에서 css코드로 퍼갈수도 있다.

 

 

이미 만들어진 해골 패턴에 추가로 무언가를 더할 수도 있다.

바로 코드를 카피할 수 있는 부분이 유용한거 같다

물론 아직 적용해본적은 없어서.....(...)

 

 

 

2. Patternico

 

일러스트에서나 만들 법 한 귀여운 패턴을 쉽게 생성할 수 있다.

 

 

오른쪽에 보이는 여러 아이콘들을 사용해서 배경으로 깔리는 패턴을 사용할 수 있다.

이미 깔린 패턴들이 미리보기라서 아이콘을 추가하거나, 위치를 변경하거나, 색깔을 바꾸었을 때

어떻게 보이는지 확인하기가 쉽다.

 

대충 아이콘 넣어도 귀엽게 보여서

상당히 유용할 듯 하다.

 

 

 

3. The Pattern Library

 

패턴을 다운로드 받아 사용할 수 있다

 

 

 

진심 넘나 귀엽다

패턴 진짜 귀엽고 고퀄인듯...!!!!

 

 

 

4. Topal

 

패턴 라이브러리처럼 다운로드 받아 사용할 수 있다.

 

 

은은한 스타일이 많은거 같다

아무래도 어디든 적용하기 편할 듯!

 

 

 

유용하다아아아 -

 

 

 

 

 

 

 



구글폰트가 정말 잘 되어있다.

나는 보통 웹 폰트 사용하려고만 들어가봤는데

오늘 더 유용한 내용을 배워서 공유하고자 한다.





구글폰트에 접속하면 위와 같은 내용이다.



그 중에서도 오른쪽의 카테고리 내용으로 마음에 드는 스타일의 폰트를 찾을 수 있다.


Serif는 우리 폰트로 말하면 명조체랄까. 영어의 경우 English 이런식으로 조금 삐침(?)이 들어간 글자이다

Sans Serif의 경우 Serif가 없는, 이라는 뜻으로 고딕이라고 생각하면 된다. English

Display의 경우 장식이 많이 들어간 느낌이고

Handwriting은 손글씨 스타일

Monospace는 너비가 고정된 글자라고 한다 (잘 모름)



그리고 Sorting 은 최신순 등을 선택할 수 있고

영어 말고 다른 나라 언어가 필요하다면 Languages를 변경하는게 좋을듯 하다.


그 아랫 부분이 정말 유용했다.

Thickness를 조절해서 내게 필요한 엄청 두꺼운 폰트 스타일을 찾을 수가 있었다.



마음에 드는 글자를 찾았다면 (+) 버튼을 누르면



이처럼 장바구니에 추가된 것처럼 보여진다.

로컬에서 사용하려면 우측 상단에 보이는 다운로드 버튼으로 다운받으면 된다.


가끔 유료폰트도 있는데, 그 경우에는 다운로드가 받아지지 않는다.





<마음에 드는 폰트를 쉽게 찾기 위한 팁!>




폰트에 가까이 가면 여러 설정 부분이 있는데

제일 앞부분을 누르면 해당 폰트로 보이는 문장/숫자/알파벳등을 조절할 수 있다.

custom을 누르면 내가 쓰고 싶은대로!




위 처럼 모든 보이는 폰트를 내가 보고 싶은 문장으로 바꿔주는것도 가능하다.

아무데나 문장을 적고

"Apply To all Fonts"를 누르면 된다




항상 쓰던거만 썼었는데

상당히 유용한 팁인듯 하다!





 

오늘 처음으로 프로토타입을 만들어 보았다.

 

항상 프로토타입이라는 과정없이 실 제작물을 내었기에

신기하고 재미있었다.

 

특히 오븐의 경우 프로토제작을 처음 해봤지만

상당히 사용하기 편하고 쉬운 툴인거 같다.

 

 

 

일단 가입을 해 보았다.

가입하고 이메일 인증을 받으면 standard로 무료 업그레이드가 된다고 해서 바로 했다.

 

 

일단 프로토타입을 만들기 위해 새 프로젝트를 만들었다.

프로젝트 이름을 적고, 기본 화면 사이즈만 선택하고 "새로운 프로젝트 만들기"를 클릭하면 된다.

 

조금 아쉬운 것은 기본화면 사이즈가 가로가 정확하게 정해져 있다는 것.

마음대로 조정하는 것은 아직 불가한 듯 하다.

 

 

이렇게 프로젝트가 만들어 졌다.

썸네일 부분을 누르면 편집을 하러 들어갈 수 있다.

 

나는 문구 사이트 리뉴얼 스타일로 할 예정이라서

프로젝트 이름을 "문구스페이스"로 했다.

 

문구 일때 구를 숫자 구로 바꿔서...ㅋㅋㅋㅋㅋ

 

 

톱니바퀴 모양을 눌러서 만든 프로젝트 내용을 설정할 수도 있다.

 

 

이름도 수정하고, 상세 내용도 수정할 수 있다.

아무래도 무슨 기능이 추가 되었나 적어놓기 편할 듯 하다.

 

 

 

썸네일을 눌러 편집화면으로 들어왔다.

 

보다시피 왼쪽, 중앙, 오른쪽 이렇게 세 부분으로 나눌 수 있는데

파워포인트랑 비슷하다고 생각하면 된다.

 

 

왼쪽 부분은 슬라이드, 여기서는 페이지이다.

 

중앙 부분은 실제로 편집을 하는 부분이다.

 

오른쪽 부분은 파워포인트에는 없지만, 편집을 위해 들어갈 각종 요소들이 있는 툴박스가 있다.

 

 

오른쪽 툴 박스 요소중에서 사각형 쉐이프를 가져와서

헤더처럼 만들어 보았다.

 

숫자를 입력해서 크기를 지정할 수 있기 때문에 상당히 편리했다.

 

 

다만 복사 붙여넣기를 할 경우

파워포인트는 다음 슬라이드의 같은 위치에 넣을 수 있지만

 

오븐의 경우 위치가 제멋대로 변경되어서 조금 불편했다.