Infor

Design Site Reference

Site URL
dribbble https://dribbble.com
behance https://www.behance.net
pinterest https://kr.pinterest.com

Coding Site Reference

Site URL
HTML w3schools https://www.w3schools.com
HTML Mozilla https://developer.mozilla.org
CSS w3schools https://www.w3schools.com
CSS Mozilla https://developer.mozilla.org
entity code https://www.toptal.com
html color http://materializecss.com
emmet cheat sheet https://emmet.io
코딩 검사 http://validator.kldp.org
css 검사 http://jigsaw.w3.org
jQuery http://www.unheap.com
mouse hover http://gudh.github.io/ihover/dist/index.html
반응형 웹 테스트 http://troy.labs.daum.net

Site Research Reference

Site URL
5day http://www.5day.co.kr
dbcut https://www.dbcut.com
awwwards http://www.awwwards.com
csswinner http://www.csswinner.com
land-book https://land-book.com
lapa.ninja http://www.lapa.ninja

웹 분석

Site URL
Internet trend(국내) http://trend.logger.co.kr
marketshare(국외) http://marketshare.hitslink.com

생활코딩-html

1

  • html을 잘 이해하려면 웹에 대한 전반적인 흐름과 분위기를 알면 수월하다.
    웹은 여러가지 기술이 합쳐져서 돌아가는 것이다.

2

  • html은 하이퍼텍스트(링크)를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어이며,
    사람과 웹 브라우저 사이에서 서로 이해할수 있는 약속이다.
    웹 페이지가 어떻게 생겼고 어떤 정보를 가지고 있는지 웹 브라우저에게 명령할때 사용하고,
    서로 이해할 수 있는 언어가 html이다.

3

  • 태그는 html에서 가장 중요한 문법이며, html을 규정하는 가장 중요한 특징이다.
    저장할 이름.html(확장자) 파일형식-모든 파일 인코딩 utf-8

4

  • 글자를 강조하고 싶다면 <strong> 태그를 준다. 슬래시가 없는태그는 시작태그, 있는 태그는 닫히는 태그라고 한다.
    <h1> = heading 1 제목 표시이다. 크기를 조금 작게 주고 싶다면 <h2> 태그를 쓴다.

5

  • 링크를 걸고 싶으면 <a href=""></a> 태그를 쓴다.
    현재 페이지에서 열리지 않고 새 창에서 열고 싶다면 target="_blank" 값을 준다.
    title이라는 속성을 주면 마우스 오버시 그 내용을 나타낸다. html은 팀 버너스 리가 만들어 냈으며,
    GML-> SGML-> SGMLguid-> HTML로 발전해왔다.

6

  • 리스트를 작성할때는 li태그를 쓰고 ul태그로 묶어줄 수 있다(그룹), 태그 안에 또 다른 태그가 존재할 수 있다.
    ol - ordered list(숫자가 있음) ul - unordered list

7

  • <html> - 제일 바깥쪽 태그, <head> - 본문을 꾸며주는 부가적인 정보, <body> - 본문

8

  • DOCTYPE - Document type declaration (어떤 형식의 html코드로 작성되었는지 선언)

9

  • 웹사이트를 만들때 파일이 없어도 링크를 먼저 만들어 놓는게 좋다.

10

  • atom, sublime text, bracket atom 적정수준의 개발도구를 선택하자

11

  • 시간이 지나면서 소멸되는 태그가 있다. <head> 태그 가장 많이 사용함.
    태그별로 많이 사용되는 속성이 있다.

12

  • <p> 태그- paragraph(단락) p태그로 감싸주면 줄이 바뀐다.
    <br>태그를 사용해서 줄 간격을 넓히거나 CSS에서 간격을 넓혀줄 수 있다.

13

  • <br> 태그- 줄바꿈 태그인데 마침태그가 필요 없다.

14

  • <img src=""> 태그- 이미지 삽입태그. 크기를 변경하고 싶다면 태그(괄호)안에 width와 height값을 주면 된다.
    alt(alternative text) 속성값을 주면 이미지가 깨지거나 사용할수 없을때 alt에 입력한 텍스트가 뜬다.
    title 속성을 주면 마우스를 가져갔을때 title에 입력한 텍스트가 뜬다.

