devOhzl

CSS 스타일 상속 부모(조상)요소에 적용된 스타일이 자식(하위) 요소에 상속되어 나타난다. 📌 상속되는 CSS 속성들 모두 글자/문자 관련 속성들이지만 모든 글자/문자 속성이 상속되는 것은 아님 font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color: 글자 색상 text-align : 정렬 등등 ⭐ 주의 자주 사용하는 글자/문자 관련 속성들은 대부분 상속이 되므로 어떤 요소에 글자와 관련된 CSS 속성을 지정할 때는 해당 요소의 자식(후손) 요소에 적용될 수 있다는 것을 기억하기 📌 강제 상속 (inherit) : 상속이 되지 않는 CSS 내용도 강제적으롯 상속시킬 수 있는..

환경설정이 된 vue 프로젝트를 사용하다가 스터디를 하기 위해 첫 환경설정을 하는데, 생각보다 처음부터 많은 에러가 나왔다.. 하나씩 차근차근 하기로 하고 scss 설정부터 하기로 해보았지만 역시 에러가 났다. ⚡ 에러1 : Can't resolve 'sass-loader' in 'D:\FrontEnd\Project\layout' scss를 사용하기 위해서는 'sass' , 'sass-loader'를 기본적으로 설치해야한다. ⚡ 에러2 : Cannot find module 'sass' 'sass', 'sass-loader'까지 설치했는데도 에러가 떴다.추가로 'node-sass' 패키지도 설치해준다. 정리하자면 ! 1️⃣ npm 설치 npm install sass npm install sass-loade..

복합 선택자 📌 일치 선택자 - ABCXYZ : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 📌 자식 선택자 - ABC > XYZ : 선택자 ABC의 자식 요소 XYZ 선택 📌 하위(후손) 선택자 - ABC XYZ : 선택자 ABC의 하위 요소 XYZ 선택 * 하위(후손) : 자식을 포함한 모든 요소 📌 인접 형제 선택자 - ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 * 일반 형제 선택자보다 더 자주 사용함 ! 📌 일반 형제 선택자 - ABC ~ XYZ : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 가상 클래스 선택자 📌ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택 📌ABC:active : 선택자 ABC 요소에 마우스를 클릭..

반응형 Card 컴포넌트 제작 1️⃣ 이미지 불러오기 ( Shift + Ctrl + K ) 이미지를 가져오고 Shift 를 누른 채로 사이즈를 조정한다. 2️⃣ 텍스트 & Auto Layout (Shift + A) 텍스트("INTERVIEW")를 입력하고 Alt를 눌러 복제해준 뒤 Shift + A 단축키를 사용해서 Auto Layout 한다. 아래 텍스트를 선택하고 Ctrl + D 단축키를 사용하여 텍스트를 복제한다. * 텍스트를 복사해 올 경우 Ctrl +Shift+V 를 이용하면 스타일 무시하고 텍스트만 복사해올 수 있다. - Cation 대문자로 설정하기 위해 Type settings > Uppercase - Title font-weight : Regular / line-height: 130% /..

