묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
브레드크럼 인스턴스에서 Underline 넣는 방법
브레드크럼 파트에서 수강 중 질문드립니다!브레드크럼 인스턴스의 Label text property가 수정되면 Style을 Underline으로 변경이 안됩니다. Underline을 넣고 싶으면 브레드크럼 컴포넌트 셋트에서 적용해야 인스턴스에도 적용되는데, 이렇게 하는게 맞는지 궁금합니다.우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A2 작업하는데 공지사항 내용이 아래로 내려가지 않습니다.
이렇게 가로로 배치되어집니다. 뭐가 문제인걸까요 ㅠㅠ + 애초에 이렇게 공지사항 내용이 적힌 a 메뉴를 하나만 더 적어도 이렇게 가려집니다... ㅠㅠ심지어 저 상황은 지금 갤러리 css까지 다 지웠는데도 이럽니다.... ㅠㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <title>A2</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">재단소개</a> <div class="sub-menu"> <a href="#">설립취지</a> <a href="#">연혁</a> <a href="#">찾아오시는 길</a> </div> </li> <li> <a href="#">후원하기</a> <div class="sub-menu"> <a href="#">국내후원</a> <a href="#">국외후원</a> <a href="#">맞춤후원</a> </div> </li> <li> <a href="#">자료실</a> <div class="sub-menu"> <a href="#">서식자료실</a> <a href="#">사진자료실</a> <a href="#">후원양식</a> </div> </li> <li> <a href="#">스토리</a> <div class="sub-menu"> <a href="#">웹진</a> <a href="#">보고서</a> <a href="#">나의 후원</a> </div> </li> </ul> <div class="sub-back"> <!-- 슬라이드 부분을 가려야 하므로 따로 생성하기 (어차피 이 내비게이션 어려운거 맞음) 주의사항: ul 밑에 넣어야함!!! 형제 요소로 넣어!! --> </div> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> </div> <div class="tab"> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> </div> </div> <div class="gallery"> <a href="#"> <img src="img/gallery1.png" alt="gallery1"> </a> <a href="#"> <img src="img/gallery2.png" alt="gallery2"> </a> <a href="#"> <img src="img/gallery3.png" alt="gallery3"> </a> </div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"><span class="banner-text">Banner</span> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="copyright"> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> <div class="familysite"> <select> <option>패밀리사이트1</option> <option>패밀리사이트2</option> <option>패밀리사이트3</option> </select> </div> </footer> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } /* .container{} */ .header-inner{ /* border: 1px solid red; */ background-color: #d58c71; } header{ width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header>div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } /* .content-inner{} */ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; margin: auto; } .slide-items{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .slide>div{ /* border: 1px solid green; */ height: 300px; } .items{ width: 1200px; margin: auto; overflow: hidden; } .items>div{ /* border: 1px solid purple; */ height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .gallery{ width: 350px; } .banner{ width: 350px; } .footer-inner{ /* border: 1px solid red; */ background-color: #eee; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer>div{ /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid palevioletred; */ height: 50px; box-sizing: border-box; } .familysite{ width: 200px; } /*모듈 이외 부분*/ .header-logo{ line-height: 130px; text-align: center; } .gallery a{ text-align: center; padding: 5px; } .gallery a img{ text-align: center; padding-top: 45px; transition: 0.1s; } .gallery a img:hover{ opacity: 50%; } .banner a img{ width: 350px; height: 200px; } .under-menu{ text-align: center; } .under-menu a{ line-height: 50px; padding: 10px; } .copyright{ text-align: center; line-height: 45px; } .familysite{ text-align: center; line-height: 90px; } .familysite select{ width: 100%; text-align: center; padding: 8px; } /*내비게이션*/ .menu{ margin-top: 59px; list-style: none; padding: 0; } .menu li{ /* border: 1px solid red; */ float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li>a{ /* border: 1px solid red; */ background-color: #a7634a; color: white; padding: 10px; display: block; transition: 0.5s; } .menu li:hover>a{ background-color: #e8a891; color: #333333; } .sub-menu{ height: 130px; display: none; } .sub-menu a{ background-color: #e8a891; padding: 10px; display: block; transition: 0.5s; } .sub-menu a:hover{ background-color: #a7634a; color: white; } .sub-back{ position: absolute; width: 100%; height: 200px; top: 100%; right: 0; background-color: #e8a891; z-index: -1; display: none; }
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Lock Aspect Ratio 관련
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다. ============================================================안녕하세요. 해당 질문관련 검색을 해보았지만 나오지 않는 것같아서 문의드립니다. 현재 8-8 만능으로 쓰이는 기본 카드를 수강중에 있습니다.Lock Aspect Latio의 플러그인이 사라졌는지 검색을 해도 이것밖에 안나오더라구요.저 첫번째 것을 사용하면 강의내용처럼 원하는 대로 나오지 않습니다. 방법이 있는지 아니면 제가 검색을 잘못했는지 알고 싶습니다. 감사합니다!!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Local variables
안녕하세요 볼드님 local variables을 등록한 후, Mobile, Tablet, Desktop Frame을 눌러서 등록한 베리어블을 적용하려고 하니, 안 뜨는 경우는 무엇일까요? ㅜㅜ프레임 밖에 벗어나서 Page자체에서는 등록된 베리어블을 확인을 할 수 있습니다 ㅜㅜ
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Fill이 안 되는 이유
width가 Fill로 변경이 안 되는 이유가 무엇일까요 선생님ㅜㅡㅜFixed, Hug만 뜹니다 ㅜㅜ
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
버튼 미작동
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.배리어블 인터페이스와 친해지기 편의 6:07분에서 '리네임' 버튼을 눌러도 이름 변경이 되지 않아요 이유가 뭘까요?이미지: 제 컴퓨터 상황 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
버튼 컴포넌트에서 불린프로퍼티 아이콘이 안 보입니다.
버튼 컴포넌트에서 불린 프로퍼티를 넣으려고 하는데요, appearance에서 눈 옆에 육각형 아이콘이 안 보입니다. 안 보이는 이유가 뭘까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트 파일에 파운데이션 라이브러리가 연결이 안됩니다!
말씀해주신대로, 파운데이션 파일에서 라이브러리 publish 한 후, 컴포넌트 파일에서 add to file을 했는데 베리어블과 local style에 파운데이션이 뜨지 않습니다!제가 어떤 부분을 누락한 걸까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
네비게이션 탭 강의에서의 질문
강의 10분 정도의 내용입니다.아래 컴포넌트에서 Tabs를 fixed로 Tabs item들을 fill로 설정하니 인스턴스에서 전체적으로 간격이 잘 유지 되면서 탭바가 늘어나고 줄어듭니다.그런데 길이가 다른 데이터를 넣으니 저렇게 간격유지를 못하고 틀어지는데 어떻게 해야하나요?Tabs와 Tabs item을 둘 다 hug로 설정하면 데이터를 넣어도 간격유지가 잘되며 늘어나지만 그 후 탭바를 전체적으로 늘리고 줄이는게 안됩니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
E-1 레이아웃 제작 중 궁금점
강의 내용중에는슬라이드 아이템에 height: calc(100vh - 100px);을 주셨는데,.main-content > div에 똑같은 값을 주고 슬라이드 아이템에 height: inherit;을 주는건 안될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
뷰티파이 대체
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요 비쥬얼 스튜디오 코드에서 뷰티파이가 더이상 업데이트 하지 않는다고 하는데요, 자동 인덴트 조절은 어떤 어플 대체품이 있을까요? 또한 선생님 설명에는 블라켓 사용법이 pdf 앞장에 되어있는데, 현재는 비쥬얼만 된다는 강의를 봤습니다.이론 강의를 듣기 시작하려고 하는데 블라켓베이스 기준 설명이신데 그거 상관없이 코드로 그냥 하면 될까요? 헷갈려서 여쭤봅니다 - 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
Footer를 영상에 나오는대로 변경했는데
강의에 대한 질문은 인프런 질문하기나, 1:1 커뮤니티 페이지에서 문의하시면 빠르게 답변 드리고 있습니다.(커뮤니티 주소 https://itconnect.dev/커뮤니티/) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요테마 파일과 CSS, PHP 파일은 아래 링크를 통해 받아보실 수 있습니다.https://drive.google.com/drive/folders/1KtkfsZe2uy5jNMps0F6gnqlEvZnq0mRN?usp=sharin푸터를 영상에 나온것처럼 변경했는데 새로고침하면 배경색 글자색 지정한거 없어지고 위에 같이 보이네요 ㅜh1글자색으로 보여지는 것같아요 해결방법있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D, E 유형 수험자 제공파일 어디서 받을 수 있을까요?
D,E 최종본 제작 전 영상에서 말씀주신 파일모음을 받고싶은데 수업자료에 첨부된 파일들 확인해봐도 찾을수가 없습니다. 참고PSD. 텍스트, 사진이 포함된 수험자제공파일은 어디서 받을 수 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
상태칩 강의에서의 질문
볼드님 상태칩을 만들때아이콘을 끄고 켤 때 텍스트와 버튼의 앞 뒤 간격이 달라지는데 이건 어떻게 해결해야하나요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Print variables 대체 플러그인 없을까요?
플러그인이 강의에 나온 버전보다 업데이트 되었는지 아래 사진처럼 출력이 됩니다.갠적으로 컬러 크기가 Description 폰트에 비해 너무 크고 세로로 1자 형태로 배열되니까 보기 불편하다고 느낍니다!혹시 또 다른 플러그인은 없을까요? 이번 미션은 Print variables로 하겠지만, 추후에는 더 유용한 플러그인을 사용해보고 싶습니다ㅎㅎㅎ
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
브라우저 비율 확대시 header-inner,footer-inner 잘림 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>B</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="nav"> <ul class="menu"> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> </ul> </div> <div class="nav-bg"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner-image"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> </div> <div class="family-site"> <select> <option value="">Family Site</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> </select> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; color: #333; background: #fff; font-size: 15px; } a { color: inherit; text-decoration: none; } /* .container {} */ .header-inner { background: #ddd; } header { position: relative; z-index: 1; height: 100px; justify-content: space-between; } header > div { /* border: 1px solid #000; */ height: 100px; } .header-logo { float: left; width: 200px; line-height: 130px; } .nav { float: right; width: 600px; } .menu { position: relative; z-index: 1; margin-top: 67px; list-style: none; padding: 0; display: flex; } .menu > li { flex: 1; } .menu > li > a { display: block; text-align: center; padding: 5px; background: #fff; border: 1px solid #000; } .menu > li:hover > a { color: white; background: #000; } .sub-menu { display: none; } .sub-menu > a { color: white; padding: 5px; display: block; text-align: center; } .sub-menu > a:hover { color: black; background: white; } .nav-bg { display: none; left: 0; top: 100%; position: absolute; width: inherit; height: 150px; background: #000; } /* .content-inner {} */ .slide { overflow: hidden; /* border: 1px solid #000; */ height: 300px; position: relative; } .slide > div { position: absolute; display: flex; font-size: 0; } .items { display: flex; } .items > div { /* border: 1px solid #000; */ padding-top: 10px; height: 200px; } .news { width: 425px; } .gallery-inner { margin: auto; width: 95%; } .tab-inner { float: left; width: 95%; margin: auto; } .btn > span { display: inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px 5px 0 0; border: 1px solid #000; border-bottom: none; background: white; margin-bottom: -1.5px; } .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 0 10px; } .tab1 > a { border-bottom: 1px solid black; padding: 4px 0; display: block; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a > b { float: right; font-weight: normal; } .gallery { width: 425px; } .tab2 { display: flex; } .tab2 > a { margin: auto; } .tab2 img { width: 120px; } .banner { text-align: right; width: 350px; } .banner img { width: 95%; } .footer-inner { background: #ddd; } footer { display: flex; } footer > div { height: 100px; /* border: 1px solid #000; */ } .copyright { width: 1000px; } .copyright > div { /* border: 1px solid #000; */ /* box-sizing: border-box; */ height: 50%; text-align: center; line-height: 1px; } .family-site { text-align: center; width: 200px; line-height: 100px; } .container > div > * { width: 1200px; margin: auto; }setInterval(function(){ $('.slide>div').animate({left:'-100%'},function(){ $('.slide>div').css({left:0}) $('.slide>div>a:first-child').appendTo('.slide>div') }) },3500) $('.menu li').mouseenter(function(){ $('.sub-menu, .nav-bg').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .nav-bg').stop().slideUp() })브라우저 비율을 줄인 상태로 보면 정상적으로 보이지만브라우저 비율을 100%로 맞춰서 보면 헤더랑 푸터 배경 부분이 잘려서 보입니다. 혹시 어떤 문제가 있을까요?(100%)(75%)
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
알림/경고 메세지 만들기 강의에서의 질문
폰트사이즈와 간격 등 모든 사이즈를 다 일정하게 따라했는데 (선생님은 높이값이 72, 저는 80으로 됩니다)아이콘을 추가할때 선생님과 다르게 위치가 지정되는 이유가 무엇일까요?알려주신대로 패딩값을 위아래 16으로 주면서도앞의 아이콘은 타이틀 상단 기준으로 위치하게하고Close icon은 중앙에 위치하게 지정하려면 어떻게 해야하나요?이럴땐 앱솔루트 포지션으로 원하는 위치를 지정하면 되나요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
셀렉트-파트1 강의에서의 질문
안녕하세요 볼드님강의를 다시한번 재수강 중인데강의대로 실행되지 않는 부분이 있어 질문드립니다.(셀렉트-파트1 강의 6분 31초 부분 입니다)1) 아이콘을 24에서 16으로 줄이는 과정에서 변화가 없는 이유가 무엇일까요?2) 페이지 패널에서 저렇게 체크한 표시처럼 디바이더로 나눌수 있는 방법이 뭔가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
폰트 사이즈에 홀수 (13pt, 11pt, 21pt)는 잘 안쓰나요?
폰트 사이즈 예시에는 모두 짝수 폰트만 있는걸로 보여서 질문드립니다!웹 UI 레퍼런스 찾아보거나(Linear) 디자인 시스템 예시(https://www.remain.co.kr/page/designsystem/font-size.php애플 / https://developer.apple.com/design/human-interface-guidelines/typography) 찾아봤을 때 종종 홀수 폰트들도 봤어서 이게 예외적인 사례인지 아니면 필요하다면 홀수 폰트도 사용해도 되는건지 궁금합니다. 제가 만드는 서비스에선 13pt를 사용하고 있어서.. 자주 사용되는 패턴이 아니라면 짝수로 다 바꿀까 싶어서요!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
문의드립니다.
안녕하세요!혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요?다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다. 베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠? 마지막으로, color는 로컬 스타일을 지워주셨는데 타이포그래피는 로컬에 베리어블을 다 적용하고 로컬 스타일을 지우지 않는 이유가 무엇인가요?