15

  • <table>-표의 처음 <tr>-테이블의 행 table row, <td>table data
    table border 값을 주면 표의 테두리가 생긴다.
    레이아웃을 만드는 과거의 방법

form

16

  • <form> 태그 - 사용자가 입력한 정보를 서버로 전송할때 사용하는 태그.
    <input type="text"> 글자를 입력할 수 있는 텍스트 박스가 나옴
    <input type="password"> 글자가 보이지 않음 비밀번호 설정
    <input type="submit"> 제출 / 어디로 전송하고 싶다면 <form action="보낼 주소">
    각각의 인풋타입에다가 name을 정해줘야 한다. 서버로 전송될때 name값으로 전송된다.

17

  • input type="text" 에서 value 속성은 기본값을 설정한다.
    textarea태그를 지정하면 여러줄을 입력할 수 있는 텍스트 칸이 나온다.
    textarea의 cols 속성은 글자 수를 입력할 수 있는 범위를 지정해줄 수 있다. row는 줄

18

  • <option>태그는 하나하나의 선택지가 되고 이 태그를 <select>태그로 묶어주면 리스트 형식으로 나오게 된다.
    여러개를 선택할 수 있도록 만들때에는 select태그에 multiple 속성을 주면 된다.

19

  • 버튼을 만들고 싶을 때에는 input type 태그를 button으로 주고 value 속성값에 버튼의 이름을 지어주면 된다.
    안에 정보를 리셋해주고 싶다면 마찬가지로 input type에 reset을 입력한다.

20

  • ui가 없지만(눈에 보이지 않지만) 서버로 어떤 값을 전송하고 싶을때 hidden이라는 타입의 인풋태그를 쓰면 된다.

21

  • lable 태그는 이름표라고 할 수 있는데, for 속성을 사용해주면 연결해주고 싶은 태그에 id값을 똑같이 주면 된다.
    for속성을 주고싶지 않을때에는 lable태그로 감싸주면 된다.

22

  • method는 전송방법을 설정한다. url을 통해 데이터를 전송하는 방식은 get방식이고
    post는 다른방법으로 데이터를 숨겨서 전송한다.

23

  • form action 에 주소를 넣고 input type file과 submit을 지정하면
    파일을 전송할 수 있다.

24

  • html은 정보를 담는 그릇

25

  • 글의 본문에 표현되지는 않지만 그 웹페이지 또는 글의 본문을 설명하는
    상당히 중요한 정보들을 표현할 때 쓰는 태그가 meta 태그이다.
    charset:언어 지정/ name: 이름, content:요약

26

  • header: 상단 article: 본문 footer: 하단

검색엔진 최적화

27

  • 태그를 잘 사용하자 컨텐츠 작성할때 적절한 태그를 잘 사용하자

28

  • title태그를 이용해서 제목을 쓰는게 좋다. meta 태그도 검색할때 중요하다.
    단순 디렉터리 구조 만들기, 한가지 형태의 url제공

29

  • 자연스러운 계층 구조 만들기. 이동경로를 위해 텍스트링크 사용

30

  • 검색엔진을 위한것이 아닌 사용자를 위한 콘텐츠를 작성하자
    보다 나은 앵커<a> 텍스트 작성
    -내용을 함축하는 텍스트 선택, 간결한 텍스트 작성
    -링크를 눈에 띄기 쉽게 포맷하기

31

  • 이미지를 삽입할때에는 alt 속성값을 주는게 좋다.(대안 텍스트)
    의미를 부여한 이름과 특정 디렉터리명을 쓰는걸 권장한다.
    제목태그를 활용해서 중요한 부분을 강조한다.

32

  • 기계가 서치하지 못하게 막는 태그

33

  • 페이지랭크- 사이트 검색 출력의 우선순위
    많은 사이트들이 링크를 하고 있다면 그 사이트는 페이지 랭크가 높다.

34

  • 웹에서 보고싶은 곳에 마우스 우클릭을 하면 개발자도구가 나온다.(검사)
    디바이스 별 화면을 볼 수 있다.(toggle)

