이디야 시안

1. git

깃을 이용하여 팀원들과 메인 브랜치를 기준으로 각자의 브랜치에서 작업한 후 merge를 하면서 작업하려고 했다.

하지만 깃을 다들 처음 써보기도 해서 푸시하고 머지하는게 쉽지가 않았다.

결과적으로 레포 하나를 생성하고 메인 브랜치를 두고 각자 브랜치를 파서 틀은 만들어 놓긴 했는데 …

아직 각자 브랜치에서 푸시하고 메인에서 PR하는 부분이 물 흐르듯이 잘 되지는 않는 것 같다.

협업을 자주 해보면서 익숙해 지는게 우선일 것 같다.

2. HTML 마크업

배운대로 종이와 펜으로 구조를 그리면서 설계를 해보았다.

접근성을 향상 시키기 위해 시멘틱 태그를 사용하였고 전날 팀원들과 이야기 했던 클래스명 규칙도 알맞게 하였다. 수업시간에 새로 알게된 이미지 관련 태그와 논리적인 흐름에 맞게 마크업을 설계해나갔다.

새로 배웠던 점

<figure class="main-img">
  <picture class="main-img-cheese">
    <source media="(min-width:768px)" srcset="./src/assets/images/cheese-cookie.png" frameborder="0"
      alt="치즈가 쿠키했대 쉐이크" />
    <img src="./src/assets/images/cheese-cookie-img.png" alt="치즈가 쿠키했대 쉐이크" />
  </picture>
  <picture class="main-img-rice">
    <source media="(min-width:768px)" srcset="./src/assets/images/choco-rice.png" frameborder="0"
      alt="밥대신 라이스 쉐이크" />
    <img src="./src/assets/images/choco-rice-img.png" alt="밥대신 라이스 쉐이크" />
  </picture>
</figure>

• picture 태그를 사용하여 소스 태그와 srcset 속성으로 브라우저 크기별로 이미지를 교체해주는 방식을 사용하였다.
• 기본 img 태그로 폴백 디자인을 해주어 소스 태그의 이미지가 안불러와져도 기본 img가 불러와진다.

3. Sass

예전에 Sass 익스텐션을 사용하던게 있어서 npm run watch로 하지않고 그냥 익스텐션 아이콘을 눌러 실행했는데 자동적으로 컴파일 되어 만들어진 index.css가 이상한 경로에 설정되어 있는 줄도 모르고 작업을 이어나갔던게 화근이였다.

팀원들과 머지하는데 index.html과 index.css, index.map.css가 2개가 생긴 것을 볼 수 있었는데 내 잘못이었다.

왜 Sass?

오늘 사스를 직접 사용해보면서 알게된 점은 왜 사스는 사용하는지 조금을 알것 같다고 생각했다.

• 기존 css는 시멘틱 태그별로 내가 짠 css 를 주석으로 표시를 해줘야 구분이 갔는데, 사스는 클래스 이름만 규칙대로 잘 생성해주면 컴포넌트 부분으로 한번에 css를 볼 수있어 눈에 잘 들어왔다.
• 또한, 자주 사용하는 position이나 flex를 mixin으로 두어 간결하게 표현할 수 있어 코드가 깔끔해보였다.
• pxtorem을 function으로 설정해줘서 rem(24px) 이런식으로 직관적으로 사용할 수 있어서 편했다.
• 내가 css를 짜다가 오류가 생기면 컴파일 중지하고 오류를 알려줘서 오타나 스타일이 적용이 안되는 부분을 캐치하기 편했다.
• 변수사용이 $로 간결해서 좋았다.

4. CSS

이디야 시안에서 메인 이미지가 브라우저 크기를 줄여도 그자리에 있는 것을 보고 position 속성에서 어떤 것을 주었길래 가능할까 여러 시도를 해본 결과, position:relative 속성을 사용해주면 노멀 플로우로 자기 자리를 차지하면서 그 위치를 유지했다.

다만, picture 태그가 그 자리를 유지하여서 다른 레이아웃을 망칠 수 있었다.

그 해결책으로 picture 태그를 figure 태그를 사용하여 감싸주었다.

이 부분에서 마크업을 추가하는 사태가 발생한 것을 경험하면서 마크업을 조금 더 세세하게 짜야겠다고 생각했다.

figure 태그에 position:absolute 속성을 주어 이미지 전체를 붕 뜨게 하였다. 그렇게 하니 원하는 결과를 볼 수 있었다.