① 기본 (17) 썸네일형 리스트형 Shadow DOM 스타일링하는 방법 내부에서 shadow dom 스타일링 하기 1. :host 선택자 See the Pen Untitled by leepro (@leepro225) on CodePen. 2. :host() 를 이용해 테마 적용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 외부에서 shadow dom 스타일링 하기 1. var 이용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 스타일 상속 및 재설정하기 resetStyleInheritance (deprecated) false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지합니다. true -shadow boundary에서 상속가능한 속성들을 initial.. Shadow Dom 이란? 웹 컴포넌트란 ? - Custom Element - Shadow Dom - HTML Template - ES Module 이 네 가지 명세를 결합해서 - 스타일링이 캡슐화되고 (Shadow Dom), - 스탬프를 찍어내듯이 여러번 사용 가능한 (HTML Template), - 고유한 태그를 (Custom Element) - 일관된 방식으로 통합하여 사용 (ES module) 가능하도록 만든 컴포넌트이다. 웹 컴포넌트에 있어서 Shadow DOM의 역할은? DOM API는 자체적으로 캡슐화를 지원하지 않는다. 캡슐화를 지원하지 않는 다는 것은 스타일 정보가 다른 트리 요소로 누출될 수 있기 때문에 커스텀 요소를 개발하기 어렵고, id가 다른 요소간에 겹칠 수 있음을 의미한다. 캡슐화는 웹 컴포넌트의 중요한.. Web Component Introduction 번역 - 웹 컴포넌트 소개 이 글은 WEBCOMPONENTS.ORG 의 글을 번역한 것입니다. 소개 웹 컴포넌트란? 웹 컴포넌트는 웹 페이지에 재사용 가능하고 캡슐화된 새로운 커스텀 컴포넌트를 만들 수 있게 도와주는 웹 플랫폼 API 세트 입니다. 웹 컴포넌트 기반으로 만들어진 커스텀 컴포넌트와 위젯은 최신 브라우저에서 작동하고, HTML과 함께 작동하는 모든 Javascript 라이브러리 또는 프레임워크와 함께 사용할 수 있습니다. 웹 컴포넌트는 기존의 웹 표준을 기반으로 합니다. 웹 컴포넌트를 지원하는 기능이 현재 HTML과 DOM 스펙에 추가되고 있어, 웹 개발자는 쉽게 HTML을 커스텀 동작과 캡슐화된 디자인을 가진 새로운 엘레멘트로 확장할 수 있습니다. 명세 웹 컴포넌트는 네 개의 주요 명세에 기반합니다. Custom E.. block 레벨과 inline block 레벨 요소 HTML태그는 블록 레벨 요소와 인라인 요소로 나눌 수 있습니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 따라서, 블록 레벨 요소는 언제나 새로운 줄에서 시작합니다. 블록 레벨 요소는 또다른 블록 레벨 요소와 인라인 요소를 포함할 수 있습니다. 이러한 특징으로 인해 인라인 요소보다 큰 구조를 생성할 수 있습니다. block 레벨 요소 리스트 문서의 분할 페이지나 구역의 푸터 입력 폼 ~ 제목 페이지나 구역의 헤더 구분선 목록 탐색 링크를 포함 문단 웹페이지의 구역 표 연락처 정보 단락 콘텐츠 부가 콘텐츠 긴 인용구 상세 정보 위젯 대화상자 inline 요소 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소가 필요한 공간만 차지합니다. 인라인 요소는 새로운.. 실무에서 자주 쓰는 필수 CSS 선택자 정리 실무에서 자주 쓰는 필수 CSS 선택자 아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다. 종류 선택자 예시 설명 클래스선택자 .class .intro intro를 클래스로 가진 모든 요소 Both .class1.class2 .name1.name2 name1과 name2를 둘 다 가진 모든 요소 자손선택자 .class1 .class2 .name1 .name2 name1의 자식 중 name2를 클래스로 가진 모든 요소 아이디선택자 #id #firstname firstname을 아이디로 가진 모든 요소 전체선택자 * * 모든 요소를 선택, 렌더링 성능 저하 가능 요소선택자 element p 모든 p 요소 And element,element div, p 모든 div 요소와 모든 p 요소 자손선택자 elem.. 시멘틱 마크업이란? 시멘틱 마크업이란? 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은 렌더 트리에 .. [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 생성 프로세스를 중지하고 자바스크립트 엔진에 제어권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라.. 이전 1 2 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
