질문 & 답변 - 인프런 | 커뮤니티

질문 게시판

고민있어요

스터디

팀 프로젝트

멘토링 후기

수강평

선물함

인프런 피드

블로그

인프런 소개

공지사항

랠릿

강의

챌린지

로드맵

멘토링

더보기

묻고 답해요

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

인프런 TOP Writers

미해결
[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

body 태그 margin: 0;

안녕하세요.flex 이용하여 레이아웃 제작 시 body태그에 margin: 0;을 주라고 강의에 나와 있는데,혹시 보더나 배경색 사용하여 제작할 때도 body 태그에 margin: 0;을 주면 되는걸까요?

면정 · 2024.06.22 · [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

투표점수

1

조회수

151

답변

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

[컬러] https://swatchy.twosix.studio/

안녕하세요^^우선 좋은 강의 준비해주셔서 감사합니다.잘 들고 있어요.궁금한점은요.https://swatchy.twosix.studio/에서 베이스 색상입력하면 제가 입력한 컬러가 (브랜드컬러여서)400,500,600 중에 하나로 들어오고 나머지가 구성될줄 알았는데요.피그마에서 .json파일 불러들오오니까 base 가 따로 존재해버려서요.제가 원하는 컬러의 색 변화가 아닌듯합니다.어떻게 된건지 궁금합니다. (제가 이해 잘못하고 있을 수 있습니다.)그리고 컬러 톤 50~ 900 사이를 생성하는 자동 프로그램이다른 플러그인이나, 사이트 추천 부탁드리겠습니다.감사합니다. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

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

투표점수

0

조회수

204

답변

2
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

css full reload 문제가 발생하여 질문드립니다!

<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="js/jquery-2.1.4.js"></script>  <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css">  <script src="js/jquery.scrollTo.min.js"></script>  <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head>  <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <div class="awards-inner"> <div class="about-awards"> <div class="about-heading">  <h2>2024 <br>Architecture Awards <br>Winner</h2> <hr class="bar"> <p> The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome. </p>  <a href="https://architectureprize.com/" target="_blank">View the awards</a> </div> </div> <div class="victory-jump"> <img src="/images/victory-jump.png"> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <div class="location-inner"></div> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div>  <a href="#" class="gototop"><img src="images/gototop.png"></a>  <a href="#" class="btn-hiring"><i class="fa fa-commenting"></i> Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> * pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; } .gnb-inner { /*border: 1px solid #000;*/ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; /* 앞 px상하,뒤 px좌우 */ padding: 10px 20px; border-radius: 20px; /* 가로,세로,퍼짐정도 */ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } /* 버튼이 눌리는 느낌 */ .btn-hiring:active { transform: scale(0) } /* ################### Section : awards-winner ################### */ .awards-inner { height: 100%; border: 1px solid #ddd; } .awards-inner > div { border: 1px solid #000; float: left; width: 50%; height: 100%; position: relative; } .about-awards { background-color: #1a1f24; color: #fff; } .about-heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } .victory-jump { background-color: #fff; } .victory-jump img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; }선생님께서 올려주신 비쥬얼스튜디오 full reload 해결 방법 강의를 듣고 적용시킨 후 작업 중이였는데 갑자기 코딩 시 최상단으로 올라가는 현상이 발생합니다.설정을 다시 확인하고 익스텐션에서 open sever를 재설치하였음에도 해결되지 않아서 질문드립니다!

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

투표점수

1

조회수

232

답변

3
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

파일 내 index.html에 대한 오류

<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="/js/jquery-2.1.4.js"></script>  <script src="./js/velocity/modernizr.js"></script> <script src="/js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="./js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css">    <script src="./custom.js"></script>  <link rel="stylesheet" href="./style.css">  <link rel="stylesheet" href="./responsive.css"> </head>   <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div>  <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div>  <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav>  </body> </html>>/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; $(function() { /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) // 중복되는 선택자 콤마로 이어감 $('section, .menu a').click(function(){ // 모바일에서 여백 섹션을 눌렀을 때 서브메뉴가 안으로 들어감 $('.gnb').removeClass('active') }) // // Smooth Scrolling // $('.menu a').click(function(e){ // // ||:쉬프트 +원표시 0.9초동안 슬라이딩 // $.scrollTo(this.hash || 0, 900); // })/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } 비쥬얼 스튜디오 오픈 서버로는 현재까지 작업 내용이 잘 표시되지만 폴더내에서 index 클릭 시 메인페이지 이미지가 표시 되지 않고 모바일로 변경시 사진과 같은 오류 문구와 함께 햄버거 버튼에 적용했던 효과들이 작동되지않습니다.

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

투표점수

1

조회수

218

답변

1
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script>  <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css">  <script src="./js/custom.js"></script>  <link rel="stylesheet" href="./style.css">  <link rel="stylesheet" href="./responsive.css"> </head>   <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div>  <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div>  <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav>  </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') }) })대상이 수동으로 처리되어 수동 이벤트 수신기 내부의 Default를 방지할 수 없습니다라는 문구가 뜹니다.말씀해주신대로 active 클래스를 지우고 다시 작성해보고커스텀 js의 문법도 맞추었는데 햄버거 버튼에 마우스 클릭 시 X표시로 변경되지 않습니다 ㅠㅠ 계속 똑같은 질문 드려 죄송합니다

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

투표점수

1

조회수

181

답변

1
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script>  <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css">  <script src="./js/custom.js"></script>  <link rel="stylesheet" href="./style.css">  <link rel="stylesheet" href="./responsive.css"> </head>   <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div>  <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div>  <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav>  </body> </html>$(function() { /* Trigger */ $('.trigger').cli(function(){ $(this).toggleClass('active') }) })/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }햄버거 버튼이 x로 바뀌지 않습니다 ㅠㅠ

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

투표점수

0

조회수

179

답변

2
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script>  <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css">   <link rel="stylesheet" href="./style.css">  <link rel="stylesheet" href="./responsive.css"> </head>   <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div>  <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div>  <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav>  </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }아까 질문드렸던 수강생입니다 추가하여 업로드 하였습니다

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

투표점수

1

조회수

176

답변

2
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

& History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div>  <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div>@media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };위 코드 적용시 이렇게 임시 보더 박스가 표기 되지 않습니다 ㅠㅠ

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

투표점수

1

조회수

205

답변

3
미해결
뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론

[과제] UI 디자인 원리가 잘 적용된 사례와 아닌 사례

🚩 좋은 예시🩷 홀릭스 웹페이지- 특징 : 상단 네비게이션 바에 항목들이 카테고리별로 분류되어 있습니다. 그리고 각 항목들은 동일한 폰트, 글자 크기, 색상으로 설정되어 있어 유사성의 원리가 잘 반영되었다고 생각했습니다. 또한 '입장하기' 버튼이 파랑색으로 설정되어 있는데, 해당 스터디에 참가하고 싶은 사용자의 니즈를 반영하는, 좋은 CTA를 보여주는 예시라 생각했습니다. 💢나쁜 예시 🩷 닌텐도 어카운트 로그인 페이지- 특징 : 암호로 로그인을 가장 큰 카드로 설정하고, 다음으로 중요한 패스키로 로그인 그리고 다른 어카운트 로그인 순으로 카드의 크기를 작게 만든 거 같습니다. 제 개인적인 견해로는 패스키보다 간단 로그인하는 방식이 사용성이 더 용이하다고 판단해서 차라리 간단 로그인에 해당하는 카드를 더 크게 만들면 어땠을까 하는 견해입니다!! 그리고 하단에 신규 작성하는 버튼이 있는데 상단 네비게이션 바에도 파란색 글씨로 신규 작성하는 버튼이 있어서 중복되는 점이 아쉬웠던 거 같습니다. ++ 요즘 좋은 UI를 가진 웹페이지들이 너무 많아서 사실 나쁜 예시를 생각하는 데 시간이 꽤나 걸렸던 거 같아요!! 이렇게 하는 게 맞는 건진 모르겠지만 그래도 하나씩 알아가는 배움에 오늘도 성장하는 제 모습을 보는 거 같아 뿌듯한 거 같습니다 감사합니다 선생님 🌠🌠 !!

이브 · 2024.06.13 · 뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론

투표점수

0

조회수

469

답변

1
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기

강의 관련 문의 드립니다

강사님.. 여러 차례 수강전 문의 드리고 수강신청하였습니다.수상 신청하자마자.. 내리 7강 까지 들었네요문의 드릴것이 있는데요,,우선 뉴스페이퍼 테마는 다시 도메인과 알려주시 업체 호스팅을 하고 구매를 해서 진행하려고 합니다.먼저 앞서,, 현재 저렴한 워프 사이트가 하나 있는데,,너무 방치하고 있어서요,, 카페24에서,, 1100원 짜리 와 도메인과 함께 구입을 해서이것 저것 만저보다.. 현재 아무것도 못하고있는데요섹션 4의 Generatepress Theme 부분 강의를 먼저 듣고 그것 먼저 세팅을 해도 될까요?괜찮다면 우선 그것 먼저 세팅을 한 후에 새로이 제대로된 호스팅을 하고 테마도 사서 진행하려 합니다카페24에 1100원의 워드프레스가 강사님께서 지급해 주신다는 Generatepress Theme 정식버젼이 잘 작동이 될까요? 아니면 바로 위에것으로 업그레이드 하고 이것 나름 데로 살려서 써야 할 것 같아서요

서비 · 2024.06.12 · 구글 애드센스 수익형 워드프레스 블로그 만들기

투표점수

0

조회수

268

답변

1
미해결
뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론

[과제] 좋은 UX와 안 좋은 UX 사례

좋은 UX 🚩 챌린저스 (모바일 앱)1⃣ 소개 : 나태해질 때마다 예치금 걸고 다른 사람들과 챌린지 하는 앱인데 하루에 평균 5~6번씩은 들낙했는데 기능적으로 좋은 앱인 거 같아 소개합니다!2⃣ 장점 : 홈, 인기, 신규, 추천 카테고리로 분류류한 점에서 정보 설계를 수용한 거 같아 좋은 UX를 제공한다고 생각했습니다. 또한 각 항목을 클릭했을 때 세부 항목이 나타나는 점도 인상 깊었습니다. 그리고 특히 추천 카테고리를 클릭하면 간단하게 참여할 수 있는 챌린지 위주로 추천해주는 기능이 있는데, 처음 챌린저스를 접하는 낮은 의도의 사용자를 고려한 점이 인상 깊었습니다! 안 좋은 UX 🚩 아이폰 최근 통화 화면1⃣ 단점 : 개인적으로 아이폰 유저로써 불편했던 점인데, 통화 아이콘을 누르면 최근 통화 내역으로 바로 이동하는데, 여기서 좌측 전화번호를 조금만 눌러도 바로 해당 전화번호로 통화 연결이 되는 게 아쉬웠습니다. 이런 실수를 범한 게 100번도 더 넘어서 제 멘탈 모델과는 다른 컨셉트 모델이 도출된 부분이라고 생각했습니다. 2⃣의견 : 그래서 제 개인적인 견해로는, 전화번호를 눌렀을 때 '해당 번호로 발신하시겠습니까?' 와 같은 알림창이 출력되고, 사용자는 예 혹은 아니오 로 응답할 수 있게 UI를 추가하면 어떨까 라는 생각을 해보았습니다. 그러면 멘탈 모델과 컨셉트 모델 둘 다 충족하는 이상적인 UX를 만들어갈 수 있다고 생각했습니다!! +++ 이 강의를 시작으로 처음 UX 공부 시작했는데 디자인은 무조건 예쁘면 다 되는 줄 알았는데 사용자 관점에서 사용자의 문제를 해결하는 걸 1순위로 두고 디자인을 해야 한다는 걸 깨달았어요!! 진짜 너무 재밌구 얼른 완강한 다음엔, 피그마 툴 제대로 배워보고 싶다는 생각이 드는 거 같아요!!

이브 · 2024.06.12 · 뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론

투표점수

0

조회수

722

답변

1
미해결
[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

슬라이드 이미지 포토샵 질문

D,E,F타입의 경우 슬라이드 영역이 유동형인데포토샵에서 창 크기를 어느정도로 해야할까요?

준혁김 · 2024.06.06 · [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

투표점수

1

조회수

185

답변

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

아이콘 컬러 배리어블 적용이 안되어 질문 드려요!

선생님 안녕하세요!버튼 컴포넌트 제작 강의를 보며 따라서 만들고 있는데요~아이콘 fill에 배리어블을 적용해도 아이콘 색상이 변하지 않는 문제가 있습니다~color/icon/interactive/inverse 색상을 선택해도 적용이 안되며, 다른 배리어블 색상을 적용해도 동일하게 적용이 안됩니다! 이름만 적용되고 색상은 변경이 안되는 상태입니다 ㅠㅠ(feather icon을 shape 면으로 병합한 형태로 정리하였고, Vector로 동일하게 이름도 적용했습니다. 아이콘 컬러 배리어블 색상도 등록한 상태입니다.아이콘을 면으로 정리할 때 유니온과 아웃라인이 안되는 경우, 커뮤니티에 공유해주신 Convert SVG Strokes to Fills 웹 사이트를 이용했습니다! )feather icon 외에 다른 아이콘 컴포넌트로 테스트 해보니 배리어블 색상이 적용됩니다.해결 방법이 있을까요?

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

투표점수

0

조회수

573

답변

2
미해결
[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

제이쿼리 작동은 되는데 오류창이 떠요 ㅠㅠ

모달창 열리는거는 문제 없는데 닫기 누르면 이 창이 떠요. 닫히는 코드에 문제나 오타가 있다기에는 뒤로가기 누르면 또 제대로 닫혀 있어요.. 이전에는 공지사항 갤러리 탭 메뉴할때도 갤러리 누르면이 창이 떠서 뒤로가기 누르면 또 갤러리 탭이 제대로 실행되어있더라구요.. 다시 공지사항 누르면 저 오류창은 안뜨구요. 제이쿼리가 작동은 되는데 중간에 이 창이 뜨는 이유를 모르겠어요 ㅠㅠ 크롬으로 연결해도 똑같이 뜨네요 ㅠㅠ

2024.06.03 · [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

투표점수

1

조회수

153

답변

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

베리어블 활용에 질문이 있습니다 :)

안녕하세요, 선생님!본격적으로 베리어블을 활용/운영하다보니 궁금한점이 있어 글 남겼습니다.1.semantic으로 지정되지않은 컬러 활용?Primitive의 color-100/200/300 이런 베리어블들은 사용을 지양해야하나요~?Primitive는 시멘틱처럼 용도가 따로 지정되어잇지않아 다른 디자이너들이 보면 어떤 때 200,300을 써야하는지 헷갈릴것같은데 어떻게 해야할까요? 예를들어 미세하게 컬러를 조정할떄가 생기는데 그때마다 시멘틱의 text,bg,border,icon을 각각 1컬러당 4세트씩 작업해줘야하는 점이 번거로울것 같기도한데, 그러자니 primitive를 바로쓰면 용도에 대해 적혀있지않은 네이밍이라 헷갈릴 것 같습니다.조언 주실 부분 있으실까요? 2.텍스트나 도형을 생성하고 컬러칩 라이브러리를 열면라이브러리 상단에 semntic이 우선으로 뜨지 않고 primitive가 먼저 뜨게 되는데 상단에 우선으로 뜨게 하는 방법이있을까요?

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

투표점수

0

조회수

369

답변

1
미해결
애플 웹사이트 인터랙션 클론!

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

유승윤 · 2024.05.31 · 애플 웹사이트 인터랙션 클론!

투표점수

0

조회수

244

답변

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

프레임을 씌울 때

종종 그룹을 먼저 씌운 후, 오토레이아웃을 설정하시던데특별한 이유가 있는지 궁금합니다!

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

투표점수

0

조회수

179

답변

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

darkmode에 기존 gray50~900을 사용하지 않으려면

Primitive에 다른 gray팔레트를 만들어줘야 하나요?이때 네이밍은 어떻게 지정하면 좋을지 궁금해요.. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

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

투표점수

0

조회수

206

답변

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

Color Style Guide 플러그인

Color Style Guide 플러그인이 그레이만 제공 되는 것 같아요.혹시 플러그인을 사용하지 않고 컬러 팔레트를 만드는 방법은 없을까요?

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

투표점수

0

조회수

477

답변

1
미해결
[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

D,E유형 반응형 슬라이드 필수인가요?

특성화고에서 필기면제자 검정 대비 학생들 가르치고 있습니다.D,E유형에서 반응형 슬라이드에 대한 부분은 공개문제에서 없는거같아서요.. 그냥 기존에 A,B,C타입에서 하던대로 시켜도 시험에서 큰 지장이 있을까요?

준혁김 · 2024.05.29 · [2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

투표점수

1

조회수

255

답변

2

인기 태그

주간 인기글