Etc.60 [Node.js] Node 간략 정리 런타임(Runtime)이란? 프로래밍 언어가 구동되는 환경. JavaScript는 Node 전에는 크롬 등과 같이 브라우저 내에서만 사용할 수 있는 한계 때문에 확장성이 좋지 못한 언어였다. Node는 브라우저 뿐만 아니라 서버, 머신러닝, 데스크탑 앱과 같은 여러 분야에서 JS가 활용 될 수 있도록 해줬다. 이벤트 루프(Event Loop) 이벤트 루프는 세 가지로 이루어져 있다. 호출 스택(call stack) 백그라운드(background) 태스크 큐(task queue) 순서 실행 순서대로 호출 스택에 쌓기 백그라운드 필요 작업은 백그라운드로 이동 백그라운드에서 작업이 완료되면 태스크 큐로 이동 호출 스택이 다 완료되면 이벤트 루프가 태스크 큐를 호출 스택으로 이동 논블록킹 I/O? 이전 작업이 .. 2022. 1. 11. [Python] string formatting 가벼운 마음으로 Python 복습하면서 문제 풀려고 하다가 크지도 않은 코 다칠 뻔했다..ㅎ # 입력: 3 # 출력: 3.00 inch => 7.62 cm inches = int(input()) print("{0:0.2f} inch => {1:0.2f} cm".format(inches, inches*2.54)) 이 간단한 코드를 f-string을 이용해서 해보려고 했는데 inches = int(input()) cm = inches*2.54 print(f"{ inches : .2f} inch => { cm: .2f} cm") print(f"{ inches : .2f} inch => { inches*2.54: .2f} cm") # 3.00 inch => 7.62 cm # 3.00 inch => 7.62 cm.. 2022. 1. 3. [CSS] position 정리 https://developer.mozilla.org/ko/docs/Web/CSS/position position의 목적은 HTML 문서 상의 요소를 배치하기 위해서이다. position은 기본적으로 normal flow, float와 함께 층위적으로 구분된다. 정확히 이렇게 층위가 구분되는 것은 아니겠지만 물리적으로 이해를 간단히 하기에 도움이 된다. http://blog.wystan.net/2009/01/12/relationships-between-position-float-display 오래된 글이지만 정리가 잘되어 있어서 리다이렉트 float, normal flow와 함께 비교하며 이해하면 더 이해가 잘된다. position에는 5가지 값이 있다. static / relative / absolut.. 2021. 11. 21. [CSS] inline vs inline-block https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303 참고한 블로그 깔끔하게 정리되어 있어 한번쯤 보면 좋을 것 같다. 자꾸 헷갈리고 검색하게 돼서 한번 다시 정리 inline - width. height 적용 불가 - 상하 margin, padding(maring-top, margin-bottom, padding-top, padding-bottom) 적용 불가 - line-height 적용 불가 inline-block inline에서 안되던 것들이 적용 된다. - width. height 적용 가능 - 상하 margin, padding(maring-top, margin-bottom, pa.. 2021. 11. 21. [CSS] 선택자 정리 + 헷갈리는 선택자 https://devahj.tistory.com/83 과거 정리해둔 것이 있지만 허접한 정리는 잊고 다시 싹 다 정리해본다. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors 어김 없이 MDN부터 출발 기본 선택자(Basic selectors) 더보기 전체 선택자(*) -> 문서 내 모든 요소(element) 선택 * { } 타입 선택자(elementname) -> 해당 이름을 가진 모든 요소를 선택 /* for example*/ div { } -> 모든 div 요소들이 선택된다. 클래스 선택자(.classname) -> class 특성(attribute)이 classname인 모든 요소를 선택 인 태그가 있을 때 .one으로 해당 요소 선택 가능.. 2021. 11. 18. [CSS] margin collapsing 구글에 'margin collapsing'만 쳐도 이런 제목의 MDN 문서가 보인다 ㅋㅋ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Mastering margin collapsing - CSS: Cascading Style Sheets | MDN The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a beha.. 2021. 11. 11. [CSS] flex flex를 정리해보자 우선 flex를 실습 해보기에 너무 좋은 사이트 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 사실 그냥 위에 1분 코딩 튜토리얼을 거치고 개구리까지 배치시키면 flex는 끝이라 볼 수 있다. https://developer.mozil.. 2021. 11. 6. [CSS] inline element https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/ CSS Inline vs Inline-Block vs Block | SamanthaMing.com Alright, let’s switch up Pictorials to cover CSS. Beside JavaScript algorithm questions, as a Front End Developer, you might also get asked CSS related quest... www.samanthaming.com 참고한 사이트 inline element는 height, width를 가지지 못한다. CSS로 width, height를 넣어줘도 동작하지 않는다. 단,.. 2021. 11. 5. [HTML] Markup Layout 너무 좋은 자료다. Markup 작성 기준을 이걸 토대로 연습하고 익히면 바쁜 와중에도 div를 남발하지 않고 할 수 있지 않을까?? 2021. 11. 4. [CSS] 선택자 우선순위 계산 거시적으로 따지면 tag와 가까울 수록 우선 순위가 높다고 할 수 있다. 인라인CSS(태그 요소로 들어 있는 style) > 내부CSS(head 영역에 들어가 있는 style) > 외부CSS(html 밖에 있는 css 파일) 이런 원리에 의해서 style 태그 내부 가장 아래에 있는 선택자가 우선시 되는 것이다. 그런데 이렇게 단순하게 해소가 된다면 얼마나 좋겠냐만 실제로 그렇지 않다. https://developer.mozilla.org/ko/docs/Web/CSS/Specificity https://specifishity.com/ -> MDN에서 redirect해준 쉽게 이해할 수 있는 예제 가중치 점수 계산을 통해 우선순위가 정해진다. 가중치 점수 !important >>>> style attrib.. 2021. 11. 3. 이전 1 2 3 4 ··· 6 다음
