목록Design/Markup (24)

로메오의 블로그

[CSS] iMessage 스타일 채팅창

다음 뉴스입니다. 앞으로 부처님오신날과 성탄절에도 대체공휴일이 적용됩니다. 인사혁신처는 이 같은 내용을 담은 '관공서의 공휴일에 관한 규정' 개정안을 내일(16일) 입법예고한다고 오늘(15일) 밝혔습니다. 해당 개정안은 부처님오신날, 기독탄신일에 대해 대체 공휴일을 적용하는 내용이 포함돼있습니다. 이번 대체공휴일 확대 대상일은 국민의 휴식권 보장과 중소기업 부담, 경제에 미치는 영향 등을 종합적으로 고려해 관계부처 간 협의를 통해 정했다고 혁신처는 설명했습니다. 김승호 처장은 "이번 개정안이 국민에게 적정한 휴식권을 보장하고 소비진작, 지역경제 등 경기 활성화에 도움이 될 수 있기를 바란다"고 밝혔습니다. MBC 뉴스입니다. .chat-room { border: 1px solid #000; backgro..
Design/Markup 2023. 3. 15. 14:42
[SCSS] Global SCSS 적용 import scss

VUE.JS 목록 css/_variables.scss $color: rgb(178, 133, 133); VUE.JS 목록
Design/Markup 2022. 10. 7. 10:44
[Figma] Auto Layout & component

Figma 목록 Text를 선택해서 Add auto layout 합니다. 간격을 수정할수 있습니다. 서체와 크기를 변경하고 마지막 줄을 선택해서 command + d로 3개 복제합니다. 3개를 선택하고 새로운 auto layout으로 묶어주고, 가로로 배열합니다. 내용을 수정하고 간격도 변경해봅니다. auto layout 정렬을 수정하고 사이즈를 줄였는데 text가 줄바꿈 되지 않습니다. 각 텍스트를 선택해서 가로가 hug content로 되어 있는것을 fill container로 변경합니다. 제목과 이름을 선택해서 auto layout으로 합치고 간격을 수정합니다. frame1의 높이를 hug content로 설정하고 fill 과 padding을 설정합니다. 이미지와 frame1을 선택하고 add au..
Design/Markup 2022. 9. 30. 14:37
[Figma] Community 에서 Asset 복제

Figma 목록 Asset 가져오기 Community에서 ios 15 UI kit을 검색합니다. Drafts에 복제되었습니다. Drafts에서 확인 가능합니다. Assets에서 status를 검색해서 마우스 오른쪽 클릭 Shift + 2를 눌러 ios Status 디자인 을 확인 할 수 있습니다. Layer 탭에서 선택된 컴포넌트를 확인 할 수 있습니다. 해당 프레임을 선택하고 Command + c 복사합니다. 내 파일에서 Page를 추가하고 붙여넣기 합니다. 같은 방법으로 몇가지 프레임을 더 가져옵니다. 프레임을 모두 선택해서 Tidy up을 선택합니다. 프레임간 간격을 동일하게 맞추고, 커서를 이용해 수정할 수 있습니다. 원형 표시자로 순서 변경도 가능합니다. 캔버스 사이즈 설정 프레임에서 Desig..
Design/Markup 2022. 9. 30. 09:56
[SCSS] SCSS 문법

VUE.JS 목록 주석 scss // 한줄 주석 : css 파일에 표시되지 않음 /* 여러줄 주석 : css 파일에 표시됨 */ css @charset "UTF-8"; /* 여러줄 주석 *//*# sourceMappingURL=index.css.map */ 변수 scss $gray: #333; $white: #fff; body {background: $gray; color: $white} css body { background: #333; color: #fff; }/*# sourceMappingURL=index.css.map */ 선택자 html 테스트 1 테스트 2 테스트 3 scss .list { color: red; ul { border: 1px solid red; > li { background:..
Design/Markup 2022. 9. 15. 14:38
[SCSS] SCSS 환경 설정

VUE.JS 목록 VScode 확장 프로그램 설치 ... "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/", "savePathReplacementPairs": null } ] ... 프로젝트 폴더 구조 폴더 구조를 위와 같이 만듭니다. hello 자동 컴파일 $color: red; body { background: $color } index.scss 파일에 코딩하고 저장하면 Live Scss Compliler가 css 파일을 생성해줍니다. VUE.JS 목록
Design/Markup 2022. 9. 15. 11:02
[Figma] 색상 스타일 지정, 관리

Figma 목록 색상 스타일 지정 색상을 지정합니다. +를 눌릅니다. 색상 이름을 지정합니다. 생성된 색상 스타일이 표시됩니다. Design에 color style이 표시되니 수정할 수 있습니다. 색상 스타일 적용 객체를 선택합니다. 지정된 칼라를 선택할 수 있습니다. 색상 스타일 분리 링크 해제 아이콘을 선택합니다. 색상을 수정 할 수 있습니다. Figma 목록
Design/Markup 2022. 6. 13. 09:32
Figma에서 Autolayout으로 버튼 만들기

Figma 목록 사각형과 Text를 이용해서 위와같은 버튼을 만듭니다. 사각형과 Text를 선택하고 Add auto layout 합니다. Frame1이 #모양에서 위와같은 아이콘으로 변경됩니다. 적당히 이름을 변경해 줍니다. Text를 수정하면 자동으로 사각형 사이즈가 변경됩니다. Auto layout 패널에 좌측부터 세로 정렬 가로정렬 텍스트앞에 아이콘이 있다면 간격 조정 마지막에는 padding값을 직접 수정할 수 있습니다. Mixed에 값을 입력하면 같은 값으로 padding이 변경됩니다. Figma 목록
Design/Markup 2022. 5. 11. 15:07
Prev 1 2 3 Next