inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

.container>div{} 작성해야 하는 경우는?

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

.container{} .container>div{} .container{}만 하고 .container>div{} 는 하지 않는 경우도 있고 .container>div{} 를 하는 경우도 있는데 .container>div{} 어떤 경우에 해야 합니까?

  • HTML/CSS
  • jquery
  • 웹-디자인
HL5PFM 댓글 1 좋아요 1 조회수 198

보조색을 다른 hue로 사용할 경우엔 베리어블 구조를 어떻게 짜야할까요?

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

머테리얼 컬러 가이드처럼, 프라이머리 컬러를 블루 계열로 두고 세컨더리 컬러를 틸 계열로 두고 싶은데, 예제는 하나의 색상 계열로 프라이머리, 세컨더리를 나누고 있어서 베리어블 구조를 어떻게 짜야할지 잘 모르겠습니다. 테마-브랜드 컬러에 틸 계열을 추가한 뒤 시멘틱-bg-인터랙티브세컨더리에 해당 브랜드 컬러를 참조하면 되는걸까요? 아니면 프리미티브 컬러에만 틸 계열을 넣어둔 뒤 시멘틱-bg-인터랙티브세컨더리 컬러에 프리미티브-틸500 을 바로 참조하면 되는걸까요?..

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Gyeongmin Jeong 댓글 1 좋아요 0 조회수 252

인스턴스 섹션이 보이지 않습니다.

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

create instance swap property를 적용하려는데, 인스턴스 섹션이 안보입니다. 어디서 찾을 수 있나요? 오른쪽 바에는 보이지 않습니다. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
torori 댓글 3 좋아요 0 조회수 385

실전사이트 제이쿼리소스

미해결

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ

  • HTML/CSS
  • javascript
  • jquery
  • 웹-디자인
댓글 1 좋아요 0 조회수 162

궁금합니다.

미해결

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

'홈페이지 헤더만들기'에서 header__nav-box와 header__list-box를 사용해 div로 한번 묶고 ul, li를 적용하는데, 오른쪽 icon은 왜 div없이 ul, li로 바로 하는지 궁금합니다. <header> <nav> <ul> <li> <p> <ul> <li> 이 구조인데, nav 태그 없이 ul, li로만으로도 가능할거 같아서요.

  • HTML/CSS
  • 웹-디자인
  • 클론코딩
photographarmacist 댓글 1 좋아요 0 조회수 253

css 슬라이드 애니메이션(크로스페이드 슬라이드)

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

