개발자의 주머니 (52) 썸네일형 리스트형 시멘틱 마크업이란? 시멘틱 마크업이란? Semantic은 '의미론'이라는 뜻입니다. HTML을 시멘틱하게 마크업한다는 것은 의미론적인 요소를 사용하여 문서를 만든다는 것을 의미합니다. 단순히 div와 span으로 이루어진 문서가 아니라 의미를 가진 태그 요소를 사용해 문서를 만드는 것입니다. 의미론적인 요소들 의미 : 재사용할 수 있는 구획을 나타냄. 예제 : 게시판, 블로그 글, 뉴스 기사 등 의미 : 문서의 주요 내용과 간접적으로 연관된 부분 예제 : 사이드바, 광고 의미 : '열림'상태일 때만 내부 정보를 보여주는 위젯 예제 : summary와 함께 쓰임 의미 : 디테일 요소의 제목 역할 예제 : details 자식으로 상세요소가 열리기 위한 제목 역할 의미 : 부모 요소 콘텐츠의 설명, 범례 예제 : 이미지에 대한 .. display:none 과 visibility:hidden 의 차이 display:none 과 visibility:hidden 의 차이 이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있습니다. 하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 큰 차이점이 있습니다. visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그립니다. 요소를 완전히 없애고 싶은지, 혹은 차지하는 공간은 놔둔채로 사용자 눈에서만 보이지 않고 싶은지에 따라 구분에서 사용하면 됩니다. 아래 예시에서, 버튼을 눌러 차이점을 확인해 보세요. See the Pen xxgJqNJ by leepro (@leepro225) on CodePen. 정리 display:none 은 렌더 트리에서 없어짐 vs visibility:hidden은 렌더 트리에 .. 성공하는 사람들 성공하는 사람들은 자기의 부족함을 인정하고, 부딪히고 깨지면서 성장해 나간다. 반대의 사람들은 상처받지 않기 위해 도전하지 않고, 가능성이 있는 상태에 머문다. 영원히. git 명령어 정리 터미널에 깃이 설치되어 있는 지 확인 git --version window terminer 추천 : cmder git 관련 모든 환경설정 파일 리스트 git config --list 이 파일을 열어 편집하고 싶다면 git config --global -e 현재 경로에 있는 파일을 에디터로 열기 // 에디터에서 설정해줘야함. code . git config --global core.eitor "code" // 문서를 닫을 때까지 터미널 비활성화 git config --global core.eitor "code --wait" 사용자 설정하기 git config --global user.name "haha" git config --global user.email "hoho@gmail.com" git confi.. 알고리즘 필수 개념과 메서드 (프로그래머스 레벨 1) 해시 알고리즘(Hash Algorithm) 해시는 Key-value 쌍으로 데이터를 저장하는 자료구조입니다. key-value를 이용해 어떤 것과 다른 것 사이의 관계를 모형화할 수 있고, 중복을 막을 수 있습니다. 평균적인 경우 해시 테이블은 모든 항목에 대해 O(1)시간(상수 시간)이 걸립니다. 이는 해시 테이블의 크기에 상관없이 항상 똑같은 시간이 걸린다는 의미로, 해시 테이블에서 무언가를 찾을 때 굉장히 빠릅니다. 알고리즘 테스트에서는 해시를 이용하면 더 효율적으로 해결할 수 있는 문제들을 제시합니다. // Object.keys() 오브젝트의 key를 배열로 가져오기 const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object... 프론트엔드 개발자 테스트 과제형 주요 포인트 - HTML, CSS 기본적인 사용 ex) 미디어쿼리, 시멘틱 태그의 사용, 기능 작동 UI(클릭 시 사라진다 같은) - UI 기능 구현 ex) 로딩 시, 실패 시 UI lazy load, 무한 스크롤, 슬라이더, 자동 롤링 배너, 팝업, 각종 이벤트 - 구조화, 모듈화 ex) ES6 module 형태로 프로젝트 구조화, - api ex) 라이브러리를 사용하지 않고 비동기로 백엔드에 데이터를 요청하고, 요청에 대한 처리 [JS] JSON.stringify() 와 JSON.parse() 값이나 객체를 JSON 문자열로 변환하는 JSON.stringify() JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환하는 ES6 문법입니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다. 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다. 열거 불가능한 속성들은 무시된다 console.log(JSON.stringify({ x: 5, y: 6 })); // expected output: "{"x":5,"y":6}" // undefined, 함수, 심볼(symbol)은.. [JS] for/while/switch문 break와 continue 차이 그리고 label for/while/switch문을 바로 빠져 나가는 break break 문은 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다. let i = 0; let text = ''; while (i < 6) { if (i === 3) { break; } text = text + i; } // expected output: '012' break 문은 프로그램이 label 달린 문에서 빠져나오게 하는 선택사항 label을 포함합니다. break 문은 참조되는 label 내에 중첩되어야 합니다. label 달린 문은 어떤 block 문이든 될 수 있습니다. 꼭, loop 문을 달 필요가 없습니다. outer_block: { inner_block: { conso.. 성능 최적화를 위해 고려해야 할 점(feat. 스크립트 태그의 위치는?) 사용하지 않는 CSS를 제거하고, 미디어쿼리를 사용해 CSS를 간단하게 유지하자. 브라우저는 CSSOM이 생성될 때까지 렌더링을 차단합니다. CSS가 없는 페이지는 상대적으로 사용성이 떨어지므로, DOM과 CSSOM이 모두 만들어질 때까지 렌더링을 차단하는 것입니다. 미디어 쿼리나 미디어 유형을 사용해 사용자가 필요한 CSS만 렌더링 되도록하면 성능을 향상시킬 수 있습니다. 불필요한 자바스크립트를 제거하고, 스크립트 태그를 바디를 닫는 태그 앞에 적자. 자바스크립트는 DOM과 CSSOM을 수정할 수 있습니다. 따라서 브라우저는 스크립트가 무엇을 수정할지 모르기 때문에 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라.. 웹브라우저 렌더링 원리 브라우저는 어떻게 렌더링할까? 웹사이트가 어떻게 우리 눈앞에 오는지는 지지난번 포스팅에서 살펴보았습니다. 이번에는 웹브라우저가 서버에서 받은 자원을 어떻게 렌더링해서 우리에게 보여주는지 살펴보겠습니다. 브라우저의 구성 요소 User Interface : 사용자의 눈에 보이고, 사용자가 브라우저를 컨트롤 할 수 있는 인터페이스. 예를 들면, 새로고침 버튼, 주소입력창, 뒤로가기 버튼 등이 있습니다. Browser engine : 사용자 인터페이스와 렌더링엔진 사이의 동작을 컨트롤합니다. 예를 들어, 사용자가 주소창에 URL을 입력하고 엔터를 누르면, 해당 요청을 Redering engine에 전달합니다. Rendering engine : 요청받은 내용을 Networking을 이용해 server에 요청하고,.. 이전 1 2 3 4 5 6 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
