[2-3] 웹 명함 구축하기 (2) - 피그마, 일러스트레이터, 기본세팅

피그마의 autoLayout
CSS의 display: flex 와 유사

피그마에서 고정된 스페이스가 아닌,
오브젝트 안에 있는 요소를 늘렸다가 줄였다가 하려면
justify-contents 의 space-between
과 같이
Advanced layout settings 이거 누르면
(Auto layout 우측에 점 3개)
Spacing mode에 Space between 확인 가능.

누르게 되면 간격을 유동적으로 조정하는 것 확인 가능.

피그마에서 고정점인
Constraints 를 함께 사용하게 된다면,
position:fixed 나
position:absolute 같은 것 쉽게 구현 가능

로고같은거 소수점 지양하기.
피그마 - 설정(Preferences) - Snap To Pixel Grid 체크돼있는지 확인.
그 다음, 커맨드 또는 컨트롤 누르면서
사이즈 조절하기.
- 가장 근사하면서 좀 더 큰 픽셀로 높이와 가로값을 지정할 수 있음.
- width, height 이 소수점이 있는 지 없는 지 확인해주기.

svg 파일을 일러스트레이터로 열어볼 수 있음.

일러스트레이터
compound Path 적용
= Object 채널에 있다.
Object - Make

svg 옵션 나오면
inline style 로 지정해야
지저분한 코드처럼 안보임.
Minify 할 수 있으면 해주기.

visual Studio로 불러와서 사용시,
id 또는 xml 떼서 사용하면 된다.

 <!-- 2-3) 스크립트는 바디태그 맨 끝에서 불러와주기 -->
    <script src="./js/script.js"></script>

  // 2-3) 원래 바디에 margin이 기본적으로 붙어있음. 제거해주기.
  margin: 0;
  padding: 0;

  list-style: none;
  text-decoration: none;

  position: relative; 
  // 2-3) 포지션 있어야만,   z-index, top, left 다 먹음. 모든 태그에 다 먹을 수 있도록 적용해주기.