본문 바로가기

728x90

Study

(31)
[Node.js] npm이란? npm이란? 노드 패키지 매니저(Node Package Manager)의 약자이며, node의 기본 패키지 관리자이다. 길게 풀자면 Node.js를 통해 만들어진 패키지(모듈)을 설치하고 관리해주는 프로그램을 의미한다. npm은 따로 프로그램을 설치하는 방식이 아닌, node를 설치할 때 기본적으로 같이 설치된다. 사용 할 때는 termin이나 cmd 등에서 실행해야 한다. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScrip..
[HTML/CSS] CSS 말풍선 만들기 | border 말풍선 만드는 방법 오늘은 css를 통해 말풍선을 만들어 보려고한다. 먼저 css로 만들기 전에 말풍선 만드는 방법에 대해 이해를 해야한다. border를 통해 화살표를 만들어줘야하는데 border의 top, bottom, left, right에 컬러를 따로 줄 경우 위의 그림처럼 각 부분이 삼각형으로 나타난다. 보통 border값을 줄 때에는 border: 10px solid red; 이렇게 주는데 여기서 10px가 위의 그림의 width값이라고 생각하면된다. 그리고 width값은 위의 그림처럼 되기 위해서는 left의 width값만 고려할 대상이 아니라 top과 bottom의 width값도 고려해야 할 대상이다. 삼각형의 형태도 정삼각형, 이등변삼각형 등 형태가 다른 만큼 width 값이 달라질 수 있다. 위의 이미지에..
[HTML/CSS] tab menu, 탭메뉴 만들기 이번엔 웹에서 자주 사용되는 방식의 tab메뉴를 위주로 한번 만들어보려고 한다. TabMenu의 메뉴 단부분과 메뉴 클릭 시 보여지는 창 부분을 잡아주어야 한다. 에 를 이용해 메뉴의 단 부분의 틀을 만들고, 에는 id값으로 "intTab", 안에 태그를 이용하였다. 의 title값에 "tab1","tab2","tab3"으로 각자 값을 주었다. ​ tab메뉴의 창부분은 를 이용해 각각 잡아주었으며, id값은 단부분 메뉴 에 사용했던 title값과 동일하게 주었다. HTML 전체 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 test1 test2 test3 test4 test5 test6 CSS li {list-style-type: none;} a {color: #333; text-decoration: none;} ..
[HTML/CSS] dl dt dd 태그에 대해서 알아보자 오늘은 dl, dt, dd 태그에 대해 알아보려고 한다. 태그는 용어의 정의와 내용 설명이 필요할 때 사용하는 태그이며, 태그는 제목을 의미한다. 또한, 태그는 내용 설명을 의미한다. 제목과 내용 파트는 서로 개수가 대응되지 않아도 괜찮지만, 제목과 내용이 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다. 정의 정의에 대한 설명값 태그 정의가 필요한 목차를 설정할 때 사용하며, 태그 단독으로는 사용될 수 없다. , 태그가 태그와 결합되서 사용하듯, 태그는 태그와 태그와 결합해서 사용한다. 태그 용어의 정의를 나타내며, 인라인 요소이기 때문에 , , 등과 같은 블록 요소가 내부로 삽입될 수 없다. 태그 태그의 용어를 설명하며, 기본적으로 들여쓰기가 설정되있다. 태그는 블록 요소이기 때문에 , , , , ,..
[HTML/CSS] css 말줄임 처리하기 | 텍스트 text-overflow: ellipsis 웹페이지를 작성할 때에는 말줄임(...)을 사용하는 경우가 많은 편이다. 말줄임표를 사용하게 되면, 더 많은 문장을 간결하게 생략하여 표시할 수 있다. 말줄임 표시하는 방법 Lorem ipsum dolor sit amet -> Lorem ipsum dolor sit... 위와 같이 표현 하기 위해서는 HTML과 CSS를 통해 처리해주어야한다. See the Pen Untitled by HAJIN LEE (@rajin444) on CodePen. 말줄임을 2줄로 하기위해서는 -webkit-line-clamp를 이용하여 문자길이의 지정된 라인이 넘어가면 말줄임 처리를 해준다. .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; displ..
[HTML/CSS] 클릭 시 페이지 내에 특정 위치로 스크롤 이동 페이지 내에서 특정 위치로 이동하는 방법에 대해 알아보자! 이번에는 자연스럽게 스크롤을 이용하여 이동하는 방법을 알아보려고한다. 참고로 이 방식은 스크롤이 될 내용이 길 수록 눈으로 효과를 확인 할 수 있다. HTML scroll1 scroll2 scroll3 scroll4 scroll1 scroll2 scroll3 scroll4 CSS /* reset */ ul, ol, li {list-style-type: none;} a {color: #333; text-decoration: none;} .list {position: relative; height: 50px; margin-bottom: 50px;} .list li {display: inline-block; padding: 0 20px;} .listb..
[JS]멀티선택 | 다중선택 Multi Select Box 멀티선택에 대해 작업을 하다가 꽤나 괜찮은 소스를 발견하여 간단히 정리해보려한다. Jquery Multi Select Box 플러그인이라 하는데 아래 링크로 접속해서 세팅을 먼저해야한다. https://hemantnegi.github.io/jquery.sumoselect/ Jquery.sumoselect by Hemant Negi jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that pro..
[HTML/CSS]웹 페이지 노출을 높여주는 검색 엔진 최적화 SEO(Search Engine Optinization) 검색 엔진 최적화는 웹페이지의 노출도를 높여 트래픽의 양과 질을 높이는 최적화 작업이다. ​ - 보안 프로토콜(HTTPS) - Robots.txt(로봇 배제 표준파일) & Sitemap.xml(사이트맵) - 타이틀 & 메타디스크립션 태그(검색엔진최적화 메타태그 + 기타 태그) : 길이제한 영문기준 320자, 한글 160자 - 소셜 검색엔진최적화 메타태그 ​ 이렇게 4가지 방법으로 웹 페이지의 노출도를 높여주는 최적화 작업의 예시를 아래서 보자 ​ 이미지 태그 및 최적화: 이미지 alt태그, 웹사이트에 사용되는 이미지에는 가능하면 alt태그를 설정해두는 것이 좋다. ​ 모바일 최적화​ 모바일 친화적인 웹사이트를 구축하여 운영하며, 구글에서 제공하는 ..