Front/Html

[HTML ]3-5. 제목, 문단, 연락처, 인용문 목록 작성하기

제목(heading 요소) - http://html5.clearboth.org/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements h1, h2, h3, h4, h5, h6 의 여섯단계가 있고 h1요소가 가장 상위제목을 나타낸다. 일반브라우저에서는 중요도가 높은 제목일수록 크게 표시되는데 스타일시트를 활용해 임의의 크기를 지정할 수 있다. 블록 레벨 요소이며 인라인요소를 포함할 수 있지만 블록 레벨 요소를 포함할 수 없다. 예제) 문서의 가장 상위의 제목 표시 -------------------------------------------------------------------------------------------- 문단(p 요소) - http://html5.cl..

2020. 11. 5. 09:46

Front/Html

[HTML] 3-4. 루비 주석과 시간의 표현

1. 루비 주석 루비는 이전부터 있었음. 익스플로러에서 쓰던 표현요소. html5에서 정식. 모든 브라우저에서 쓸 수 있다. 파이어폭스에서는 잘 표현이 안되다가 요즘은 잘 됨. 1) 루비 : 글자 위에 장식, 설명을 쓸 때. 일본어 영어의 경우는 보이는 글자 위에 설명을 붙여서 표현 가능. 한자 표시시에 좋음. - rt로만 표현이 안될 경우에는 rp를 써서 괄호 표시를 해준다. 가화만사성 (家和萬事成) - 한글자씩 맞춰주는 것도 좋다. : 일본어의 경우는 한자 하나에 글자 2개씩 설명이 올라가는 경우도 있기 때문에 글자 하나씩 표현하는 바업도 알아준다. - 점을 찍어서 글자 한글자씩 강조를 한다. 2. 시간 표현 마우스를 올려도 나오지는않으나, 컴퓨터가 명확하게 확인할 수 있다. 2019년 4월 9일이라..

2020. 11. 5. 09:46

Front/Html

[HTML] 3-3. 단의어 정의와 약어, 작품의 제목 표현.

3. 단의어 정의와 약어, 작품의 제목 표현. - 인라인 태그 : 줄이 바뀜, p태그, div - 블록태그 : 줄이 안 바뀜 span 태그 (내부 내용을 디자인 하기 위한 거) dfn : 정의 definition abbr : 축약 abbreviation cite : 작품 제목 (html5에서 추가) -------------------------------------------------------- http://html5.clearboth.org/text-level-semantics.html#the-dfn-element http://html5.clearboth.org/text-level-semantics.html#the-abbr-element http://html5.clearboth.org/text-le..

2020. 11. 5. 09:45

Front/Html

[HTML] 3-2. 구문강조, 하이라이팅

2. 구문 강조, 하이라이팅 strong, em, mark 대부분의 코드 목록. https://www.w3.org/TR/2011/WD-html5-20110405/ 원어 : https://www.w3.org/TR/html5/ 번역된 사이트 (안뜸) http://html5.clearboth.org/text-level-semantics.html#the-em-element http://html5.clearboth.org/text-level-semantics.html#the-strong-element http://html5.clearboth.org/text-level-semantics.html#the-mark-element --------------------------------------------------..

2020. 11. 5. 09:45

Front/Html

[HTML] 3-1. 문자 실체잠조와 수치 문자 참조 적용

1. html 태그와는 구분하도록 html5에서는 완벽히 지키진 않는다. 문자참조 문자 참조가 만들어진 이유이자 문자 참조를 사용하는 목적은, 입력이 어려운 문자를 표현하거나 마크업 언어를 제어하는 문자를 일반 문자로 표현하기 위함이다. HTML에서의 예를 들면 '오른쪽 화살표'(→) 기호는 컴퓨터 자판에 없어서 입력이 힘들지만 → 처럼 풀어서 쓸 수 있으며, '여는 꺾쇠표'(

2020. 11. 5. 09:44

Front/Html

[HTML] 2-4. html템플릿 작성하기

* 모바일 관련 : opera mobile classic emulator 이제 사용 불가 구버젼은 다운 받을 수 있긴 함. http://www.download82.com/download/windows/opera-mobile/ opera browser 사용 https://dev.opera.com/articles/opera-mobile-emulator/ 모바일에서 보이는 화면을 보여줌. 최신 버젼이 업데이트 되지는 않음. custom으로 launch하면 나옴. => 그냥 크롬 쓰면 됨. - viewport 해상도를 확대해서 볼 수 있도록 함. - description은 꼭 써주기 - html5는 최대한 div를 사용할 것. 영역을 묶어줌. (가장 기본적) https://nuli.navercorp.com/sh..

2020. 11. 5. 09:42

Front/Html

[HTML] 2-3. 메타요소 알아보기

보통은 웹페이지를 다 만들고 정리한다. (다 쓸 필요는 없으나 description을 쓰면 좋다.) 타이틀 위에 쓴다. 필수는 문자 코드셋을 지정 - keyword : 이 웹페이지에서 배포되는 내용들을 쉼표를 통해서 나여ㅛㄹ - description : 문서에 대한 설명글. 더 중요. 구글은 keyword는 검색에 잘 쓰지 않고 description은 아직은 사용 중. 구글에서 이해할 수 있는 메타태그) https://support.google.com/webmasters/answer/79812?hl=ko description에는 문장 뿐만 아니라 구체적인 단어를 많이 쓰기도 함. 검색에 쓰기 좋은 것을 조함. - author : 저자 (사람 이름, 팀 이름) - generator : 프레임워크를 쓰는 것..

