Infor

Design Site Reference

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

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
HTML 검사 http://validator.kldp.org/
CSS 검사 http://css-validator.kldp.org//
제이쿼리 http://codejss.tistory.com/category/Gallery/Slider
RGB 색상표 http://materializecss.com/color.html
그라데이션 색상표 https://webgradients.com/
반응형 보기 http://troy.labs.daum.net/
viewportsizes http://viewportsizes.com/
애니메이션 효과 https://daneden.github.io/animate.css/
transformations for jQuery http://ricostacruz.com/jquery.transit/#top

Site Research Reference

Site URL
5day https://www.5day.co.kr
dbcut https://www.dbcut.com
awwwards https://www.awwwards.com
csswinner https://www.csswinner.com
land-book https://land-book.com
lapa.ninja https://www.lapa.ninja
Entity Code https://www.toptal.com
emmet https://emmet.io

Site Trend

Site URL
trend.logger http://trend.logger.co.kr
marketshare http://marketshare.hitslink.com

생활코딩

HTML (https://opentutorials.org/course/2039)

1. HTML-기술

  • 웹에 대한 전반적인 흐름, 분위기를 이해를 하면 더 쉽게 HTML을 배울 수 있다.

2. HTML-기술 소개

  • HTML(Hyper Text)하이퍼텍스트를 가장 중요한 특징으로 하는 (Markup)마크업이라는 형식을 가진(Language)컴퓨터 프로그래밍 언어 HTML은 사람과 컴퓨터간의 약속이다. 즉 웹브라우저 프로그램 사이에서 서로가 이해할 수 있는 약속을 말한다.

3. HTML-기본문법 1

  • 태그는 HTML에서 가장 중요한 언어이자 특징이다.
  • 메모장에서 HTML 파일을 만들 수 있다. 저장 할 때 확장자를 html로 입력 후 파일형식은 모든파일로 바꾼다.
  • 그다음 인코딩은 UTF-8로 설정 후 저장 하면 웹사이트에서 열 수 있다.

4. HTML-기본문법 2

  • 태그=<>시작 태그, </>닫히는 태그
  • <strong>이라는 태그는 강조하고 싶은 부분에 입력을 해준다. 끝나는 부분에는 닫히는 태그인 </strong>을 해준다.
  • 제목을 입력할 때는 h1태그를 사용하면 된다. h1이 크다면 숫자를 조절해 작게 할 수 있다 1~6까지 가능

5. HTML-하이퍼텍스트와 속성

  • <a>라는 태그는 링크를 걸어주는 태그다.(a태그는 anchor의 약자이다.)
  • 태그명만으로는 정보가 불충분 하기 때문에 href를 사용하여 URL를 입력해준다.
  • target="_blank"를 입력해주면 새로운 창으로 홈페이지를 보여준다.
  • title="내용"을 입력하면 마우스를 올렸을 때 내용을 보여준다.
  • 속성에서는 순서가 바뀌어도 상관없다.
  • GML(1960년대) -> SGML -> SGMLguid -> HTML
  • SGMLguid에서<a> 태그 하나가 추가 되어 HTML으로 되었다.

6. HTML-맥에서 텍스트 에디트 주의사항

  • 맥에서 사용할 경우 텍스트 에디터에서 편집-변형-스마트 인용 체크를 한다.
  • 텍스트 에디터는 문서 편집용으로 주로 사용한다.

7. HTML - 태그의 중첩과 목록

  • html은 줄바꿈을 인식하지 않는다.
  • 목록을 표현하는 태그를 <li>태그 라고 한다.
  • <ul>태그를 이용하여 같은 성질들을 그룹화 할 수 있어 목록을 분류 해 줄 수 있다.
  • 태그 안에 또 다른 태그를 사용할 수 있다.
  • 탭를 이용하여 태그를 조절하여 가독성을 높인다.
  • <ul>태그 대신 <ol>태그를 사용하면 숫자로 표시된다.

8. HTML - 문서의 구조

  • <title>태그를 사용하면 탭 제목에 표시가 된다.
  • 글씨가 깨져 보일 경우는 <mata charset="utf-8">을 사용한다.
  • <head>태그는 부가적인 정보<body>태그는 본문을 말한다.
  • 가장 큰 태그는 <html>태그를 해준다.
  • <html>태그 안에 <head>태그와 <body>태그를 넣어준다.

9. HTML - DOCTYPE

  • 태그를 만들 때 가장 위에 <!DOCTYPE html>를 작성한다.
  • <!DOCTYPE html> Document type declaration의 약자이다.
  • 20개의 태그를 시작해 현재는 140개정도의 태그가 있다.

10. HTML - 웹사이트 만들기

  • 여러개의 html를 만들어서 각각 링크를 연결 할 수 있다
  • 링크를 연결 할 때 파일명은 정확히 입력해야 연결했을 때 오류가 나지 않는다.
  • 홈페이지에서 소스보기를 통해 사용된 태그를 볼 수 있다.

11. HTML - 개발도구

  • atom를 이용하게 되면 디렉토리가 정리되어 화면에 나와 체계적으로 볼 수 있다.
  • 또한 2개의 파일을 열 수 있어 다중편집이 용이하다.
  • emmet를 사용하게 되면 태그 입력 후 tab을 눌르면 자동으로 만들어진다.
  • 다중으로 태그를 입력할 때도 tab으로도 가능 ex)ul>li*4 하면 4개의 태그가 만들어진다.
  • ctrl+alt+오른쪽 화살표를 동시에 눌러 자동으로 편집지정으로 이동한다.