35

  • meta name="viewport" 값을 주고 content="width=divice-width"를 주면
    디바이스의 화면에 알맞게 화면을 출력 할 수 있다.

36

  • 외부에 있는 콘텐츠를 내 페이지로 가져올때 iframe 태그를 쓴다.

html5

37

  • video 태그를 사용하면 비디오를 삽입할 수 있다.
    source 라는 태그를 video 태그 안에 넣고 src 속성값에다가 비디오 이름을 주면 된다.
    브라우저마다 지원할 수 있는 비디오의 포맷이 다르다.
    크기를 지정하고 싶다면 video 태그에다가 width 값을 주면 된다.
    controls 속성을 주면 비디오를 컨트롤 할 수 있는 바가 추가된다.

38

  • 많은 웹 브라우저에서 이 기술을 사용할 수 있는가에 따라서 신기술의 도입 여부를 결정해야 하는데,
    Can I use는 이런 결정을 할 때 도움을 준다.

html5의 입력 양식

39

  • input type="number" 숫자만 입력 가능
    새로 추가된 타입들의 특징은 사용자의 입력을 규제할 수 있다.

40

  • input type="date" : 날짜를 입력 할 수 있는 칸이 나온다.
    input type="month" : 년, 월 을 입력 할 수 있다.
    input type="month" : 몇년도 몇번째 주 를 입력할 수 있다.
    input type="time" : 년도와 시간을 입력할 수 있다.
    input type="email" : 이메일주소만 입력할 수 있는 칸이 나온다.
    input type="search" : 텍스트 필드가 나옴(서치) /url, tell도 마찬가지
    -모바일에서는 사용하기 쉽게 숫자 키패드가 나온다.
    input type="range" : min과 max 속성값을 지정해줄 수 있고. 조절할 수 있는 바가 나온다.

41

  • 자동완성기능 : <form autocomplete="on">
    입력받았던 값들을 브라우저가 기억해 다음에는 자동으로 완성해준다.
    자동포커싱기능 : 웹페이지가 떴을 때 포커싱이 갔으면 하는 부분이 있다면 그 input태그에 autofocus속성 추가

42

  • 입력값체크(유효성 검사) : 사용자가 입력한 값이 바른지 검사하는 기능
    유효성 검사는 사용자가 입력하기 쉽게 하기 위한 장치로 인식한다
    검사를 통과한 값들을 무조건 신뢰하지 않는게 좋다.

생활코딩-css

1

  • css는 html을 꾸며주는 언어. <style> 이 기본이고 이 태그 안에 값들을 정해준다.
    <li> 의 폰트 컬러를 red로 주고싶다면 li {color :red;} 이 형식으로 주면 된다.

2

  • css의 실습 환경은 두가지로 분류되는데 하나는 웹 브라우저, 나머지 하나는 editor이다.

3

  • css를 실행시키는 데에는 두가지 방법이 있는데 태그 안에 style값을 바로 지정해주는 것과,
    head안에 style 태그를 만들어서 그안에 값을 지정해주는 방법이 있다.

선택자

4

  • h1을 꾸며주고 싶을 때 css에서 h1이라고 하는 부분은 선택자라고 하며,
    {} 이 안에 들어가는 값들은 선언(declaration) 이라고 한다.

5

  • id 선택자는 아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다.
    css에서는 #을 붙이고 id명을 입력해서 꾸며줍니다.

6

  • class 선택자는 클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다.
    css에서는 .을 붙이고 class명을 입력해서 꾸며줍니다.
    id선택자와는 달리 여러번 사용할 수 있습니다.

7

  • 여러가지 태그의 값들에 같은 css값을 주고싶다면 부모 자식 선택자를 이해하고,
    style 부분에서 > 나 , 를 이용해서 하는게 좋다.

8

  • css Cheat Sheet를 검색해서 이미지로 나오는 것들로 쉽게 이해한다.

9

  • 클래스처럼 동작하지만 각각의 엘리먼트의 상태에 따라 선택한다.
    css는 뒤쪽에 있는 선언을 따른다.

