nav 에 sign in 라인
안녕하세요 선생님
수업 잘 듣고 있습니다.
강의를 듣는 도중에 sign in 왼쪽선이랑
아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑
미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요
이것도 딱 맞게 조정할 수 있는 방법이 있나요?
Answer 2
0
아래 flower 부분은 화면 대비 50%를 사용하는 구간이고, 상단 메뉴 부분은 비율이 다르기 때문에 그렇습니다. 맞추려면 상단의 메뉴 구조를 각각 div등으로 양분하고 50%로 지정한 다음, 그 안에서 왼쪽 메뉴는 왼쪽으로 배치, 오른쪽 메뉴는 오른쪽으로 배치되도록 flex를 활용하여 적용하면 되겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김가희님.
강의에서 다루신 디자인과 구현한 웹 페이지 간에 불일치가 있어 고민이시군요. Figma에서는 다양한 디자인 요소가 일치하도록 편리한 기능을 제공하지만, 웹 브라우저에서 동일하게 구현하기 위해서는 몇 가지 추가적인 조정이 필요할 수 있습니다.
CSS Flexbox 및 Grid 이용하기: Figma에서 구현된 레이아웃이 웹에서 동일하게 유지되도록 하기 위해 CSS에서 Flexbox나 Grid 레이아웃을 활용해보세요. 이를 통해 요소 간 간격과 정렬을 보다 쉽게 제어할 수 있습니다.
브라우저 별미세 조정: Figma에서는 모든 요소가 일치하게 보일 수 있지만, 실제 브라우저에서는 경계나 여백에 약간의 차이가 발생할 수 있습니다. 이럴 경우
box-sizing,margin,padding등의 CSS 속성을 조정하여 각 브라우저에서 동일한 결과를 얻을 수 있도록 해보세요.Figma의 맞춤 조정: Figma에서 제공하는 ‘Smart Guide’ 기능을 통해 요소들이 정확히 맞물리도록 설정할 수 있습니다. 웹에서도 이러한 가이드를 참조하여 정확한 위치를 설정할 수 있습니다.
관련하여 도움이 될 만한 답변이 있는 링크를 제공해 드립니다:
- CSS로 완벽한 레이아웃을 구현하는 팁 - Flexbox와 Grid에 대한 설명이 있어, 김가희님께서 겪고 계신 미세한 정렬 문제 해결에 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의가 중복됐어요
0
15
0
결제가 이루어지는 방식에 대한 문의
0
27
0
강의제목에 10/15일 삭제라고 나와있는데,
0
44
1
컴포넌트 파일에 파운데이션 라이브러리 연결 안되는 문제
0
87
6
섹션3. 스타일가이드 다운받고 난후
0
50
2
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
53
2
강의 파일 다운로드
0
51
2
스크립트 영상 미일치
0
70
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
53
2
강의 설명 중에 헷갈리는 것이 있네요
0
49
1
수업자료 관련 문의
0
65
3
1강 동영상 재생 오류
1
65
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
37
1
Composition단계에서 `Layer`는 누가 만드는지
0
41
1
아이콘 컬러 자동 변경
0
66
2
Strict Mode 예시 질문!
0
58
2
수업이 안보여요
0
62
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
60
1
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
54
2
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
83
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
102
2
윈도우즈 환경에서 진행중입니다.
0
59
2
4강 카드뉴스 자동화 자료
6
124
1
라이브 강의 영상 녹화본이 있을까요?
0
100
1