6주차 TIL_미션과제 제출, js학습

월~수는 미션과제에 집중했던 것 같다.

4번 과제를 마무리하고, 초반 123번과제에서 뭔가 얼렁뚱땅 넘어갔다고 느낀 부분들을 다시 보았다.

 

사실 과제 1을 진행할 때만 해도, 내마음대로 만드는 게 아닌 요구사항과 figma에 맞춰 진행하는 게 익숙치않고 불편하기도 했다. 안되던 것들이 왜 그런지 알고 확인하는 매뉴얼?이 머릿속에 그려져 점점 속도가 붙었던 거 같다. 중간즈음부터는 문제가 생기면 position을 제대로 주었는지 확인하고, 작성한 display에 맞는 속성들을 준 건지, 구조상 특정 태그의 범위가 맞는지, 오타는 없는지 클래스명을 다시 확인하는 걸 기본으로 진행했다.

 

과제 2,3에서는 css의 background활용을 익힐 수 있었다. 초반엔 특정 태그에 배경이미지를 넣고 여러 방법으로 조정하였는데, 이미지를 위한 별개의 div태그를 주고 필요한 태그에 해당 div태그를 넣어 같이 효과를 주는 방법도 배웠다. 후자가 클래스명을 잘 준다면 html코드를 볼 때 보다 직관적으로 이해하기 좋다는 생각이 들었다.

 

4번 과제부터는 js파일이 함께 있었고, 난이도가 다소 있었다. 그래도 나름 재밌게 진행했던 거 같다. 이쯤부터는 과제 요구사항에 맞춰 해결해가는 게 뭔가 신나는 기분으로 진행되었다. 그래도 여전히 디테일(미세한 크기, 위치조정)이 어려웠다ㅜㅜ 요구사항을 완료해도 디테일잡는데에만 1~2시간은 더 걸린 것 같다. 

마지막 5번 과제가 파일개수도 많고, js가 클래스형으로 작성되어 있어 전체적인 흐름을 이해하기가 어려웠다.

왜 그렇게 작동하는지 이해하고 진행하고 싶은데, 그게 안되서 힘들었다.

다들 코드전체를 보기보다는 일단 요구사항에 맞춰 + 질의응답 게시판 내용을 참고해서 하는 것 같아

시간도 얼마 안남았고 마크업이 주목적인 과제이니, 일단 진행했으나 이 과정 자체가 너무 답답했다..

개인일정으로 과제4번까지 마무리짓고 텀을 두고 과제5번을 하였는데, 4번과제를 어떻게 했는지도 생각이 나지 않아 다시 열어보기도 하고 과제4와 5번이 같은 원리를 사용하는 게 맞는지 팀원분께 여쭤보기도 했다. 사실 아직도 5번 과제의 의문점들을 해결하지 못했다. pass되고나면 다른 분은 어떻게 작성했는지, 모범답안은 어떻게 진행했는지 꼭 확인하고 넘어가야겠다.

 

과제1~5번까지 진행하며 무엇보다도 헷갈렸던 position속성에 익숙해질수 있었다.

과제를 하다보면 구성을 이렇게 하는 게 좋은 방법이 맞나? 의문이 들때가 있는데,레퍼런스가 될만한 웹페이지를 참고하면 얻어갈 수 있는 게 있었다. 이번 과제의 경우, 클론코딩의 성격이 강해 figma파일에 나오지 않는 부분은 해당페이지에서 참고하며 진행하였다. 요구사항에 맞춰 마크업하는 과정을 익힐 수 있었고, HTML과 CSS만으로도 할 수 있는 다양한 기능들을 알게되는 과정이 즐거웠다:)

아래는 기억에 남는 부분과 과제를 진행하며, 기억해뒀다가 나중에 보기위해 정리해놓은 몇가지 내용이다.

---

 

과제를 진행하면서 가장 기억에 남는 부분은 WAI-ARIA였다. 모든이가 동일하게 편안한 경험을 하도록 많은 노력을 할 수 있구나 느꼈다. 전에 시각장애인분이 휴대폰 문자나 인터넷 등을 소리로 듣고 사용하는 걸 봤던 기억이 나서, 직접 이용해보고자 휴대폰으로 직접 TALK-BACK기능을 사용해봤다. 그런데 생각보다 복잡하고 계속 집중해 듣기가 힘들었다. 어떻게 내용을 전달할지, 중복내용이나 터치공간 등도 세세히 신경써야겠다는 생각이 들었다.