2020. 11. 5. 09:41

Node.js

1. node.js 설치

This time, I have to build a small and light web site for checking employee's daily work. Before building a java project, I thought the java project is quite big and need much effort than what I need. So I considered node.js and angular system but I forgot a lot of ways in details. Also my knowledge on Angular is lagged behind. I studied 3years ago and the version i..

2020. 11. 5. 09:39

Network

01. What is the Network?

From The Beginning In the past, we don't need to know about 'Network'. Just having a basic knowledge in computer makes you a genius at home or in school. But the world changed, We are being swept away by the storm named 'Network'. So this is the story of how easily I learned about 'Network'. This is the beginning. What is the 'Network'? 'Network' means connecting things together. But it does not..

2020. 11. 5. 09:30

Mobile

[ Flutter, Firebase ] 0. 플러터 소개

사용자용 정산앱을 제공하기 위해 최근 자료들을 보다가, 네이티브앱으로 안드로이드와 ios를 모두 제공하기엔 시간이 부족하겠다는 판단에 이르렀습니다. 런칭 날짜를 확인해보다가 제작년에 소개받은 React native 리액트 네이티브와 Flutter 플러터를 한번 사용해보기로 결정했습니다. 1. 플러터를 선택한 이유 1) 어느 네이티브 앱 요소의 필요성. 처음에는 사용 중인 React로 웹을 구성후 웹뷰를 사용하려 했으나, 구글과 애플 스토어 상에서 반려당할 가능성이 높다는 이야기를 들었습니다. 그렇다면 어느정도 네이티브 앱의 요소가 있어야하는데 네이티브 앱 언어를 공부하기엔 시작이 부족해보였습니다. 2) 리액트 네이티브는? 운영자 사이트는 React로 구성되어있기 때문에 처음에는 리액트 네이티브를 사용하는..

2020. 6. 24. 21:57

ETC

[error] npm install bcrypt --save 설치 오류

C:\workspace\react\boiler-plate>npm install bcrypt --save > bcrypt@4.0.1 install C:\workspace\react\boiler-plate\node_modules\bcrypt > node-pre-gyp install --fallback-to-build node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Pre-built binaries not installable for bcrypt@4.0.1 and node@12.16.3 (node-v72 ABI, unknown) (falling back to source compile with node-gyp) n..

2020. 6. 15. 21:59

Front/Html

[HTML] 2-2.문서형 선언, 언어 지정, 문자 코드 셋 지정하기

open folder 하거나 폴더를 드래그한다. 1. 문서형 선언 1) 역사 html4 -> xhtml1.0 -> xhtml1.1(Strict만)-> xhtml 2.0 -> html5로 발전 xhtml은 1.0 아주 엄격하게 짜여짐 1.1은 더 엄격 2.0이 문제. 너무 생소해서 일반 유저들이 좋아하지 않아서. 개발이 중단됨 이후 html5로 형식도 좀 유연하게 하위 브라우저에서 호환되도록 만들게 됨. - Strict : 엄격한 형식. 권장되는 것만. 잘못쓰면 렌더링 되지 않음. xhtml1.1에서는 transitional과 frameset이 폐지되고 strict만 사용 가능. - Transitional : iframe 등은 strict에서 인정치 않음. strict에서 인정되지 않는 요소를 사용할 경우..

2020. 6. 15. 21:54

Front/Html

[HTML] 2-1. html 태그 작성 문법, 메타태그

1. p+tab

2020. 6. 15. 21:53

Front/Html

[HTML] 1. 웹표준

