6월 27일 - HTML/CSS 프로젝트 여섯째날

모두들 열심히 해주어서, 특히 나 (?), 오늘 CSS 작성까지 마칠 수 있었다.

오전에는 덜 한 css 작업과 함께 필요한 마크업을 수정하였다.

메인 페이지에 각자가 작업한 페이지들을 연결시킨 뒤, 다같이 화면공유를 하여 디테일한 css 를 수정하였다.

그리고 scss 로 옮기는 작업을 하기 위해 detectvie_2 레포를 모두와 공유하였다.

 

포크를 떠오면 내 주소만 연결되어 있는 것이여서, 만든 사람의 주소를 연결시켜줘야 한다.

 

프로젝트를 하며 Git 을 사용하는 방법에 대해서는 50% 정도 익숙해진 것 같은데, 여전히 개념이 탄탄하지 않아 git 으로 안해본 무언가를 하려면 누군가의 도움이 필요하다.

git remote -v
git remote add 주소
git branch -a
git remote update
git switch dev
git branch 작업할 브랜치명

 

 

📃 오늘 한 것 📃

 

 

🎈 회원가입 페이지 접근성 개선

<label for="user-id" class="labels">
	아이디
    <sup class="accent-new" aria-hidden="true" aria-label="필수입력사항">*</sup>
</label>

aria-hidden="true" 값을 주어 스크린리더가 별표를 읽지 않게,

aria-label="필수입력사항" 을 입력해 스크린 리더가 필수입력사항이라고 읽게 해주었다.

 

 

🎈 CSS 를 SCSS 로 다시 작성하기

 

먼저 footer 영역부터 믹스인을 사용해 간결하게 수정하는 작업을 하였다.

 

@mixin flexbox(
    $direction: row,
    $justify: flex-start,
    $items: stretch,
    $wrap: nowrap
) {
    display:flex;
    flex-flow: $direction $wrap;
    justify-content: $justify;
    align-items: $items;
}

플렉스박스 믹스인을 설정해, 이제는 주석이 된 첫번째 사진 3줄을 두번째 사진인 단 한줄로 바꾸었다.

 

 

 

피그마에서 자주쓰는 속성들, 우리가 themes 로 설정해주었어햐 했던 값들을 가져올 수 있었다.

글씨체, 글씨 크기, 굵기, 줄간격 등을 직접 적어줘야 했는데, 오른쪽 변수값을 이용해 한 줄로 바꿀 수 있었다.

 

이 외에도 scss 의 큰 장점인 중첩을 코드로 작성해보지 못해 아쉬운 마음이 든다.

 

---

깃에 push 까지 끝

 

git switch heeso           // merge 해서 최신 버전의 내 브랜치로 이동
git push origin heeso      // 내 브랜치에 push 시키기 . origin 인 이뉴는 내가 만들어서

push 한 다음에 git 에 들어가서 main 이 아닌 dev 에 pull request 를 보내면 끝!