웹스토리보이

191015

닷홈 홈페이지 가입, 무료 호스팅, 도메인 연결

파일질라 - 브라켓

폴더 확장명 보이도록 설정

포토샵 학습 - 픽셀설정

파비콘 제작 및 적용
개인 홈페이지 제작

191016

브라켓 다운로드 : brackets

Beautify : 코드 정렬
Indect Guides : 라인 정렬 보여주기
Emmet : html/css 단축키

비헨스Behance
드리블dribbble

코드펜codepen
어워드awwwards
codropstympanus.net

191017

Color Palette materializecss

확대/축소 : Ctrl + / Ctrl -
전경색 채우기 : Ctrl + Delete
배경색 채우기 : Alt + Delete
가이드라인 : Ctrl + ;
캔버스 움직이기 : 스페이스 바
룰러 만들기 : Ctrl + R
자르기 도구 : C
새로만들기 : Ctrl + N
웹용으로 저장하기 : Ctrl + Alt + Shift + S
다른이름으로 저장하기 : Ctrl + Shift + S
레이어 그룹화 : Ctrl + G
단축키 사이트 shortcuts

포토샵 Info 설정 - 체크확인

생활코딩opentutorials
HTML코딩opentutorials

CSS코딩opentutorials
코딩 단축키 알려주는 사이트emmet
엔티티코드 기호모양표현entitycode

코딩 - 텍스트 중앙으로 배치

언스플래시 무료이미지unsplash

눈누무료폰트noonnu

목업사이트mockupworld

191021

본고딕 무료 다운로드google

정보구조설계tistory

191022

머터리얼 디자인material

Guide Systemguideguide
다운로드 한 후 포토샵 > Window > Extensions > guideguide 클릭

트렌드 데이터trend.logger

단축키 : Alt+F3

191023

크롬설치google chrome
사파리설치Safari
네이버 웨일설치whale
opera설치opera

191024

널리nuli

웹접근성연구소wah

다룸darum

191025

freebiesbugfreebiesbug
다양한 자료를 무료로 다운 받을 수 있는 중계사이트입니다. 오랫동안 잘 유지되고 있는 사이트이며 목업, 코딩파일, 스케치 파일, PSD 파일, 소스 파일, 폰트 등 여러가지를 많이 보여주는 사이트입니다.

191028

구글 폰트Google Fonts
웹페이지를 보는사람이 그 페이지에서 사용되는 폰트를 다른 서버에서 자동으로 다운받아지게끔 해줍니다.

캔아이유즈caniuse
CSS나 HTML5 속성 등이 각종 환경에서 모두 동작하는지 테스트 해볼 수 있는 사이트입니다. CSS 부터 HTML5, SVG, JS API 등 다양한 속성들을 검수해 볼 수 있습니다.

191029

웹 그라디언트webgradients
그라디언트 코드를 활용할 수 있습니다.

Color claimvanschneider

color-methodcolor-method
컬러감각 순발력 테스트

191031

w3schoolsw3schools
원하는 웹언어를 찾아서 학습하실 수 있습니다.

191104

GitHubGitHub
GitHub는 회원에게 git 저장소를 제공하는 온라인 서비스 중 하나입니다. 개인 회원에게 퍼블릭 저장소인 경우 무료로 제공합니다.

서브라임텍스트sublimetext
서브라임 텍스트는 가볍고 확장성이 좋은 편집기로서, 국내뿐 아니라 외국에서도 많은 개발자들이 사용하고 있는 툴입니다. 기본적으로 하드코딩을 염두에 두고 개발되었는데 여러가지 플러그인들이 붙으면서 그 편의성이 날로 좋아지고 있습니다.

패키지 컨트롤packagecontrol
Front-End 개발에서 주로 사용하는 문법 검사, 코드 기본 포맷에 맞추어 정렬하는 기능 등 수많은 패키지가 개발되어 배포되고 있습니다. 그 밖에 편집기의 테마 및 코드의 하이라이트 기능 및 편집기를 아름답게 꾸며 사용할 수 있는 패키지 역시 손쉽게 설치해 사용할 수 있습니다.

코딩하는 남자https://www.youtube.com/channel/UCEV0Mv07slTliSXBlV-lG2w
HTML과 CSS로 비쥬얼 아트 코딩을 보여줍니다.
JohnKOBA Designhttps://www.youtube.com/channel/UCYpD5IVQK9BjA2qtupHFExA
영상 편집 및 제작을 알려줍니다.

Mock up 자료facebook.design

191106

HTML 5 아웃라인HTML 5 Outliner
문서 개요를 확인할 수 있습니다.

191108

Font Awesomehttps://fontawesome.com/
Font Awesomehttps://fontawesome.com/v4.7.0/icons/
Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.

191114

Slick.jshttp://kenwheeler.github.io/slick/
반응형 슬라이드이며, 무료로 사용가능한 제이쿼리 슬라이드입니다.