Variant 버튼의 모든 상태를 싱글 컴포넌트로 만들 경우, 컴포넌트의 개수가 많아지는 단점이 생긴다. 이 때, 버튼 컴포넌트의 모든 상태를 베리에이션 하여 하나의 컴포넌트로 만들 수 있다. 1️⃣ 컴포넌트 복제 Md , Sm 사이즈 전부 Alt+드래그를 통해 복제 후, Ctrl + D 를 통해 한번 더 복제한다. 2️⃣ 인스턴스의 컴포넌트 해제 인스턴스 Detech 단축키 Alt+Ctrl+B 를 클릭하여 인스턴스들을 컴포넌트와 연결을 해제한다. 3️⃣ Multiple components 아이콘, 이모지를 숨겨준다. 새로 생성된 버튼들만 선택 후, Create multiple components 를 선택하여 다수의 UI 에셋들을 한번에 컴포넌트들로 변환한다. 4️⃣ 컴포넌트 합치기 ( Combine a..

📌 컴포넌트 & 인스턴스 컴포넌트 : 두 번 이상 재사용될 UI Asset 인스턴스 : 재사용이 가능한 컴포넌트를 복제한 UI Asset Local 컴포넌트, 인스턴스 : 전 게시물에서 만들어놓은 버튼 Asset 스타일을 추후 재사용 하기 위한 Local 컴포넌트 생성하기 ⭐ 컴포넌트를 수정하면 인스턴스도 함께 수정된다. 1️⃣ 컴포넌트 생성 컴포넌트 아이콘을 클릭하여 컴포넌트화 시키고, 컴포넌트를 잡고 Alt + 드래그를 하여 밑으로 복제한다. 2️⃣ 메인 컴포넌트 & 인스턴스 Layer 명 앞에 표시되는 아이콘으로 인스턴스 또는 컴포넌트 인지 구분 가능하다. 메인 컴포넌트으 경우, Asset 패널에서 Local Components 영역에 컴포넌트가 표시된다. ⚡ 미리 만들어놓은 아이콘 컴포넌트들으 이..

Auto Layout을 이용하여 버튼 컴포넌트 생성하기 1️⃣ 텍스트 생성 후 Auto Layout 설정 텍스트 'BUTTON' 입력 후 Shift + A 👉 Auto Layout 생성 Ctrl + R 👉 이름 변경 2️⃣ Padding 설정 Auto Layout 의 padding 값을 이용하여 넓이,높이를 설정한다. * 텍스트를 선택후 Alt 를 누르면 padding 값을 확인할 수 있다 배경색상과 텍스트 색상도 변경한다. 3️⃣ 텍스트 복사 텍스트 선택 후 Ctrl + D 👉 동일한 간격의 텍스트가 생성됨 4️⃣ Auto Layout 속성 텍스트 길이 변경 시에도 버튼으 크기가 자동으로 조절된다. 📌 vertical Direction > 수직 정렬 📌 horizontal Direction > 수평 정..

스타일 정의 (버튼 생성하기) 1️⃣ 텍스트 생성 - Inter / Semi Bold / 18px / 행간 100% / 자간 -0.5px / Text-align: Center, Middle / Resize : Auto width - Type > Details > Letter Case > Title Case 2️⃣ 텍스트 복사 option(alt) + Shift 누르고 아래 방향으로 드래그하여 텍스트 복사 후 Cmd + D 를 누르면 같은 방향으로 객체가 복사된다. 두번째 텍스트는 12px로 변경한다. 3️⃣ 버튼 스타일 생성 * "/"로 구분하여 스타일을 Group화 가능 4️⃣ Local styles 사용 (Text) 만들어진 Local style을 연결해서 사용할 수 있다. Figma Plugin 활..

HTML 태그의 부모와 자식 관계 부모 요소 : 나를 감싸는 바로 윗 단계 요소 상위(조상) 요소 : 나를 감싸고 있는 모든 요소 자식 요소 : 내가 감싸고 있는 바로 아래 요소 하위(후손) 요소 : 내가 감싸고 있는 모든 요소 글자와 상자 : 요소가 화면에 출력되는 특성 📌 인라인(Inline) 요소 : 글자를 만들기 위한 요소 - 태그 - 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 - 요소가 수평으로 쌓임 - 포함한 콘텐츠 크기만큼 자동으로 줄어듬 - 가로,세로 너비를 지정할 수 없다 - 요소 외부 여백을 지정하는 margin , 내부 여백을 지정하는 padding 속성은 좌우만 사용 가능. 상하는 적용 X 📌블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소 - 본질..

태그 📌 : 문서의 HTML 버전을 지정 (HTML5) : 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도 📌 HTML : 문서의 전체 범위 : HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할 📌 HEAD : 문서의 정보를 나타내는 범위 : 웹 브라우저가 해석해야 할 웹 페이지의 제목/설명/파일 위치/CSS 같은, 웹 페이지의 보이지 않는 정보를 작성하는 범위 📌 BODY : 문서의 구조를 나타내는 범위 : 사용자 화면을 통해 보여지는 로고/헤더/푸터/내비게이션 등 웹페이지의 보여주는 구조를 작성하는 범위 📌 LINK : 외부 문서를 가져와 연결할 때 사용 (대부분 CSS) rel (Relationship) : 가져올 문서와의 관계 href :..