10

  • 게임을 이용한 선택자 수업1

11

  • 게임을 이용한 선택자 수업2

12

  • 게임을 이용한 선택자 수업3

13

  • 게임을 이용한 선택자 수업4

14

  • 빈도수에 따라 많이 쓰는 속성 위주로 공부하는 것이 좋다.
    font-size , color, margin-top :가장 많이 사용되는 속성

타이포그래피

15

  • font-size는 단위가 중요한데 px,em,rem이 있다.
    px은 고정된 폰트의 크기를 지정할때,
    em과 rem은 사용자가 페이지의 폰트를 가변적으로 변경할 수 있게할때
    rem을 주로 쓴다.
    사용자가 브라우저의 글꼴 크기를 키웠을때 px은 바뀌지 않고 rem은 바뀐다

16

  • color는 이름을 지정해주어야 한다. color name, hex, rgb

17

  • text-align은 텍스트를 정렬하는 방법이다.
    right, center, left / justify를 주면 왼,오 깔끔하게 정렬된다.

18

  • font-family:폰트의 종류를 설정
    monospace는 고정폭을 지정
    font-weight:폰트의 굵기 설정
    line-height:줄 간격 설정, 기본값:1.2

19

  • 사용자가 폰트가 없을때, 링크를 걸어주어서 서버에서 다운로드해서 사용할 수 있게 하는것이다.

20

  • 각 엘리먼트가 상위 엘리먼트의 속성 값을 물려받게 되는데 이것을 상속이라고 한다.
    속성에 따라서 상속하는 것이 있고, 상속하지 않는 것이 있다.

21

  • stylish는 웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능이다.

캐스캐이딩

22

  • 웹브라우저를 사용하는 사용자도 자기가 보고자하는 웹페이지의 디자인에 대한 자기 결정권이 있어야 한다.

23

  • 하나의 태그에 중첩돼서 css가 적용 되었을때
    1. style attribute 2. id 3. class 4. tag 순으로 우선순위가 매겨진다.
    가장 구체적이고 명시적인 것에 따른다.
    !important 를 써주면 가장 중요한 것이 된다.

24

  • bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구이다.
http://brackets.io

레이아웃

25

  • 화면 전체를 혼자서 다 쓰는 태그는 block 태그이고,
    한 줄에 다 표시되는 태그는 inline 태그이다.
    서로 속성을 바꿔줄 수 있는데 display값을 inline, block으로 바꿔주면 된다.

26

  • 각각의 태그들이 웹페이지에 표현 될때 그 태그의 부피감을 결정한다.
    padding: 내부여백 설정 / margin: 외부여백 설정(다른 요소와의 간격)
    인라인 방식에서는 width, height값이 무시된다.

27

  • box-sizing 속성은 다른 요소들의 영향을 받지 않고 사이즈를 지정할 수 있도록
    값을 설정하는 방법이다.

28

  • 마진값을 100씩 주면 요소들간의 간격이 200이 되는것이 아니라
    겹쳐서 100이 된다.

29

  • 부모태그와 자식태그의 마진겹침 현상
    부모엘리먼트가 시각적인 요소가 없는 투명한 상태일때
    부모 엘리먼트와 마진값과 자식엘리먼트의 마진값중에 큰쪽의 마진값이
    자식엘리먼트의 마진값으로 사용된다.

30

  • 어떤 태그의 시각적인 요소가 없다면 그 태그의 마진값은
    위쪽에 있는 마진값과 아래쪽에 있는 마진값중에 더 큰값이 그 태그의
    마진값이 된다.

31

  • position의 기본값: static
    상대적으로 위치를 움직이고 싶다면 position: relative

32

  • position: absolute를 주고 부모 태그에 position: relative를 주면
    그 부모태그를 기준으로 위치를 움직이게 된다.

33

  • fixed는 특정한 엘리먼트를 화면에 그 위치에 고정시켜서
    스크롤로부터 완전히 독립되게 한다.

34

  • 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았다.
    flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다.