* 참고사이트 https://ko.wikipedia.org/wiki/%EC%9B%B9_%ED%91%9C%EC%A4%80 http://w3c.org http://w3schools.com http://nuli.navercorp.com/ ( UI 라이브러리 | Coding Convention ) http://naradesign.net ( 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드 ) ( https://naradesign.github.io/article/ ) * 웹접근성 참고 http://wah.or.kr ( 웹 콘텐츠 제작기법 ) * 마크업 테스트 http://validator.w3.org/ * CSS테스트 http://jigsaw.w3.org/css-validator/ * html5, c..

2020. 6. 15. 21:47

NoSql

[MongoDB] 1. 몽고디비 설치

1. https://www.mongodb.com/ 먼저 회원가입을 진행합니다. 2. 클러스트 생성 서울은 무료가 아니라서 가장 가까운 싱가폴로 선택합니다. 생성되는데 5-10분 정도 걸린다. 3. 몽고디비 유저 생성 1) connect를 누른다. 2) IP는 기본으로 눌러서 생성 3) 아이디, 패스워드 적기 4) connect your application 선택 5) connection String Only 카피해둘 것 4. 몽구스 틀 설치 npm install mongoose --save

2020. 6. 15. 21:44

ETC

[API] The MovieDB API

https://www.themoviedb.org/ The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입해서 API_KEY를 받으면 됩니다. 사용할 키는 v3키 https://api.themoviedb.org/3/movie은 공통이므로 이 부분은 상수로 빼놓으면 좋다. 이미지도 https://image.tmdb.org/t/p는 상수로 빼놓고 뒷부분은 /original/adsfajsdafd.svg 로 '이미지 사이즈/이름'으로 구성됩니다.

2020. 6. 15. 21:41

Front/Html

[HTML] 0. 더미 텍스트, 이미지 만들기

퍼블리싱을 하다보면 아직 텍스트와 이미지가 정해지지 않은 상태에서 준비를 해놓아야할 때가 많은데요. 이때 더미 텍스트와 이미지를 사용하면 편리합니다. 1. 더미 텍스트 lorem + tab lorem + 숫자 + tab (단어 갯수) 를 입력하면 됩니다. 위와 같은 더미 텍스트가 생성된 것을 볼 수 있습니다. lorem + 숫자 + tab을 누르면 원하는 글자 수만 생성이 가능합니다. 2. 더미 이미지 img + tab 을 입력하면 됩니다. 이미지 주소에는 http://placehold.it/800x600을 적어주시면 됩니다. 오른쪽 버튼을 눌러서 브라우저에서 열어보시면 해당화면이 실행됩니다. 3. https://placeholder.com 해당 사이트에서 쓰는 방법이 자세하게 나옵니다. 색상은 헥사코드..

2020. 6. 15. 21:38

ETC

[Settings] Sublime text(서브라임 텍스트) 설치

업무에 필요한 프론트엔드 개발에 필요한 내용을 정리해놓은 포스팅입니다. 프론트엔드는 HTML5, CSS3는 기본이기 때문에, 업무속도 향상을 위해 소스들을 미리 적어두면 좋습니다. 프론트엔드에만 집중해 필요한 개발환경을 셋팅해보겠습니다. 코딩을 할 때는 크롬이나 파이어폭스에서 확인하는 것이 좋습니다. 물론, 나중에는 익스플로러와 엣지에서도 잘 작동하는지 확인해야합니다. 1. PC용 브라우저 저는 작업표시줄에 브라우저(크롬, 웨일, 엣지, 익스플로러, 오페라, 파이어폭스)들을 여러개 두고 시간 날 때마다 체크하며 화면이 잘 나오는 지 확인하고 있습니다. 2. 모바일 - 크롬 (ios, 안드로이드 공통) - 사파리 (아이폰) / 삼성 인터넷 브라우저 (안드로이드) 를 주로 체크하고 있습..

2020. 6. 15. 21:38

ETC

[error] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는

> client@0.1.0 start C:\workspace\react\boiler-plate\client > react-scripts start 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional ..

2020. 6. 15. 21:28

ETC

[Git] 설치 / commit / ssh 푸시

Git은 분산 버젼 관리 시스템입니다. 설치 여부는 cmd에서 해당 명령어로 확인할 수 있습니다. git --version 1. 설치 git-scm.com/ Git git-scm.com 2. git 저장소 만들기 git은 Working Directory, Staging area, git repository, git remote area로 구성되어있습니다. Working Directory 아무것도 안한 상태 Staging area git local repository git remote area git add. git status git commit -m "First init" - .gitIgonore 파일을 만들어서 node_modules등을 제외한다. (npm install로 언제든 받을 수 있음) -..

2020. 6. 15. 21:17