영이로운 개발 생활 ⌯･˕･⌯ಣ

보호되어 있는 글입니다.

보호되어 있는 글입니다.

⭐ overflow: hidden - 지정한 넓이를 넘어가면 보이지 않게 처리 ⭐ text-overflow: ellipsis - 지정한 넓이를 넘어가면... 부호 표시 ⭐ white-space: nowrap - 줄바꿈 하지 않고 한 줄로 나오게 처리 ⭐ word-break: break-all - 어절이 유지되지 않고 끊어져서 줄바꿈 됨 🌈 말 줄임을 하려면 블록 요소여야 함 인라인 요소는 가로 넓이를 가질 수 없기 때문에 또한, 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap을 적용 ▶ 여러줄 일 때 텍스트 말 줄이기 - 위에 한 줄과 다르게 white-space 속성이 필요 없음 overflow, text-overflow 속성은 필요 overflow: hidden; text-o..

보호되어 있는 글입니다.

피그마 컴포넌트 설정하기 (컴포넌트! UI 구성요소를 반복적으로 편리하게 수정, 사용하기 위함) 프레임을 이용해 원하는 형식을 만든다. 컴포넌트를 만들 프레임을 선택 후 상단 Create component를 선택! 보라색으로 변하면서 컴포넌트(마스터)가 만들어진다. 마스터는 건들지 않고 복사하여 사용하고 전체적인 수정을 하려면 마스터에서 수정을 한다. 단, 인스턴스(복제 프레임)에서 수정을 하면 마스터에서 변경을 해도 수정이 되지 않는다! 복제한 프레임에서 마스터를 찾을 땐, 오른쪽 패널 창 버튼을 누르면 마스터로 이동하게 된다. 컴포넌트 해제하기 (전체적인 프레임을 수정하고자 할 때) 마스터가 아닌 인스턴스에서 ● ● ● 을 클릭 Detach instance를 클릭하면 컴포넌트가 해제되어 원래의 프레임..

이미지에 블러 넣기 블러 처리를 할 이미지를 준비한다. 준비한 이미지 위에 원하는 도형을 선택하여 올린다. 백그라운드 이미지에 블러를 넣으려면 블러를 넣을 레이아웃을 맨 아래로 보내준다. 모양 레이어를 선택하여 Effects 선택하여 Background blur 선택. 블러 값을 조정하고 Fill에서 색상값, 투명도를 조절하여 원하는 블러 효과를 넣는다. 원하는 수치를 입력하면! 백그라운드 이미지는 블러처리가 되고 텍스트들은 이미지 위에 보일 수 있게 된다.

피그마 오토레이아웃 단축키 오토레이아웃 만들기: Shift+A 오토레이아웃 해제: Alt+Shift+A

피그마 프레임 단축키 프레임으로 묶기: Ctrl+Alt+G 프레임을 만들 수 있다 프레임, 그룹 해제하기: Ctrl+Shift+G 해제할 수 있다. 그룹으로 묶기: Ctrl+G (디자인에서 잘 사용하지 않는다) *프레임: 하나의 '페이지 영역'을 생성(포토샵에서의 캔버스 크기와 같다)

자주 사용하는 코드 ദ്ദി･ᴗ･̥̥̥) ● div: 영역을 나눠주는 태그 ● p: 문단태그 ● img: scr이미지 주소를 가진다 ● input: 검색창 'type' 값에 따라 데이터 종류가 달라진다 ● button: 버튼을 만들어준다 ● a: 하이퍼링크 태그 margin: 요소 밖에 공간을 주는 것 padding: 요소 안에 공간을 주는 것 text 가로 방향 정렬: text-aling text 세로 방향 정렬: verticla-align