35

  • flex를 쓸 때에는 자식과 부모가 있어야 한다.
    부모태그에게 display값을 flex라는 값을 주는게 처음에 해야 할 일이다.
    flex-direction: row (기본값) reverse(반대)
    column-reverse를 해주면 열이 반대로 출력된다. (수직)

36

  • flex-basis : flex 방향에 해당되는 엘리먼트의 크기를 지정
    flex-grow : 여백을 채움(기본값: 0)
    한 엘리먼트에 값을 따로 지정해주게 되면 (ex:2) 그 엘리먼트가 더 큰값을 따르게 된다.
    flex-shrink : 화면을 줄여도 줄어들지 않는다.
    (0일때, 여러 엘리먼트값 1,2 이런식으로 주게 되면 그 수의 크기에 따라 줄어든다)

37

  • flex를 이용해서 holy grail layout 만들기

38

  • 기타 flex 속성 툴

39

  • 그 장치에 적합한 디자인, 적합한 표현을 할수 있게 해주는 기술이 media query이다.
    반응형에서 아주 중요한 역할을 함. @media가 media query의 시작
    코드가 나중에 나오는게 우선순위가 높아진다.

40

  • 미디어쿼리를 이용한 응용실습

41

  • 블록요소들을 나란히 두고싶을때에는 float값을 주면 된다(float:left)
    레이아웃을 잡을때 사용함

42

  • holy grail layout 만들기 실습

43

  • 멀티컬럼은 신문과 같이 여러개의 컬럼을 나눠서 레이아웃을 짜는 경우에 쓰는 기술이다.
    column-count : 컬럼을 몇 개로 나눌지 결정/ column-width : 하나의 컬럼의 크기를 몇으로할지
    gap : 컬럼 사이 간격 / rule-style : 컬럼 사이 선 스타일 / rule-width : 컬럼 사이 선 두께

44

  • background 속성은 특정 엘리먼트의 배경에 이미지나 색깔 등을 지정할 수 있다.

45

  • filter는 그래픽 대상에게 기존의 그래픽 프로그램들을 통해 작업했던 것들을
    코드로 대신할 수 있다. (원본 이미지 그대로 유지)

46

  • 이미지와 이미지를 혼합하는 기능이다.

47

  • 배경과 배경(image, color)을 혼합한다.

48

  • 컨텐트와 배경을 혼합한다.

49

  • transform은 엘리먼트 크기, 비틀기, 회전 등 포토샵에서 가능했던 작업들을 코드화한 기능이다.
    2차원, 3차원이 있다

50

  • 여러 속성을 쓰고 싶으면 한 줄에 이어서 쓴다.
    transform-origin : 중심축을 중앙이 아닌 곳으로 변경하고 transform한다

51

  • 백터 그래픽. 이미지가 깨지지 않는다.

52

  • svg를 통해 그림 만들기

53

  • transition은 장면 전환을 부드럽게 할 수 있는 속성이다.
    property : 어떤 속성에 transiton을 적용할 것인가를 설정
    duration : 몇 초 단위로 전환할 것인지 설정

54

  • delay : 시간차를 주는 속성
    timing-function : 장면전환속도를 균일하지 않게 설정해준다.

55

  • link, import는 중복의 제거를 위해 css파일을 외부로 빼는 기능이다.
    중복이 일어나게 되면 유지보수가 어려워지고, 코드이해도가 낮아진다.
    -> link 태그 혹은 style 태그 안에 @import로 css파일 삽입한다.

56

  • minify는 css코드의 크기를 작게 압축해서
    서버와 클라이언트 사이의 주고받는 데이터의 크기를 줄여준다.

57

  • preprocesser는 표준화된 css문법은 아니지만 더 편리하게 개인이 커스터마이징한 기능들을 쓸 수 있고
    그것을 css표준문법으로 변환해주는 기술이다.

58

  • 에디터의확장기능- 에디터에서 확장하고 싶은 기능을 검색해서 설치하면
    그 기능이 에디터에 활성화가 된다.

59

  • 명령어로 컴파일하는 프로그램을 설치한 뒤 하고 싶은 기능을 코드로 찾아서 쓰면 된다.
    에디터를 사용하지 않아도 컴파일할수 있다는 장점이 있다.