12. HTML - 변천사와 통계

  • 최초의 HTML은 18개이다.
  • 웹이 발전하는 과정에서 태그가 생성되거나 없어진다.
  • 가장 많이 사용하는 태그는 <head>, <html>등이 있다.

13. HTML - 단락 : p태그

  • <p>태그는 paragraph의 줄임말로 단락을 표현할 때 사용한다.
  • 단락의 시작과 끝에 <p>태그를 감싸준다.
  • css프로그래밍 언어를 통해서 <p>태그의 간격을 조절할 수 있다.

14. HTML - 줄바꿈 : br태그

  • <br>코드는 A forced line-break의 줄임말이다.
  • 줄바꿈을 할 때는 <br>코드를 사용하여 자유롭게 조절할 수 있다.
  • <br>태그는 시각적으로 단락을 조절하지만 <p>태그는 단락의 정보를 표현해준다,

15. HTML - 이미지 : img태그

  • <img>태그는 이미지를 넣는 태그이며, html2부터 시작하였다.
  • <img>태그는 닫을 필요가 없다.
  • 이미지 크기를 설정할 때 폭이나 넓이 둘 중에 하나만 선택하여 입력하는게 좋다.
  • alt 값은 이미지가 깨져서 보이지 않을 때 이미지의 설명을 보여준다./li>
  • title속성은 이미지에 마우스를 올려 놓았을 때 도움말이 나온다.
  • 16. HTML - 표1 : 기본

    • 웹 사이트에서 표를 삽입할 때 사용되는 <table>태그 이다.
    • 테이블을 만들 때 항목을 설정하는 <td>태그를 사용한다.
    • 같은 행에 속하는 <td>태그들을 <tr>태그를 묶어 준다.
    • border속성을 사용하면 테이블의 선을 조절 할 수 있다.

    17. HTML - 표2 :구조

    • <thead>태그는 테이블의 제목, <tbody>태그는 테이블의 본문을 말한다.
    • 테이블의 제목들을 <th>를 사용하면 글씨를 좀 더 진하게 만들어 준다.
    • <tfoot>태그를 사용하면 표 가장 아래로 보여지게 된다.

    18. HTML - 표3 : 병합

    • <rowspan>을 사용하게 되면 행이 병합된다. ex.<td rowspan="2">=즉 2개의 행이 병합
    • <colspan>을 사용하게 되면 열이 병합된다. ex.<td colspan="2">=즉 2개의 열이 병합

    19. HTML - form 기본

    • 사용자가 입력한 정보를 서버로 전송하는 것을 <form>이라고 한다.
    • 사용자로부터 정보를 입력 받을 수 있는 태그를 <input>태그다.
    • 아이디 : <input type="text"> / 비밀번호 : <input type="password">
    • name=""속성을 이용하여 각각 이름을 설정하여 서버에 전송할 때 각각 이름의 값으로 전송이 된다.
    • 전송되는 버튼을 만들 때는 <input type="submit">
    • <form action="정보를 보낼 주소 입력">

    20. HTML - form : 문자입력

    • name속성은 모든 form태그에서 필요한 속성이다.
    • value속성을 사용하면 사용자가 페이지를 열었을 때 기본적으로 쓰여 있는 속성이다.
    • <textarea>태그를 사용하면 텍스트를 여러줄을 입력할 수 있다.
    • cols 속성을 이용하면 폭이 넓어지고 rows 속성 입력하면 높이가 넓어진다.
    • 기본값을 설정할려면 default value를 입력해준다.
    • <textarea cols="50" rows="2">default value</textarea>

    21. HTML - form : dropdown list

    • Dropdown List 제한된 공간된 안에서 여러개의 선택지를 선택할 수 있는 기능
    • <option>태그를 사용하여 선택할 수 있게 만들 수 있다.
    • <li>태그를 <ul>태그를 묶는 것처럼 <selct>태그로 묶어준다.(dropdown list 또는 combo box라고 한다.)
    • Value속성을 사용하여 컴퓨터가 전송되는 데이터를 입력 할 수 있다.
    • select 태그에 multiple 속성을 추가해 다중선택 할 수 있도록 한다.(ctrl를 통해 다중선택)

    22. HTML - form : radio, checkbox

    • <input type="radio">는 버튼을 눌러 선택할 수 있게 만드는 태그다.
    • 같은 이름으로 묶어 주면 여러개를 만들어도 하나를 선택할 수 있다.
    • <input type="checkbox">속성을 사용하면 다중 선택이 가능하다.
    • checked를 입력하게 되면 체크가 되어 있는 상태에서 보여지게 된다.

    23. HTML - form : button

    • <input type="button">태그는 버튼의 UI만 만들어진다.
    • 버튼 태그는 HTML만으로는 사용을 못하고 자바스크립트를 이용하여 사용한다.

    24. HTML - form : hidden

    • UI가 필요 없거나 또는 몰래 서버쪽으로 데이터를 전송하는 경우 <hidden>태그를 사용한다.

    25. HTML - form : label

    • <label>은 폼태그의 이름을 지정하는 태그이다.
    • <label for="이름">태그를 <input id="이름">로 이름을 지정해즐 수 있다.
    • 이름을 지정하려는 <input>태그를 <label>태그로 감싸준다.
    • id 태그를 쓰기 싫으면 <label>태그로 감싸준다.

    26. HTML - form : method

    • method="get"방식은 url을 통해 데이터를 전송한다.
    • method="post"방식은 url이 아닌 다른 방식으로 데이터를 숨겨서 전송한다.
    • method에서 방식을 선택하지 않으면 기본적으로 get방식으로 된다.
    • form을 이용해서 데이터를 전송하면 post로 한다.

    27. HTML - form : 파일 업로드

    • 파일 선택할 ui는 <input>태그를 사용한다.
    • <input type="file">,<form action="주소"> <form> 태그 안에 작성한다.

    28. HTML - 정보로서 HTML

    • 현재의 HTML은 인류의 지식을 담아내는 그릇같은 역활을 한다.

    29. HTML - font

    • <font>태그는 대표적으로 퇴출된 태그이다.
    • <font size="3">3은 기본 값이고, 1~8부터 크기를 변경할 수 있다.
    • <font>태그는 시각적인 디자인일 뿐 정보로의 의미는 없기 때문에 퇴출된다.
    • CSS를 언어를 통해서 효율적인 디자인을 할 수 있다.

    30. HTML - meta 태그

    • 데이터를 설명하는 데이터를 meta data라고 한다.
    • <meta charset="utf-8">태그를 해주지 않으면 브라우저에 따라서 저장 방법이 다르기 때문에 깨질 수 있다.
    • <meta name="description" content="...">태그는 content의 내용이 검색엔진에서 웹페이지의 설명에 쓰일 경우가 많다
    • <mata name="keywords">태그 또한 검색엔진에 키워드로 나온다.
    • <meta http-equiv="refresh" content="30">태그는 30초마다 새로고침 된다.

    31. HTML - 의미론적인 태그

    • <header>태그는 웹페이지 상에서 가장 중요한 부분이 표현된다라는 의미만 가지고 있는 태그이다.
    • <header>태그는 웹페이지에서는 표현이 되지 않는다.
    • <footer>태그는 웹페이지의 부가적 정보를 담당하는 부분에 해당되 하단에 배치된다.
    • <nav>태그는 웹페이지를 탐색할 때 사용하는 네비게이션인지를 의미론적으로 정의한 태그이다.
    • <article> 태그는 본문에서 사용하는 태그이다.

    32. HTML - 검색엔진최적화1

    • html 코드를 의미론적으로 타당한 태그로 잘 설명하는 것이 검색엔진 최적화의 기본이다.
    • 너무 과하게 하게 되면 스팸이나 사기로 생각해 검색결과에서 차단시킨다.
    • SEO는 Search Engine Optimization의 약자이다.
    • 구글 검색엔진 최적화 가이드

    33. HTML - 검색엔진최적화2

    • <title>태그가 검색엔진에서 우선순위가 된다. 페이지마다 고유한 <title>태그를 작성하는게 좋다.
    • <meta>태그는 검색할 때 중요한 검색의 대상이 된다. description 메타 태그는 짧은 단락을 사용하는 것이 좋다.
    • 어떤 정보를 담고 있는지를 잘 보여줄 수 있는 url를 사용해야 한다.
    • url에서는 "page1.html"과 같은 일반적인 페이지 이름 선택은 피해야 한다.
    • 두 페이지가 똑같은 내용을 갖고 있는 경우 사용자가 하나의 페이지를 보여주기 위해서는<link rel="canoncial" herf="ooo/1.html">로 입력한다.
    • 301.리다이엑션은 php나 자바 등 서버쪽 언어를 사용해야 한다.

    34. HTML - 검색엔진최적화3

    • 크롤링은 구글과 같은 검색엔진이 사이트 내용을 가져가는 것을 말한다.
    • 링크를 통해 사이트의 정보를 가지고 간다.
    • 홈페이지는 어떤 웹 사이트의 대문 페이지고, 일반적으로 파일의 이름을 index.html로 한다.
    • 사용자가 위치하고 있는 웹페이지가 어디에 있는 지 알려주고 상위 페이지 경로등을 제공하는 것이 검색엔진의 최적화의 도움을 준다.

    35. HTML - 검색엔진최적화4 : 링크

    • <a>태그는 링크에 대한 대표성이 있는 이름으로 지정한다.
    • 주제에 벗어나거나 링크되는 페이지는 좋지 않다.

    36. HTML - 검색엔진최적화5 : 이미지와 제목

    • 이미지는 alt를 통해 정보를 제공해야 한다.
    • 이미지가 화면에 깨졌을 때 alt를 통해서 이미지의 내용이 표시가 된다.
    • 검색엔진이 alt의 내용을 기반으로 해서 보여 준다.

    37. HTML - 검색엔진최적화 6 : robotstxt&sitemap

    • Disallow: / 에서 /만 적혀 있다면 어떠한 로봇도 접속을 허용하지 않는다라는 뜻이다. 다른 검색엔진 사이트에 노출되지 않는다.
    • Disallow는 검색할 필요가 없거나, 보호될 필요가 있는 정보들이다.
    • Allow는 검색할 수 있거나 다른 웹페이지에서도 확인 가능한 정보들이다.

    38. HTML - 검색엔진최적화7 : 페이지랭크

    • 많은 사이트들이 링크를 가지고 있다면 그 사이트는 더 좋은 컨텐츠를 가질 확률이 높다.

    39. HTML - 웹 개발자 도구

    • 해당영역에 검사를 클릭해 html코드를 확인 할 수 있다
    • toggle를 통해 PC 화면말고 다른 장치(핸드폰,태블릿 등)에서 시뮬레이션 해 주는 도구이다.
    • Network는 웹 브라우저가 웹 서버에 설치되어 있는 html을 웹서버로 부터 받아서 화면에 표시해주는 장치이다.

    40. HTML - 모바일 지원

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • 입력해주면 pc뿐만 아니라 모바일에서 자동적으로 화면에 맞게 설정해준다.

    41. HTML - 외부문서삽입 : iframe

    • iframe src="주소"를 입력한다.
    • 폭이 좁을 경우 width, height 값을 조절해준다.
    • iframe은 보완이 취약하기 때문에 출처가 불분명한 주소는 사용하지 않는 것이 좋다.
    • 주소 뒤에 sandbox 속성을 사용해 위험할 수 있는 것들을 원천적으로 차단 시켜준다.

    42. HTML - 비디오 삽입

    • HTML5가 나오면서 플래시 같은 플러그인이 없어도 웹페이지의 video를 삽입할 수 있게 되었다.
    • <video><source src="주소 입력"></video>
    • 동영상 확장자에 따라 웹 브라우저에서 재생이 안될 수도 있다.
    • controls 속성을 넣어 영상이 재생할 수 있도록 해준다.

    43. HTML - caniuse

    • http://caniuse.com/
    • 최신 기술들을 사용해도 되는지에 대한 의사결정에 도움을 주는 사이트이다.
    • 녹색으로 표시 되어 있으면 지원 가능 빨간색일 경우는 지원하지 않는다.

    44. HTML - HTML5의 새로운 제출양식 1

    • 사용자가 어떤 정보를 서버 쪽으로 전송할 때 사용하는 것을 폼이다.
    • <input type="number" min="10" max="15"<10이상 15이하까지만 입력 가능

    45. HTML - HTML5의 새로운 제출양식 2

    • <input type="date" name="datev"<사용자가 날짜를 입력 할 수 있도록 해준다.
    • <input type="month" name="monthv"<월을 입력 할 수 있다.
    • input type은 여러가지 기능들이 있다.
    • (color / date / datetime / datetime-local / email / month / number / range / search / tel / time / url / week)
    • 모바일에서도 쉽게 입력할 수 있도록 지원해준다.

    46. HTML - html5 form 3 : 새로운 속성들

    • autocomplete="on"을 통해 자동완전 기능이 활성화가 된다.
    • placeholder속성의 값이 form에 나타내준다.
    • autofocus속성은 사용자가 페이지를 접근했을 때 커서가 자동으로 보여진다.

    47. HTML - html5 form 4 : 입력 값 체크

    • type 값이 email인데 사용자가 잘못 입력할 경우 메세지와 함께 제출버튼이 활성화 되지 않는다.
    • 필수적으로 입력해야 할 경우 required의 속성을 써준다.
    • required patten 속성값은 정규표현식이라는 프로그래밍 언어가 온다.
    • 정규표현식의 .(점)은 어떠한 문자가 와도 상관이 없다라는 뜻이다.
    • .(점)뒤에 (+)더하기를 입력하면 1개 이상의 문자가 와야 한다


    CSS (https://opentutorials.org/course/2418/13339)

    1. CSS 수업 - CSS 소개

    • CSS는 웹페이지를 꾸며주는 언어이다.CSS는 HTML의 도움을 받는다.
    • HTML은 정보에 표현해주고 CSS를 통해 디자인의 기능을 한다.
    • <style></style>태그를 통해 디자인을 넣을 수 있다.
    • <style> li {color:red;} </style>를 입력하면 <li>태그에 속해있는 모든 텍스트 색을 붉은색으로 변경해준다.
    • CSS를 이용하게 되면 더 편리하게 디자인을 할 수 있다.

    2. CSS 수업 - 실습환경

    • 윈도우에서는 메모장을 이용하고 맥에서는 textedit 프로그램을 사용하면 된다.

    3. CSS 수업 - HTML과 CSS가 만나는 법

    • CSS를 실행하는 방식은 크게 두가지로 나뉜다.
    • 첫번째는 <h1 syle="color:red">hello world</h1>하는 인라인(li line)방식이다.<body>태그 안에다가 작성
    • 두번째는 <style>h2{color:blue}</style>태그를 <head>태그 안에서 작성하면 된다.

    4. CSS 수업 - 선택자와 선언

    • CSS에 가장 기본적인 문법은 선택자(selector)와 선언(declaration)이다.
    • 효과를 지정하고 나면 세미콜론(;)을 사용해야 한다.

    5. CSS 수업 - 선택자의종류 1 : 아이디선택자

    • 한 가지에만 효과를 주고 싶을 때는 id속성을 이용한다.
    • #select{font-size:50px;}를 해주면 id값이 select인 것에만 속성이 바뀐다.
    • 앞에다가 #을 넣어야지만 효과가 실행된다.

    6. CSS 수업 - 선택자의종류 1 : 아이디선택자

    • ul li{color:red;}를 넣게 되면 <ul>태그 안에 있는 <li>태그의 속성이 적용된다.
    • #(id이름 값)>li{border:1px solid red;}으로 할 경우 직계 자손인 <li>태그에 대해서만 속성이 적용된다.
    • 2개의 태그가 동일한 값을 적용하고 싶을 때 ,를 사용한다. ex)ul,ol{background-color: #111;}

    7. CSS 수업 - 선택자 공부팁

    • CSS셀렉터는 언어에서 주어 같은 역활로 가장 중요하다.
    • CSS Cheat Sheets를 사용하면 도움이 많이 된다.
    • CSS선택자를 게임의 형식을 통해서 익힐 수 있는 사이트 http://flukeout.github.io/

    8. CSS 수업 - 가상클래스선택자

    • link - 방문한 적이 없는 링크
    • visited - 방문한 적이 있는 링크
    • hover - 마우스를 롤오버 했을 때
    • active - 마우스를 클릭했을 때
    • CSS는 두 개가 동급인 경우 뒤쪽에 있는 선언을 선택한다.
    • 위의 선택자는 순서대로 지정하는 것이 좋다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능 (color / background-color / border-color / outline-color / The color parts of the fill and stroke properties)

    9. CSS 수업 - 속성을 공부하는 방법

    • 구체적인 효과 하나하나를 속성이라고 하고 영어로는 property라고 한다.
    • 과학적인 방법으로 빈도수를 조사하기 위해서 마이크로소프트에서 검색엔진 bing.com을 통해서 수집한 전세계 웹페이지의 통계 자료를 볼 수 있다.
    • https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/

    10. CSS 수업 - 타이포그래피 : font-size

    • 글꼴 크기를 지정하는 주요 단위로는 px, em, rem이 있다.
    • px로 하면 폰트의 크기가 지정한 크기로 고정 되어 있다.
    • em이나 rem으로 하게 되면 사용자가 브러우저의 설정을 바꾸면 그 설정에 따라서 변한다.
    • 오늘날 사용자가 디자인을 변경할 권리를 부여하기 위해 rem이 권장된다

    11. CSS 수업 - 타이포그래피 : color

    • color를 선택하는 방법으로는 color name, hex(16진수 ex #FF0000),rgb(빨,초,파 ex rgb(255, 0, 0)가 있다.
    • <style>h1{color:rgb(0,20,25)}</style>
    • <style>h1{color:#00ff00;}</style>

    12. CSS 수업 - 타이포그래피 : text-align

    • text-align는 텍스트를 정렬하는 속성이다.
    • left : 왼쪽 정렬
    • right : 오른쪽 정렬
    • center : 가운데 정렬
    • justify : 양쪽 정렬

    13. CSS 수업 - 타이포그래피 : font

    • 글꼴을 지정할 때 font-family를 사용한다.
    • style p{font-family: arial, verdana}를 하면 arila 글꼴이 없는 경우 verdana 폰트로 보여준다.
    • serif or sans-serif(장식 O or 장식 X)는 글꼴에서 사용하는 장식을 의미한다.
    • monospace(고정폭 or 가변폭)을 정해준다.
    • font-weight가중치, 두께를 의미한다.
    • lint-hight는 행간을 의미하는데 1.2는 기본값이다.
    • font는 한 번에 사용할 수 있는데 순서를 지켜서 사용해야 한다.

    14. CSS 수업 - 타이포그래피 : 웹폰트

    • 웹폰트는 개발자가 선정한 폰트를 사용자가 가지고 있지 않을 때를 대비해 서버에서 해당 폰트를 다운받을 수 있게 한다.
    • 구글이 제공하는 웹폰트를 무료로 사용할 수 있다google fonts
    • 내가 가지고 있는 폰트를 웹폰트로 만들 때 web font generator를 사용하면 된다.

    15. CSS 수업 - 상속

    • 상속은 부모 엘리먼트 속성을 자식 엘리먼트가 물려받는 것을 의미한다.
    • 상속은 CSS에서 생산성을 높이기 위한 중요한 기능이다.
    • /* */주석을 사용하면 코드상에는 존재하나, 컴퓨터는 무시한다.
    • CSS에는 모든 속성들이 상속되는 것은 아니다.

    16. CSS 수업 - stylish

    • stylish : 크롬 플러그인 다른 사람들이 올려놓은 웹사이트의 새로운 디자인을 적용하거나 내가 직접 디자인할 수 있게 도와준다.
    • userstyles.org라는 사이트를 이용해서 구글등 사이트들의 CSS 커스트마이징해서 공유한다. https://userstyles.org/

    17. CSS 수업 - 캐스케이딩 소개

    • CSS는 Cascading style Sheet의 약자이다.
    • 웹브라우저, 사용자, 저자가 조화를 이루워 구현할 수 있는 언어가 CSS이다.
    • 웹브라우저<사용자<저자

    18. CSS 수업 - 캐스케이딩 실습

    • 하나의 태그에 중첩해서 CSS가 적용됐을 때 우선 순위가 있다.
    • style 속성이 1순위가 되고 id selector, class selector, tag selector 순이다.
    • 구체적인 것이 우선순위가 높아야 생산성이 높아진다.
    • !important를 써주면 우선순위가 높아지지만 좋은 방법은 아니다.

    19. CSS 수업 - inline block

    • html 엘리먼트들은 크게 두가지로 구분된다.
    • 화면 전체를 사용하는 태그 => block element
    • 화면의 일부를 차지하는 태그 => inline level element

    20. CSS 수업 - box model

    • 박스모델 : 태그의 부피와 태그간의 여백 위치, 크기를 결정한다.
    • 각각의 태그들을 그 태그 바깥쪽에 사각형의 박스와 같은 모양으로둘러싸여 있어서 박스로 표현한다.
    • 마진 : 태그와 태그 사이의 여백.
    • 패딩 : 태그와 태그를 감싸는 테두리 사이의 여백
    • *인라인 엘리먼트는 width, height 값 무시

    21. CSS 수업 - box-sizing

    • 어떤 엘리먼트(element)의 크기를 예측학 쉽도록 하는 방법이다.
    • content의 영역의 크기를 width 값으로 지정했다.
    • box-sizing의 기본값은 content-box이다.
    • border-box로 값을 변경 할 경우 선의 굵기의 상관없이 크기가 동일해진다.

    22. CSS 수업 - 마진 겹침 1

    • 마진은 테두리와 다른 element의 테두리 사이의 간격을 말한다
    • 두 개의 마진 값 중에 더 큰 값이 두 개의 태그 사이의 간격이 마진겹침이다.

    23. CSS 수업 - 마진 겹침 2

    • ctrl+/를 하게 되면 자동으로 주석처리가 된다.
    • 주석은 코드상에는 존재 하나 웹에서는 무시한다.
    • 부모,자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모,자식 마진 중 마진이 큰 쪽이 자식 마진 럼 사용된다.

    24. CSS 수업 - 마진 겹침 3

    • 위,아래 엘리먼트들이 있을 때 위의 시각적 요소가 없어지면 위,아래 중 마진이 큰 쪽이 아래 마진처럼 사용된다

    25. CSS - 포지션1 : relative VS static

    • 포지션은 각각의 엘리먼트의 위치를 지정하는 방식과 관련이 있다.
    • position의 기본값은 static; 이다.
    • bottom과 top이 동시에 적을 경우 top이 우선으로 나타나고, left아 right 경우도 left가 우선적이다.
    • position: relative;로 설정할 경우 offset(위치)를 지정하기 위해서는 필요하다.

    26. CSS - 포지션2 : absolute

    • position: absolute는 html 엘리먼트의 기준의 위치를 해서 자리를 잡는다.
    • absolute는 기준값을 주지 않는 경우 부모 엘리먼트에 위치된다.
    • 엘리먼트가 absolute로 지정되면 더 이상 부모 엘리먼트는 더이상 무의미 하다.
    • 부모의 엘리먼트의 포지션을 relative;로 지정해주게 되면 속해있는 엘리먼트는 부모엘리먼트 기준으로 offset의 값이 보여진다.

    27. CSS - 포지션3 : fixed

    • position:fixed;는 어떤 특정한 엘리먼트를 그 위치에 고정시켜 스크롤부터 완전히 독립되어 있다.
    • width와 height 값을 지정하지 않으면 absolute처럼 위치 하게 된다.
    • fixed는 부모 엘리먼트의 크기는 자식 엘리먼트의 크기를 포함 하지 않는다.

    28. CSS - flex1 : intro

    • flex는 주로 레이아웃을 할 때 사용한다.
    • 표를 이용한 table태그를 레이아웃을 잡았지만, 검색엔진 스크린 리더에에서 테이블인지 레이아웃인지 구분하기 어려웠다.
    • 테이블이 복잡하고 코드 양이 많기 때문에 변경하는데 어려움이 있다.
    • position, float를 통해서도 레이아웃을 잡았다.

    29. CSS - flex2 : basic

    • display:flex;를 설정하기 위해서는 부모 엘리먼트와 자식 엘리먼트가 있어야 한다.
    • flex-direction:row-reverse;를 설정하게 되면 기본값에서 반대로 정렬이 된다.
    • row(행방향), column(열방향)이다.
    • height 값에 따라 위치가 바뀌게 된다.

    30. CSS - flex3 : h fbasis&grow&shrink

    • flex-basis;는 기본인데 기본크기가 200px이다.
    • 플렉스(flex)의 방향에 해당되는 엘리먼트의 크기를 지정한다.
    • flex-grow는 숫자값을 입력하게 되면 백그라운드에 각각 엘리먼트들이 공평하게 영역을 갖게 된다.
    • 하나의 엘리먼트를 더 큰 영역을 원한다면 특정 엘리먼트의 grow 값을 원하는 만큼 지정한다.
    • flex-shrink는 basis의 반대 개념이다.

    31. CSS - flex4 : holy grail layout

    • 기본적으로 맨 위에 heaer 가운데에는 Nav, Main AD있고, 마지막에는 Footer 형식이다.
    • 그리고 화면이 작아짐에 따라서 메인의 크기가 작아지는 레이아웃의 형태를 말한다.
    • 부모 엘리먼트에서 display;flex;를 설정하면 가로 방향으로 보여지게 된다.
    • Nav, AD에게 flex-basic; 150px; 을 지정하게 되면 화면이 작아짐에 따라 크기도 작아지게 된다.
    • flex-shrink:0;을 같이 하게 되면 Main 부분만 크기가 줄어든다.

    32. CSS - flex5 : 기타 속성 들

    • align-items : 수직 관련된 정렬(flex-start; end; center; baseline; stretch;)
    • justify-items : 수평 관련된 정렬(flex-start; ent; center; space-betwen, aroud;)
    • align-content : 아이템을 그룹핑 해서 정렬(flex-start; end; center; stretch; space-betwen, aroud;)

    33. CSS - mediaquery1 - 기본

    • 다양한 미디어의 크기에 따라 웹페이지를 다르게 할 수 있는 기술을 말한다.(반응형 디자인의 핵심)
    • @media는 mdeiaquery가 시작된다는 의미이다.
    • @mdeia(max-width:500px){body}{bgc-red;}}는 500px 이하일때 배경색이 붉은 색으로 변한다.
    • min-width : 500px일 때는 500px 이상일 때 배경이 붉은 색으로 된다.

    34. CSS - float 1

    • 글의 본문에서 이지지를 삽입할 때 자연스럽게 보여 질 수 있도록 해준다.
    • 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 중요하다.
    • img 태그에다가 margin 값을 설정하여 가독성을 높에 해줄 수 있다.
    • 위에 있는 floating을 무시하고 싶으면 clear:both; 라고 입력하면 된다.

    35. CSS - Multi column

    • 주로 신문과 같이 화면의 크기가 큰 매체에서 사용되는 레이아웃 기법이다.
    • column-count: 2; 로 할 경우 글 내용이 2단으로 나뉜다.
    • text-align+justify; = 양쪽정렬
    • column-width:200px; 은 컬럼의 폭을 200px크기에 맞춰서 단을 나눠준다.
    • 웹브라우저의 크기를 줄이게 되면 단의 수도 줄어든다.
    • column-gap은 컬럼 사이의 간격을 조절 할 수 있다.
    • column-rule-style:solid;는 컬럼과 컬럼 사이의 줄이 나타난다.
    • olumn-span; all;은 컬럼에 구애 받지 않고 자신의 위치를 찾아가게 된다(제목 같은 경우에 사용)

    36. CSS - 배경

    • 특정 엘리먼트에 배경 이미지나, 컬러를 설정하는 것이다.
    • 가장 많이 사용하는 것은 background-color다.
    • background-image와 color를 동시에 사용 할 수 있다.
    • 이미지가 반복적으로 사용된다면 background-repeat:no-repeat;를 하면 된다.
    • 내용이 많을 때 background-attachment:fixed를 하게 된다면 백그라운드만 스크롤이 되지 않는다.
    • contain는 비율에 맞게 화면전체에 보여지고(여백이 있을 수 있음)cover는 이미지가 잘라지더라도 화면에 꽉 차보이게 나온다.

    37. CSS - filter

    38. CSS - blend1 : 소개

    • css코드를 통해 blend모드를 사용할 수 있다.

    39. CSS - blend2 : background-blend-mode

    • background-mode: color;를 사용하여 이미지와 색을 블랜드 모드로 줄 수 있다.
    • color, darken, difference 등 여러 가지 기능이 있어 사용자가 조절 하여 사용한다.

    40. CSS - blend3 : mix-blend-mode

    • mix-blend-mode는 컨텐트와 배경을 혼합한다.

    41. CSS - transform 1 : 소개

    • transform:scaleX(2);는 X축으로 2배가 커진다.
    • 여러개의 transform의 효과를 하나의 엘리먼트에 넣어 준다면 하나의 transform안에 입력해준다.
    • transform:scaleX(2) scaleY(2);하거나 scale(0.5,0.5); 이런식으로 작성한다.

    See the Pen Css3 Transform by Vineeth.TR (@vineethtr) on CodePen.

    42. CSS - transform 2

    43. CSS - svg1

    • svg는 벡터이미지를 저장하는 기능이다.
    • 일러스트레이터와는 다르게 국제표준화된 기술이다.
    • img태그를 이용하여 삽입하면 된다.

    44. CSS - svg2

    45. CSS - transition 1

    • transition를 통해 자연스럽게 효과를 적용시킬 수 있다.
    • transition-property:all;은 모든효과에 대해서 변화가 일어났을 때 전환이 된다.
    • transition-duration:1s;는 장면 변환이 1초 동안에 걸쳐서 일어난다.

    46. CSS - transition 2

    • transition-delay는 장면전환을 시작될때 약간의 시간차가 시작된다.
    • transition timming function 만들기
    • transition-timing-function:eaes;는 기본값이다(처음과 끝의 속도가 느리다.)

    47. CSS - link import

    • link, import : 중복의 제거를 위해 css파일을 외부로 빼는 기능이다.
    • 중복이 일어나면 유지보수가 어렵고 여러가지 문제가 생길 수 있다.
    • 방법 : <link>태그 혹은<style>태그 안에 @import로 css파일 삽입한다.

    48. CSS - 코드 경량화(minify)

    49. CSS - CSS 뛰어넘기, preprocesser1 - 소개

    50. CSS - CSS 뛰어넘기, preprocesser2 - 에디터의확장기능

    • compress는 압축이라는 뜻으로 다른 말로는 미니파이(minify)를 실행하라는 뜻이다.

    51. CSS - CSS 뛰어넘기, preprocesser3 - 명령어로컴파일하기

    • 에러가 나올 때 sudo를 앞에 적어서 다시 실행 하면 된다.
    • -w를 붙이면 watch의 약자이다.
    • pp.styl라는 파일을 컴퓨터가 감시하고 있다가 그 파일이 수정되면 pp.css파일로 자동을 컴파일 한다라는 뜻이다.

    52. CSS - CSS 뛰어넘기, preprocesser4 - style의 문법

    • CSS에서는 ; , } 를 꼭 사용해야 하지만 stylus에서는 생략이 가능하다.

    53. CSS - Fontello 1 : 소개

    • 벡터 방식의 이미지를 웹사이트에 쉽게 안전하게 제공하는 사이트이다.
    • fontello.com

    54. CSS - Fontello 2 : 사용법

    • 코드앞에 &# 를 붙이면 아이콘 모양이 나온다.
    • <link rel="stylesheet" href="css/fontello.css" >
    • body에다가 font-family: "fontello";를 적어야지 영향을 받아 적용이 된다.

    55. CSS - Fontello3 : 원리

    • css는 꾸며주기도 하지만, 정보도 변환시켜주기도 한다.

    56. CSS - Fontello4 : 폰트만들기

    • import를 사용해 config.jsn을 파일을 열면 이전에 사용했던 폰트들이 보여 진다.



    JavaScript(https://opentutorials.org/course/48)

    1. JavaScript - 오리엔테이션

    • 적은 코드로 더 강력한 효과를 얻을 수 있는 수단을 제공하는 각종 라이브러리를 사용하기 때문에 자바스립만으로는 웹브라우저를 만들지 않는다.
    • 호스트 환경들을 제어하기 위한 수단으로 자바스크립트가 필요하다.

    2. JavaScript - JavaScript란?

    • html은 정보 css는 정보를 꾸며주는 역활 JavaScript은 프로그래밍적으로 html, 웹브라우저를 제어 해준다.
    • onclik="JavaScript 언어 입력"를 이용하여 버튼을 눌렀을 때 프로그래밍적으로 웹페이지를 제어(변경)할 수 있다.

    3. JavaScript - 실습방법

    • 효율성을 위해서 크롬을 이용해서하는게 좋다.
    • 크롬 개발자 도구 https://opentutorials.org/course/580
    • alert('내용');은 경고창을 띄어줄 수 있고 console에서도 JavaScript 코드를 작성할 수 있고, 바로 확인 가능하다.

    4. JavaScript - HTML에서 JavaScript를 로드 (1/4) : inline 방식

    • onclick은 html의 속성으로 사용자가 버튼을 클릭했을 때 속성의 값인 자바스크립트가 실행된다.
    • 제어를 담당하는 자바스크립트와 정보를 담당하는 html 같이 있게 되면 유지보수 하기가 쉽지 않기 때문에 html 자바스크립은 따로 분류 해주는게 좋다.

    5. JavaScript - HTML에서 JavaScript를 로드 (2/4) : script 태그 이용

    • script 코드안에 자바스크립트가 들어간다.

    6. JavaScript - HTML에서 JavaScript를 로드 (3/4) : 외부 파일 로드

    • 자바스크립을 따로 분리하여 유지보수가 쉽다.
    • 캐시를 통해 브라우저가 요청하지 않으므로, 네트워크의 지원현상을 줄일 수 있다.
    • 자바스크립트를 따로 분리 하면 캐시의 영향을 받아 html파일을 경량화 시킬 수 있다.

    7. JavaScript - HTML에서 JavaScript를 로드 (4/4) : onload

    • onload는 웹페이지에 있는 코드가 실행이 될 때 자바스크립 코드가 실행이 된다.

    8. JavaScript - ObjectModel (1/2) : 객체화란무엇인가?

    • 웹브라우저의 구성요소들은 하나하나가 객체화되어 있다.
    • document.getElementsByTagName('img')는 img태그의 변수값을 알 수 있다.
    • imags[0]은 img태그 중에서 첫 번째를 의미 한다.

    9. JavaScript - ObjectModel (2/2) : JavaScript Core, BOM, DOM

    • window는 전역객체, window, frame이라고도 한다.
    • document object model은 웹 페이지의 문서 body나 img태그를 제어한다.
    • bom 객체는 현재 웹 브라우저의 url를 표시해준다.

    10. JavaScript - Browser Object Model

    • 웹브라우저를 제어 하기 위해 객체들을 의미하는 것이다.

    11. JavaScript - 전역객체 window

    • console창에서 window 하고 엔터를 하면 window에 대한 객체들을 볼 수 있다.
    • Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다.
    • alert('hello world');를 입력하면 경고창이 나온다. 앞에 window를 작성해도 되고, 안해도 된다.
    • navigator는 window객체에 속해 있다

    13. JavaScript - 사용자와 커뮤니케이션 (2/3) : confirm

    • confirm은 경고창과는 다르게 확인과 취소 버튼이 나온다.

    14. JavaScript - 사용자와 커뮤니케이션 (3/3) : prompt

    • 사용자가 입력한 값을 받아서 자바스크립트가 얻어낼 수 있는 기능이다.

    15.JavaScript - Location 객체 (1/2) : 문서의 주소정보를 알아내기

    • Location 객체는 현재 브라우저의 창에 문서의 url를 알려주는 객체이다.
    • console.log(Location.toString(),location.href);를 consol창에 입력하면 두 개의 url이 나온다.
    • console.log(Location)만 입력하면 location에 대한 다양한 정보가 나온다.
    • pathname은 웹 서버가 가지고 있는 구체적 정보를 말한다.
    • #bookmark는 문서의 특정 위치에 지정하게 되면 북마크를 할 수 있다.

    16. JavaScript - Location 객체 (2/2) : 문서의 주소를 변경하기

    • location.href = 'http://egoing.net';를 입력하게 되면 주소로 이동하게 된다.
    • 사용자를 다른 url로 이동시킬 경우 사용하게 된다.

    17. JavaScript - Navigator 객체 (1/3) : 크로스브라우징이란?

    • Navigator 객체는 자바스크립트를 이용해서 현재 자바스크립트의버전을 알 수 있다.
    • w3c 국제 표준 기구에서 정의한 스펙에 따라서 브러우저를 만든다.
    • 최초의 상용화된 웹페이지는 netscape이다.

    18. JavaScript - Navigator 객체 (2/3) : Navigator 객체

    • console.dir(navigator.appName);을 입력하면 Netscape라는 정보가 나온다.
    • 크롬,파이어폭스 같은경우는 netcape가 나오고, 익스플로 같은 경우는 나오지 않는다.
    • console.dir(navigator.appVerision);는 브라우저의 정보가 나온다.

    19. JavaScript - Navigator 객체 (3/3) : 기능 테스트

    • Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다.
    • !를 입력하게 되면 부정문이 된다.

    20.JavaScript - 창 제어 (1/3) : window open

    • window.open 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다.
    • _blank를 사용하면 새 창을 의미한다.
    • _self는 스크립트가 실행되는 창이다.