jqueryhttps://jquery.com/

oscaroterohttps://oscarotero.com/jquery/

JavaScripthttps://developer.mozilla.org/ko/docs/Web/JavaScript

daumtroyhttp://troy.labs.daum.net/

191115

Lightgalleryhttps://sachinchoolur.github.io/lightGallery/

1. 웹 접근성 준수의 필요성이라고 볼 수 없는 것은? (3)

법률적 의무화
장애인, 노령자 등을 포함한 웹 이용자의 확대
디자인 및 설계의 효율성 제고로 비용절감 효과
공공기관 및 기업의 투자 비용 증대 효과

2. 이미지에 대체 텍스트를 제공하는 방법 중 적절하지 않은 것은? (3)

의미가 있는 이미지의 경우 이미지에 포함된 콘텐츠를 그대로 기술한다.
블릿 등의 의미 없는 이미지는 alt 속성 자체를 제공하여 사용자로 하여금 의미 없는 이미지임을 인식할 수 있도록 alt=""를 제공한다.
이미지맵을 사용하여 이미지로 제공하는 경우 개별 area 요소에 제공하고 전체 이미지에는 제공하지 않아도 된다.
대체텍스트는 간단명료하게 제공한다.

3. 웹 표준 및 웹 접근성에 대한 개념 설명으로 맞지 않은 것은? (3)

W3C(World Wide Web Consortium)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994년 10월에 설립되었다.
웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다.
웹 접근에서 말하는 신체적 조건이란 다양한 기기(PC, mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari, Chrome, Opera 등)를 의미한다.
웹 표준은 W3C에서 정의하는 공식 표준이나 기술 규격을 가리키는 용어이다.

4. 블록구조를 가운데 오게 하는 방법과 인라인 구조를 가운데 오게 하는 속성은? (2)

margin : 0, padding : 0
margin : 0 auto, text-align : center
margin : 0 auto, padding : 0
margin : 0 auto, text-align : 0 auto

5. padding의 사용 방법이 틀린 것은? (4)

padding-top : 10px; 요소의 위 안쪽 여백을 설정한다.
padding : 10px 11px 12px 13px; 위쪽/오른쪽/아래/왼쪽으로 여백을 설정한다.
padding : 10px 11px 12px; 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px)으로 설정한다.
padding : auto; 자동값, 기본값을 설정한다.

6. 태그는 정보를 정의하는 방식을 의미합니다. 다음 중 태그에 대한 설명으로 틀린 것은? (4)

태그는 열린 태그와 닫는 태그가 있다.
닫는 태그에는 "/" 있어야 한다.
HTML5에서는 "/"가 생략이 가능하다.
<br>, <a>, <img>, <input>, <meta> 태그는 닫는 태그가 필요 없다.

7. 블록요소와 태그요소에 대한 설명으로 틀린 것은? (4)

블록 요소는 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있다.
블록요소에는 블록요소 인라인 요소를 두 가지를 다 포함할 수 있다.
인라인 요소는 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현 한다.
<a>태그는 인라인 요소로 블록 요소를 포함할 수 없다.

8. CSS 색상 표현 방법이 틀린 것은? (3)

background-color : red;
background-color : #fff;
background-color : rgb(0, 0, 0, 0.4)
background-color : hsl(0, 100%, 50%);

191119

cubic-bezier https://cubic-bezier.com/#.55,.35,.45,.93

191120

googlefonts https://googlefonts.github.io/korean/

191122

cssgradient https://cssgradient.io/

animate.css https://daneden.github.io/animate.css/

191125

아이콘 https://material.io/resources/icons/?icon=music_note&style=outline

191127

littlesnippets https://littlesnippets.net/

css-tricks https://css-tricks.com/the-shapes-of-css/

191128

SASS 설명 https://heropy.blog/2018/01/31/sass/

SASS -> CSS 변환사이트 https://www.sassmeister.com/

191202

1. 많은 공공기관이나 단체가 웹 접근성을 위해 노력을 하면서도 사용자의 입장에서 차별되거나 불편함, 소외된다는 생각을 하지 못하는 경우가 있습니다. 웹 접근성을 준수할 때 사용자 입장에서 차별될 수 있는 경우는? (4)

대체 텍스트
명확한 색상대비
장애인 별도 웹사이트 제공
키보드 만으로 이용

2. 기본 언어 표시 검사항목에 대한 설명으로 옳지 않은 것은? (4)

<html>에 lang 속성을 명시하지 않거나 잘못 명시한 경우 준수하지 않은 것이다.
html에 영어로 구성된 페이지의 경우 <html lang="en">으로 표시한다.
xhtml의 한국어로 구성된 페이지의 경우 <html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/shtml">로 표시한다.
페이지 중간에 언어가 바뀔 때 변경된 언어를 langchange 속성으로 명시한다.

3. 사용자 요구에 따른 실행 검사 항목에 대한 오류 유형이 아닌 것은? (3)