본문 바로가기

반응형

전체 글

(401)
[CSS] rem, em 의 차이 rem "html 태그의 기본 font-size : 14px 에 비례하여 증가하는 단위" rem 은 HTML 태그 중에서 태그 자체에 적용된 font-size를 기준으로 결정된다. 현재 2023년을 기준으로 font-size는 기본 14px 가 암묵적으로 적용되어 있는데, 이 때 rem을 2rem 으로 설정한다면, 실질적으로 적용되는 px은 14px 에서 2를 곱한 28px 가 된다. 예를 들어, width : 5rem 으로 설정한다면,14px 에서 5를 곱한 70px 가 적용된다. 즉, width : 70px 가 되는 것이다. html { font-size : 14px } div { width: 5rem; -> 실질적으로 5 * 14px = 70px 적용 } em "em 단위를 적용한 해당 태그에 설정..
[HTML] <details> 및 <summary> 태그 "드롭다운이 가능한 HTML 태그" 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 굳이 힘들게 드롭다운을 구현하지 않아도 간단한 것은 이 태그들을 이용하면 간단한 드롭다운 메뉴는 구현할 수 있을 듯 하다. 다만, 이 태그 내에 숨겨진 태그 요소들은 비디오 판독기를 필요로 하는 사람에게 친화적인 요소가 아니라고 하므로 사용에 주의가 필요해 보인다. -- 자세한 사용법은 아래 링크 참고 하자-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary : The Disclosure Summ..
[js] 브라우저 렌더링 과정(2) - HTML 파싱 및 DOM 생성 한 번 공부한 내용을 글로 주저리 적어본다. 브라우저가 주소창을 통해 서버에 데이터를 요청할 때 흔히 기본 도메인을 포함한 주소로 GET 요청을 보내면, 아무런 Path 나 query 문자열을 입력하지 않아도 서버는 브라우저에게 파일을 담아서 응답한다. 그 이유는 기본적으로 루트 경로로서 브라우저의 메인이 되는 HTML 파일이 기본값으로 설정되어 있기 때문이다. 보통 기본이 되는 HTML 파일을 index.html 로 정의하는데, 주소창 경로의 끝 부분에 index.html 이 보여야 하지만, 암시적으로 보이지 않도록 디폴트되어 있다. 따라서 브라우저는 도메인 주소로 GET 요청을 보내면 main이 되는 HTML 파일(index.html)을 받아 렌더링한다. 하지만, 응답을 받은 HTML 파일에는 CSS..
[js] 브라우저의 렌더링 과정(1) - 주소창 사용자가 브라우저에 그려지는 화면을 완전히 보기까지의 과정을 브라우저 렌더링 과정이라 한다. 다시 말해, 브라우저가 서버에 화면에 그리기 위한 데이터들을 요청하고, 서버가 요청에 대한 응답으로 데이터를 보내주면, 브라우저는 받은 데이터로 화면을 그리는 일련의 과정을 의미한다. 이 때 브라우저가 서버에 요청하기 위한 창이 존재하는 데 그것이 주소창이다. 즉, 우리는 알게 모르게 서버에 요청을 하고 서버는 우리에게 필요로 하는 정보를 보내주고 있었 던 것이다. 위 예시에는 다 나와있지 않지만, 주소창은 https: 로 흔히 알고 있는 Protocol, www.duklook.com 형태의 Host(도메인) :60 형태의 Port /manage/newpost 와 같이 /로 구분되는 Path ?type=post&..
[vscode] 만약에 '로드중..' 이라는 문구가 나타나며 무한 로드가 뜬다면? 간혹 vscode 를 사용하다보면, 특정 익스텐션이나 확장자가 어떠한 작업을 수행할 때 무한 로드가 뜨는 문제가 생길 수 있다. (본인만 그런 것일지도) 이로 인해 자동완성 기능이나 타입스크립트의 확장 기능 등을 사용하지 못하는 문제로 불편함이 생길 수 있는데, 이 때, 제일 기본적인 해결책은 프로그램을 다시 껐다가 키는 것이겠지만, 이 보다 더 간단한 방법이 존재한다. 당연한 방법이지만 실행중인 확장 호스트를 모두 재실행하면 된다. 방법은 윈도우 환경에서 [Ctrl] + [Shift] + [p] 를 조합(맥은 p 대신 ~)해서 누른 후 다음을 찾아서 선택하면, 몇 초 뒤 로드중인 호스트가 재실행되면서 깔끔하게 해결된다.
[javascript] reduce() Array.prototype.reduce(누적값, 배열의 요소, 기타옵션) 배열의 각 요소에 차례대로 접근하여 하나의 결과값을 반환하는 메서드 배열요소의 자리는 콜백함수가 1회 호출 시 마다 처리할 현재값을 나타낸다. 누적값은 실질적으로 배열요소인 현재값을 처리할 시 산출되는 결과이다. 초깃값이 지정되지 않으면, 누적값에는 배열의 0번째 요소가 들어가고, 배열요소(value)는 배열의 1번째 요소부터 차례대로 들어간다. 누적값은 초깃값이 지정되면, 초깃값이 누적값을 대체하며, 배열요소는 기존의 1번째 요소가 아닌 0번째 요소부터 차례대로 대입된다. 초깃값을 5로 지정했으므로 누적값의 자리에는 초깃값이 들어간 것을 확인할 수 있다. 누적값에 별도의 값을 더하면, 그 값이 누적값에 더해지며, 콜백함수가 호출..
[javascript] find() , findIndex(); Array.prototype.find(callback) callback 함수 내에서 구현된 조건을 만족하는 최초의 요소를 반환, 중복되는 요소가 있으면 뒤의 요소를 무시한다. 만일 조건과 일치하는 요소가 없으면 undefined 를 반환한다. const users =[ {username:"고기좋아"}, {username:"술좋아"}, {username:"야채싫어"}, {username:"야채싫어"} ]; const find = users.find(user => user.username ==="야채싫어"); console.log(find); // {username:"야채싫어"} Array.prototype.findIndex(callback) find 메서드와 마찬가지로 콜백함수 내 조건을 만족하는 요소를 ..
[javascript] concat , indexOf, includes Array.prototype.concat(추가할 배열) 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 // 기존 배열 const currentNum = [1,2,3]; //추가할 배열 const addNum =[4,5,6]; //새로운 배열 const newNumbers = currentNum.concat(addNum); // ↓ ↓ ↓ console.log(newNumbers); // [ 1, 2, 3, 4, 5, 6 ] Array.prototype.indexOf( 찾을요소) Array 에서 찾을요소가 존재하면 그 요소가 위치한 인덱스를 반환하고, 없으면 -1 을 반환한다. /** 배열에서 타겟이 존재하는 경우 */ // 배열 ↓ // 0 const numbers = [1,2,3,4..

반응형