Bleeding edge

오늘 공부한 내용 $ @mixin + @content @include @use @forward @for @each @if interpolate $, @mixin, @include(같은 파일 내에서 변수 선언 및 프레임 읽고 쓰기) 어느 개념이든, 적절하게 묶일 수 있는 개념은 묶어서 공부를 해야하기에, 같이 사용해야하는 상호 관계 혹은 유사성에 대해서 이야기하면 다음과 같습니다 @mixin으로 프레임(frame)을 만들어두면, @include를 이용하여 사용할 습니다. @mixin mobile { @media (max-width:(768px - 1)) { @content; } } .className { @include mobile{ } } 처음 코드를 보는 사람은 768px라고 써두면 의미를 알 수 없기..

작성일, 참여하고 있는 스쿨 과정명 : 이 글은, 2002년 7월 27일 작성되었으며, 제로베이스 커넥to프론트엔드를 들으면서, 후기, 느낀점 등을 남긴 글입니다. 대략적인 본인 소개 및 현재 상태: 저는 스타트업에서 UI/UX 와 기획을 맡아서 일을 하다가 개발쪽에 관심을 가지게 되어, 스타트업을 그만두고, 커넥to프론트엔드 스쿨을 수강중인 취업 준비생입니다. 커넥to에 참여하게 된 계기와 현재까지 느낀점 : 1. 강의 커넥to 수업은 7월 11일 부터 시작하였으며, 현재는 HTML/CSS강의를 듣고 있습니다. 저 같은 경우 2년 이상 HTML이나 CSS를 터치해봤고, 다른사람이 만든 다른 사이트를 많이 봐서, 웹에 대해서 조금은 알고 있는 줄 알고 있었는데, 강의를 들으면서 웹에 대해서 겉만 알고 있..

보호되어 있는 글입니다.

https://school.programmers.co.kr/learn/courses/30/lessons/12914# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 피보나치 수열이라는 것을 알기까지 시간이 좀 걸렸다. 1부터 5까지의 케이스를 나타내보겠다. 1(1) 11(2) 2(2) 111(2+1) 12(1+2) 21(2+1) 1111(3+1) 112(2+2) 121(3+1) 211(3+1) 22(2+2) 11111(4+1) 1112(3+1) 1121(4+1) 1211(4+1) 2111(4+1) 122(3+2) 212(3+2) 221(4+1) 괄호를 쳐서..

★★★★★ 1. 브라우저 렌더링 원리 1-1.홈페이지가 사용자에게 보이는 순서에 대해 설명해 주세요 더보기 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버) 서버에서 HTML 파일을 클라이언트로 보낸다. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식) 중간에 css를 로드한다. link 혹시 style 태그를 만나면 DOM 생성을 중지한다. CSS를 파싱하고 CSSOM을 생성한다. 이렇게 만들어진 DOM과CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다. 이후 JS엔진을 실행하고 JS코드를 파싱한다. 2. 호이스팅에 대해서..

img에 width와 height를 주면 속도가 빨라진다 일종의 will change가 될 수 잇다 [class*="tittle"] .appMain [class^="__summary"]{ }캐럿기호 등등 어떻게 다른지 체크할 것 .iframeWrapper { position: relative; padding-top: 56%; width: 100%; height: 0; } .iframeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } padding은 width를 기준으로 계산된다 .iframeRatio-4-3{ padding-top:75% } .iframeRatio-16-9{ padding-top:56.25 }

https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에 봤을 때 이 문제가 레벨1이라니! 하고 놀랬었던 문제.. 지금 와서 보니 레벨 1 맞는거 같은게 엄청 크게 고민해야할 것보다는 구현 로직이 상당히 심플하다. 단지 2차원을 쓰는게 익숙하지 않아서 어렵다고 생각이 들었던거 같다. 문제 로직은 상당히 심플하다 board와 move 두가지가 주어진다. 1. board에 있는걸 move에 있는 순서대로 한개씩 0으로 만들어준다. 2. 0으로 만든 ..

https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 별로 좋아하는 방식은 아니지만 하드코딩을 이용하여 풀었다. 1-1 x, y에 알맞게 번호와 문자를 배치한다. 1-2 return할 result를 만든다. 1-3 left와 right의 초기값을 만든다 const list = { 1:[0,0], 2:[0,1], 3:[0,2], 4:[1,0], 5:[1,1], 6:[1,2], 7:[2,0], 8:[2,1], 9:[2,2], "*":[3,0], 0:[3..

https://school.programmers.co.kr/learn/courses/30/lessons/92334# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제에서 캐치해야할 것은 두가지다 1. 신고를 하면 신고 받은 횟수를 저장한다.(중복은 안된다 신고는 한번 유효하다) 2. 유저가 신고를 받은 횟수가, k번을 넘어가면 정지가 되고, 신고했을 때 신고한 사람들은 신고해서 정지를 먹인 사람들의 숫자를 만드는 리스트를 만든다 1. 일상생활로 예시를 들면, 내가 신고해서 정지를 먹은 자동차가 몇개일까..? 알아보는 문제같다고 생각이 들었다. 문제 풀이..