이미지가 4개이면 키프레임 구간을 어떻게 나누며 @keyframes slide { 0% { opacity: 0; } 0% {} 0% {} 0% {} 100% {} } 그리고 애니메이션 딜레이는 어떻게 주나요? .slide div a:nth-child(1) { animation-delay: 0s; .slide div a:nth-child(2) { animation-delay: 0s; .slide div a:nth-child(3) { animation-delay: 0s; .slide div a:nth-child(4) { animation-delay: 0s; 가로 슬라이드와 세로 슬라이드는 이해도 되고 이미지 4개로 작업도 해보았습니다. 그런데 크로스페이드는 도저히 응용이 안돼요

  • HTML/CSS
  • jquery
  • 웹-디자인
bimil1121 댓글 1 좋아요 1 조회수 539

Color scoping 적용이 안되어 문의드립니다!

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요! 선생님 색상 배리어블 등록하기 강의를 보며 실습하는 중입니다. Color scoping 적용이 안되어 문의드립니다! 첨부 이미지 처럼 text에서는 Text, bg에서는 bg 만 체크, border, icon 각각 해당 항목만 체크하였습니다! 이후 텍스트를 작성하고 등록한 배리어블 컬러를 적용해보니, 체크한 Text 외에 bg, border, icon 컬러가 모두 보이는 문제가 있습니다! Text에 적용할 때는 Text 컬러만 보여야 하는데요~ 1)번 설정 시, 추가로 더 체크해야될 부분이 있는 걸까요? 도움 부탁 드립니다! 1) 2) 좋은 강의 감사드립니다!!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
askare 댓글 2 좋아요 0 조회수 342

질문있습니다!

해결됨

UIUX 포트폴리오 Part.2 -UIUX 디자이너로 취업하기

안녕하세요~ 강의 들으면서 포트폴리오 준비하려고합니다! 다름이 아니라 영상에 있는 것처럼 어플 흐름도를 전부 디자인하는건가요??.. 실제 어플 출시처럼요?? 영상첨부해주신 사이트에서 참고 자료 봤는데 다들 웹, 앱 모두 이미 개발하신 분들 이길래요 ㅠ

  • 웹-디자인
  • 모바일-디자인
  • figma
  • 콘텐츠-제작
  • 클론-디자인
gmd0503 댓글 2 좋아요 0 조회수 262

아이콘 관련 질문

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

icon/settings를 제외한 다른 아이콘은 하나의 '그룹'으로 만들어져 있습니다. 하지만 settings는 그렇지 않아 색을 바꾸려고 할 때 'Border'로 인식되더라구요. 두 개를 그룹화 시켜도 '아이콘'으로 변하지 않습니다. 어떻게 하면 두 개를 합쳐 '아이콘'으로 인식될 수 있게 할 수 있을까요? 고맙습니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김보준 댓글 2 좋아요 0 조회수 316

local variables vs local styles

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요. 디자인 토큰을 만들기 시작한 프로덕트 신입 디자이너입니다! 색상은 local variables에서 만들었는데 타이포는 local styles에서 만드는 이유가 있을까요? 아니면 그것또한 토큰을 만드는 방법인가요? 토큰과 관련해서 너무 초보라.. 이해부탁드립니다! 감사합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
klj00700 댓글 1 좋아요 0 조회수 526

variables 색상이름 설정

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

variables-theme-Plus에서 Libraries색상을 지정하면 색상이름이 blue/50만 뜨고 앞에 color/가 없이 나오는데 같이 나오게 하려면 어떻게 하나요? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
torori 댓글 1 좋아요 0 조회수 246

배리어블 컬러 추가한 것만 볼 수 없나요?

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요. 스타일로만 작업하다가 이번 작업부터 배리어블 활용해서 디자인시스템을 구축해보고자 합니다. 다른 파일에서 배리어블 컬러가 적용된 에셋을 복사해오거나 하면 그에 연결된 배리어블이 자동으로 추가되는데, 자동으로 추가되지 않고 제가 사용하고자 하는 파일에서 추가한 배리어블만 볼 수는 없나요? 그리고, 해당 파일의 배리어블 콜렉션 외의 컬러가 적용된 오브젝트를 찾는 방법이 있을까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
mina 댓글 3 좋아요 0 조회수 527

설명 감사합니다!

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.

  • HTML/CSS
  • jquery
  • 웹-디자인
upward070 댓글 1 좋아요 1 조회수 179

크로스브라우징-크롬

미해결

반응형 웹사이트 포트폴리오(Architecture Agency)

선생님 안녕하세요. 서브페이지 모바일로 변환하기를 마치고 마지막으로 크로스 브라우징을 하는 과정에서 크롬으로 서버를 바꿔서 해봤는데 엣지로 했을 때 보다 웹페이지가 엄청 확대되어서 나옵니다. 어떻게 해야 하나요? 제가 일일이 수정 해야 하나요? (저는 평소 엣지가 편해서 서버를 엣지로 설정하고 연습했어요. ) 선생님! 그리로 서버를 크롬으로 설정하고 연습하는게 오히려 낫나요? 그리고 마지막 질문이요! 포토폴리오 만들 때 웹사이트를 해외사이트로만 만들면 별로 보기 안 좋나요??

  • HTML/CSS
  • jquery
  • 웹-디자인
  • 크롬
  • 엣지
  • 크로스브라우징
김연재 댓글 2 좋아요 1 조회수 316

아이콘 등록 방법-아이콘 색상 변환

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요:D 항상 좋은 강의 감사합니다! 😄 아이콘 등록방법 강의회차 마지막쯤 알려주신 Component sets 예시 버튼 안에 들어가는 아이콘의 색상이 변경이 되기 위해 union적용을 알려주셨는대요 제가 강의를 듣기 전에 만들었던 아이콘을 변환 후 압축만 해버려서 vector로 되어있는 상태인데 이 상태에서 union 적용시키는 방법이 있을까요?ㅠㅠ 상단 메뉴에 union으로 변경시킬 수 있는 버튼이 활성화가 되어지지 않아 다른 방법이 혹시 있을지 궁금해서 질문남기게 되었습니다

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
한나 댓글 1 좋아요 1 조회수 353

디자인 스터디 문의

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요! 저는 편집디자이너를 하다가 이제막 UI/UX로 전형한 디자이너입니다. 개인적인 사정으로 볼드님 강의를 늦게 수강하게 되었는데 매달 스터디 한다고해서 들어왔더니 인프런 워밍업 클럽 - 스터디 1기 신청이 끝난 것 같아서요 늦었지만 프로덕트 디자인 과정 1기를 지금 들어갈 수 있을까요? 어렵다면 2기는 언제모집하나요? 아니면 별개로 진행하고 계신 스터디 과정이 있는 것인가요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Bogyeong Choi 댓글 1 좋아요 0 조회수 285

[하단 네비게이션]

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

https://www.figma.com/file/bOSNSdPGVIn8ZpyTacom3d/%5B%EA%B1%B4%EB%84%88%EA%B1%B4%EB%84%88%5D-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?type=design&node-id=7%3A484&mode=design&t=cn6j72TdmocKUhwt-1 badge의 Type을 number나 letter로 만들면 위의 그림처럼 됩니다. dot형태와 동일하게 오른쪽 위에 나타나게 하려면 어떻게 해야할까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김보준 댓글 2 좋아요 0 조회수 338

프로젝트3의 툴팁에서

미해결

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

프로젝트3의 툴팁부분 main.js을 bsComponent.js파일로 나눌때 <script type="module" src="assets/js/main.js"></srcipt> 에 type="module"을 넣게되면 나중에 wordpress로 만드는 작업을 하면서 function.php파일에 이 모듈부분을 어떻게 넣을수 있는지 잘 모르겠네요. 모듈부분때문인지 정상적으로 tooltip부분이 정상적으로 나오질 않습니다.ㅠㅠ 즉, wordpress에서는 모듈화를 어떻게 처리해야할까요?

  • HTML/CSS
  • javascript
  • bootstrap
  • 웹-디자인
MJ JI 댓글 2 좋아요 1 조회수 353

디자인시스템 리뉴얼 관련

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요 선생님, 강의 잘 듣고 있습니다. 현재 디자인시스템 리뉴얼을 하려고 하는데 많은 도움이 되고있습니다. 디자인시스템 리뉴얼 중 질문이 생겨 여쭙습니다. 이미 등록되어있는 디자인시스템이 있는데 (배리어블 말고 스타일로만 등록되어 있습니다.) 현재 디자인시스템으로 작업한 핸드오프를 계속 넘기는 작업과 동시에 디자인시스템 리뉴얼 + 전체 서비스 파악 후 리뉴얼 한 디자인시스템 적용을 해야하는 상황입니다. 현재 디자인시스템과 리뉴얼할 디자인시스템이 헷갈리지 않고 적용되게 할 수 있는 방법이 있을지 궁금합니다. 특히 색상의 경우 프라이머리 컬러가 같고, 프리미티브 팔레트 내에서만 살짝씩 변화가 있어 육안으로는 구별이 힘듭니다. 피그마 화면 내에서만 작업을 하고 리뉴얼 완료 시점에 배리어블, 혹은 스타일에 한번에 등록하는게 좋을까요? 어떻게 작업해도 헷갈리게 될 것 같아 혹시 좋은 방법이 있으시거나 비슷한 경험이 있으실까 하여 여쭙습니다. 항상 감사합니다!!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
hycho 댓글 1 좋아요 1 조회수 409

디자인시스템 개발 적용 시 스토리북 연동

해결됨

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요. 볼드님 디자인 시스템을 개발로 적용하는 부분에 궁금한 점이 있어 질문 남기게 되었습니다. 개발 시 스토리북을 연동하여 디자인 시스템을 구축하는 것이 필수일까요? 현재 디자인 시스템을 적용하고 있지만 스토리북은 사용하고 있지 않습니다. 개발자분들께서 귀찮아서 디자인 시스템을 사용하지 않고 그냥 만들어쓴다하고 이야기하는 것을 들었습니다. 개발 업무에도 효율적으로 적용되려면 스토리북 연동이 필요한 것인지 궁금합니다. 더불어 디자인 시스템을 실제로 개발에 적용하기 위해 필요한 부분에 대해서도 강의 개설해주시면 너무 좋을 것 같습니다. 감사합니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
wy 댓글 1 좋아요 0 조회수 374

인기 태그

인프런 TOP Writers

주간 인기글