60

  • 스타일러스를 이용한 코딩

61

  • fontello는 아이콘을 폰트의 형태로 바꿔서 사용할 수 있게 하는 기술이다.
    fontello.com fontawesome

62

  • 폰텔로 스타일시트를 삽입해 넣고 싶은 이미지에 맞는 문자코드를 입력하면
    그 문자코드가 이미지로 출력된다.

63

  • 폰텔로의 원리는 삽입한 css 파일에 클래스의 값이 아이콘/ 시작되는 모든 before 에 대해서
    font-family 를 폰텔로로 한다. 라는것이 지정되었기 때문에 이미지로 뜨는것이다.

63

  • svg 사이트에 들어가서 자신이 찾고싶은 이미지의 키워드로 이미지를 찾은 후.
    svg 포맷으로 다운받는다.
    그 후 다운로드 웹폰트 하면 자유롭게 쓸 수 있다.

javascript

1

  • HTML을 동적(프로그래밍적)으로 제어한다.
    html: 정보 css: 디자인

2

  • 크롬 개발자도구를 사용해서 실시간으로 내가 작업한
    자바스크립트 명령을 확인할 수 있다.

3

  • inline 방식은 html 태그안에 직접 자바스크립트를 기술하는 방식이다.
    하지만 정보와 제어가 섞여 있기 때문에 헷갈리기 쉽다.
    script는 html의 문법

4

  • script 태그를 만들어서 자바스크립트 코드를 삽입하는 방식이다.
    html코드와 javascript를 분리하는데에서 inline방식과 차이가 있다.

5

  • js파일로 javascript를 별도의 파일로 분리할 수 있다.
    src 태그로 js파일을 삽입하면 웹브라우저에서 자동적으로 다운받는다
    보다 엄격하게 정보와 제어를 분리할 수 있고,
    하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다.
    -중복제거, 유지보수의 편의성

6

  • script는 head태그 안에 써도 되지만 html코드를 읽기 전에 script가 실행되어서
    변수의 값이 null이 될수도 있기 때문에 오류가 날수있다.
    하지만 window.onload를 쓰면 가능하다.(모든 페이지를 읽은 후 script 실행)

7

  • 자바스크립트로 객체를 제어해서 웹브라우저를 제어할 수 있다.

8

  • window는 전역객체, 쓴것과 쓰지않은것이 같다.
    document dom=도큐먼트 오브젝트

9

  • bom = browser object model
    웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단

10

  • Window 객체는 모든 객체가 소속된 전역객체이다.

11

  • alert: 경고창을 띄운다.

12

  • confirm: 사용자가 확인을 눌렀는지 취소를 눌렀는지에 따라서,
    true, false로 출력된다.
    if~else 문을 사용해서 코드를 작성한다.

13

  • prompt는 사용자로부터 어떤 값을 입력받아서
    자바스크립트의 애플리케이션을 동작할 수 있다.

14

  • Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 property이다.
    문서의 주소정보와 다양한 정보를 알아낼 수 있다.

15

  • location 객체는 주소를 알아낼 수 있을 뿐만 아니라
    url을 변경하고 reload 할 수 있다.

16

  • navigater 객체는 javascript를 이용해서 현재 javascript가 실행되는 브라우저에
    브라우저의 제품명과, 버전을 확인할 수 있고, 브라우저에 맞는 코딩을 할 수 있게 해준다.

17

  • console.dir(navigator); : 브라우저의 정보 열람 명령
    console.dir(navigator.appVersion); 브라우저에 대한 자세한 정보
    appName보다는 appVersion을 쓰는게 좋다.

18

  • Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만
    기능테스트를 사용하는게 크로스브라우징을 위해서 더 좋다.

19

  • window.open : 새 창 생성
    window.open('demo2.html');
    _self 인자를 추가하면 현재창에서 바뀐다.
    _blank:새 창 생성(클릭하면 무한) / ot: 새창이 생성되지만 한개의 창이 있으면 그 창에서 갱신된다.

20

  • 창 제어-상호작용 (실습)