WAI-ARIA를 사용한 요소의 가시성 제어

1) (시각적으로 보이지만, 스크린리더가 읽지 않도록)

  해당 요소에 aria-hidden = "true"

 

2) 스크린리더에 읽히지만, 컨텐츠가 보이지는 않도록

.sr-only {

  overflow: hidden;

  position: absolute;

  clip: rect(0, 0, 0, 0);

  clip-path: polygon(0 0, 0 0, 0 0);

  width: 1px;

  height: 1px;

  margin: -1px;

  white-space: nowrap;

}

2)-1. 로고이미지(background로)만 보이고 클릭시 이동, 컨텐츠(텍스트)는 안보이지만 스크린리더에는 읽히도록

a태그로 링크를 주고 해당태그의 background로 이미지를 넣었다.
그리고 a태그안에 h1태그를 주고 h1태그의 클래스를 sr-only로 설정.

 

번호 클릭시 해당번호로 통화연결

일반 텍스트가 아닌, 링크요소로 번호를 넣고

tel: 프로토콜을 사용하였다.

 

메일 클라이언트 실행

이메일주소를 클릭하여 mail, outlook 등의 메일클라이언트가 실행되도록

mailto: 프로토콜을 사용하였다. 이 역시 링크요소로 넣고 href=" " 안에 프로토콜을 작성한다.

"mailto:메일주소?subject=제목" 으로 보낼 이메일주소와 제목을 자동설정할 수 있다.

기타 설정 및 자세한 내용은 아래 링크에서 확인가능하다.

참고-https://learn.microsoft.com/en-us/previous-versions/aa767737(v=vs.85)

 

css활용 - 배경 그라데이션

참고-https://pepepien.tistory.com/297

그라데이션 조합 사이트 모음

uigrdient 가 원하는 그라데이션색상을 검색해 사용하기 좋은 것 같다 느꼈다.

아직 많이 사용해보지 않아서 다른 사이트도 좀 더 둘러봐야한다.

링크의 보안관련 사항

https://velog.io/@mangozoo20/HTML-a-%ED%83%9C%EA%B7%B8%EC%9D%98-targetblank-%EC%86%8D%EC%84%B1-%EB%B3%B4%EC%95%88-%EC%B7%A8%EC%95%BD%EC%A0%90

[HTML] a 태그의 target="_blank" 속성 보안 취약점

 

---

그리고 모던 자바스크립트 딥다이브 책을 본격적으로 읽기 시작했다.

일단 진도에 맞춰 프로그래밍의 의미와 자바스크립트의 역사, 특징 등 기본적인 내용을 공부하였고, 이 내용은 조금 더 다듬어서 포스팅할 예정이다. 

개념을 먼저 머릿속에 도식화하고 정확히 모르는 단어 하나하나 정리해가며 최대한 기술부채없이 진행하려 했다. 물론 찾아봐도 너무 모르겠는 개념이면 일단 흐름이 끊기지 않도록 패스했다. 스터디 때 질문하거나 다음 반복학습때에 공부할 내용으로 체크만 해두었다.

개인적으로 책으로 학습하는 방식이 내겐 잘 맞았다. 강의로 학습할때에는 틀어놓으면 흐르는 방식이다보니, 내가 명확히 아는 건지 모르는 건지 정확히 집지 못한 채 넘어가게 되고 정보의 구멍이 뚫린 채로 진행되는 기분이었다. 이를 방지하기 위해 따로 정리를 하지만, 일정이 바빠지면 꼼꼼하게 이루어지지 않을 수 있고 정리하다가 정확히 모르는 게 많아 다시 공부할때도 있었다. 책으로는 맥락상 이해하는 부분에서 -> 단어 하나하나 명확히 정리하고 나니 좀더 머릿속에 잘 들어오는 느낌이엇다. 그리고 내용에 따라 나의 속도로 책을 읽으며 머릿속으로 도식화하고 이걸 블로그에 정리하는 게 도움이 많이 되었다.