구차니의 잡동사니 모음

웹 퍼블리싱 관련 이것저것 보다 보니 보여서 검색

일단 semantic은 "의미적"이라는 뜻인데

기존의 <b>와 같이 bold로 굵게 하라는 행동 기반이 아닌

<strong>이라는 강하게 표현하고 표현 방식은 뒤로 맡기는 그런 류의 접근 방식으로 보인다.

가장 많이 보는 걸로는

<header>

<nav>

<section>

<footer> 등이 있다고 하면 간단하게 이해 될 듯

HTML구성 요소로서 어떠한 보여주는게 아닌

어떠한 문맥을 의도를 보여주는 meta 데이터로서의 tag 라고 하면 되려나?

[링크 : https://www.w3schools.com/html/html5_semantic_elements.asp]

[링크 : http://west849.tistory.com/4]

[링크 : http://coderap.tistory.com/499]

모든 것의 원흉은 이녀석이었나..

단순하게 div를 왼쪽부터 딱딱딱 원하는 순서로 쌓는용도로만 생각을 했는데

말그대로 float 하게 하는거라 내가 의도하는 것과는 전혀 다른 형태로 작동해서 멘붕중

정 안되면

style="clear:both;" 와

style="overflow:hidden;" 을 해주면 내가 쓰려는 용도로는 충분하네..

[링크 : http://naradesign.net/wp/2008/05/27/144/]

[링크 : http://blog.wystan.net/2008/09/11/css-overflow-clearing-float]

overflow:hidden은 float로 하면 구성요소에서 빠져나가

상위 div의 높이 계산이 갱신되지 않는데, overflow:hidden을 해주면 float로 된 div를 포함하여 높이를 계산한다.

node.js에서 소스 건드리면 빌드하고

자동으로 웹 브라우저 리프레시 하는데 그게 신기해서 검색

[링크 : https://www.npmjs.com/package/browser-refresh]

[링크 : http://2ality.com/2012/08/jsreload.html]

+ 2018.09.04

전에 한걸 보니 node.js가 아니라 angular 였고, 

순수 node.js에서는 서버 재시작이나 브라우저 갱신이 지원되지 않는다.

그래도 위의 browser-refresh가 더 인기가 좋은 듯

[링크 : https://www.npmjs.com/package/reload]

+ 2018.09.06

[링크 : https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2]

오홍.. 신기하네

[링크 : https://github.com/tudou527/marketch]

document.getElementById(id).onclick = function(){code}

[링크 : https://www.w3schools.com/js/js_htmldom_document.asp]

$(document).ready(function(){

    $("p").dblclick(function(){

        $(this).hide();

    });

});

[링크 : https://www.w3schools.com/Jquery/jquery_events.asp]

인라인 스타일이 우선

id로 지정된 것이 다음

태그로 지정된건 가장 나중

id랑 class랑 싸우면 어떻게 되려나?

[링크 : https://opentutorials.org/module/484/4149]

[링크 : https://www.w3schools.com/css/css_specificity.asp]

요건 class 여러개 사용시 우선순위 관련

!important가 우선시되고

css 파일상에 가장 마지막에 선언된 클래스가 우선권을 가진다고

[링크 : https://stackoverflow.com/questions/3066356/...defined]

[링크 : http://pyrois.tistory.com/5]

ajax

https://wayhome25.github.io/django/2017/06/25/django-ajax-like-button/

아니.. 앵귤러가 아니었다니.. 이게 무슨소리요 사장양반(?!)

django는 python을 이용한 녀석이라 파이썬과 버전을 맞추어야 한다.

python 2.7대가 고인물이라 이걸 쓰려면 django-1.11 LTS를 써야 하고

그 이상 버전은 python 3.x 대를 쓰면 해결될 듯

그리고 python - pip - djang 순으로 설치하면 끝

일단 귀찮으니(?) 파이썬 2.7 설치부터 주르륵 (윈도우 기준)

다운로드

[링크 : https://www.python.org/downloads/release/python-2715/]

환경변수 설정(윈도우 기준)

C:\Python27

C:\Python27\Scripts

pip 설치 스크립트

[링크 : https://bootstrap.pypa.io/get-pip.py]

pip 설치

장고 설치

장고 프로젝트 생성

장고 프로젝트 실행

[링크 : https://www.djangoproject.com/] - 일단은 웹 프레임워크라고 정의함

[링크 : https://docs.djangoproject.com/ko/2.0/intro/tutorial01/]

장고와 vscode 연동

python lint 어쩌구 받고

pylint 설치하고 하라는대로 설치

[링크 : http://ruddra.com/2017/08/19/vs-code-for-python-development/]

관리 정보 생성

[링크 : https://tutorial.djangogirls.org/ko/django_start_project/]

기본 설치 프로그램

vscode - ms 에서 만든 거

git - vscode에서 버전관리용으로 기본으로 쓰는거

nodejs - angular나 react 등의 녀석들 패키지 관리하는 녀석(혹은 메인 패키지)

[링크 : https://code.visualstudio.com/]

[링크 : https://git-scm.com/]

[링크 : https://nodejs.org]

일단은 난 윈도우라 아래의 순서로 실행

[링크 : https://code.visualstudio.com/docs/nodejs/angular-tutorial]

vscode 플러그 인은

HTML snipper (퍼블리셔 명 Mohamed Abusaid)

Debugger for Chrome(Microsoft)

[링크 : http://gomcine.tistory.com/entry/VS-Code-Extension-설치-및-유용한-Extension-소개]

신기한게 vscode에서 수정하면 ng serve 쪽에서 자동으로 렌더링 하고 웹페이지는 자동으로 refresh된다.

볼거 넘치네...

[링크 : http://sensibilityit.tistory.com/265]

[링크 : https://opentutorials.org/course/1375/6851]

[링크 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/]