본문 바로가기
728x90

전체 글

 (37)
[Node.js] yarn이란? yarn이란? 페이스북에서 만든 자바스크립트 패키지 매니저로 npm과 같은 기능을 수행한다. npm의 단점으로 생각하는 속도(performance), 안정성(stability), 보안성(security)을 보완하기 위해 만들어진 매니저툴이다. 속도 다운받은 패키지 데이터를 캐시(cache)에 저장하여, 중복된 데이터를 제외한 저장된 파일을 활용한다. npm은 순차적으로 설치하는 것과 달리 여러 개 패키지를 병렬로 처리한다. 안정성/보안성 npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있는 편리한 기능이지만, 반대로 안정성을 위협할 수 있다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하여 버전 차이로..
[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 값이 달라질 수 있다. 위의 이미지에..
2022 정보처리기사 시험일정 응시자격 응시과목 이제 곧 2021년도가 지나가고 2022년도로 새해가 다가오면서 다시 돌아왔다... 정보처리기사... 벌써 공고가 떳다!!! 올해는 꼭 따기위해 열심히 공부해서 취득해낼꺼다! 정보처리기사 일정 응시자격(응시조건) - 다음 각 호의 어느 하나에 해당하는 사람 1) 관련학과의 대학졸업자 등 또는 그 졸업 예정자 2) 산업기사 등급 이상의 자격을 취득한 후 응시하려는 종목이 속하는 동일 및 유사 직무분야에서 1년 이상 실무에 종사한 사람 3) 기능사 자격을 취득한 후 응시하려는 종목이 속하는 동일 및 유사 직무분야에서 3년 이상 실무에 종사한 사람 4) 응시하려는 종목이 속하는 동일 및 유사 직무분야의 다른 종목의 기사 등급 이상의 자격증을 취득한 사람 5) 2/3년제 전문대학 관련학과 졸업자 등으로서 졸업 ..
[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..

티스토리툴바