본문 바로가기

전체 글225

[JavaScript] map Python에서의 map 함수처럼 type 변환을 쉽게 쉽게 해줄 수 있는 함수가 뭐가 있을까 궁금해서 JS map MDN 문서를 살펴봤다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScript | MDN The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. developer.mozilla.org 이 Map은 간단히.. 2021. 11. 7.
[PGS/Python] 가장 큰 수 https://programmers.co.kr/learn/courses/30/lessons/42746 문제 설명 해설 주어진 숫자(0 이상의 정수) list에 있는 숫자들을 이어붙여서 만들 수 있는 숫자들 중에서 가장 큰 수를 구해주면 된다. 해설 하려고 보니 생각보다 문제 자체는 이해가 쉬운 문제라서.. numbers return [6, 10, 12] "61210" [3, 30, 34, 5, 9] "9534330" 접근법을 생각해보자면 numbers의 element들을 전부 str화 시키고 각 element의 0번 index의 값끼리 비교하고 같으면 다음 것, 다음 것... 이렇게 비교해서 큰 놈부터 앞으로 가져오면 될 것 같다! def solution(numbers): sorted1= sorted(n.. 2021. 11. 6.
[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.
[멋사 FE 스쿨] 5일차 리뷰 morning qna FE 개발자의 가장 기본 소양? 바로 Layout 구현 능력!! 시작은 box모델부터 클론코딩으로 연습도 좋음. 우려되는 점? 획일화에 대한 염려 but 같은 기능이라도 다르게 구현해봤음을 강조하자! 한번 본건 본게 아니다 - 공신 강성태 -> 백문이 불여일타! 수업 box 모델 - float은 현업에서 안쓰지 않느냐? → 아직까지 쓰기는 한다. 네이버, 카카오 같이 많은 사용자를 접하는 회사는 다양한 지원을 해주니까 float 쓰긴한다. - 반드시 유지보수할 일이 있는 것 → 레거시 코드 레거시 코드란? https://ko.wikipedia.org/wiki/%EB%A0%88%EA%B1%B0%EC%8B%9C_%EC%8B%9C%EC%8A%A4%ED%85%9C 레거시 시스템 - 위키백과.. 2021. 11. 5.
[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.
[멋사 FE 스쿨] 4일차 리뷰 morning qna& review 1. zoom 입장 소리 제거 -> 검색하세욧 2. css 작성 순서? -> 뭔 내용이었드라.. 까먹음 3. 클래스 선택자 보강 -> 헷갈리기 쉬운 선택자 정리 예정 4. 우선순위 계산법 class 11개 vs id 1개+class 1개 → id 포함된게 우선순위 더 높다 / 상속까지 생각해야 된다🤮 css 책에서는 선택자 가중치 점수 계산법만 30페이지가 넘는단다..^^ - 재현(Wade)님 tip - 실무에서는 주로 클래스 선택자를 많이 사용. ID 선택자는 중복을 허용(1개의 id attribute에 1개의 value 밖에 오지 못한다.)하지 않으니 사용하기 힘들고, 요소 선택자는 모든 요소에 영향을 주기 때문에 조심스럽게 사용. 클래스 선택자는 중복을 허용하고 .. 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.
[CSS] 가상 클래스(Pseudo-class) vs 가상 요소(Pseudo-element) 헷갈리기 쉬운 선택자. 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. developer.mozilla.org htt.. 2021. 11. 3.
[멋사 FE 스쿨] 3일차 리뷰 211103 호준님(Licat) 수업 shadow DOM f12 - 개발자도구 - Preferense - Elements - shadow dom Shadow DOM을 볼 수 있다. https://wit.nts-corp.com/2019/03/27/5552 Shadow DOM은 무엇일까? | WIT블로그 지난 몇 년 동안 “Shadow DOM”과 “Virtual DOM”이라는 용어를 들어보셨을 겁니다. 이들은 DOM과 관련이 있지만 매우 다른 개념을 가리킵니다. 이 문서에서는 shadow DOM이 무엇인지, 그리고 기존의 DOM wit.nts-corp.com shadow dom에 관한 정보 글 DOM(Document Object Model) - DOM이란 HTML 문서의 구조화된 표현' - (VSCode)h.. 2021. 11. 3.

티스토리툴바