211119 프론트엔드 스쿨 15일차

수업 전 말씀 (이호준 강사님)

• 개행의 목적이 먼저 정의되어야 한다. 디자인이 목적이면 span을 사용한다. 의미론적으로 쓰여야 하는 br이 디자인 목적으로 쓰이면 안된다.

• 코딩 테스트 - 알고리즘, 자료구조, 메모리 효율

  • 조급해하지 않기.
  • 먼저 배운 것을 소화하면서 코테를 진행하기. 멀리 보기.
  • 회사마다 난이도가 다르다.
  • 코테를 안보는 곳에서는 포트폴리오에 집중할 것, 프로젝트 단위의 어필이면 좋음.

• 프로젝트를 통해 보는 것

  • js 효율적인 코딩을 했는가? 고민했는가?
  • 서비스 되고 있는가?
    서비스를 운영하면서 느낀 점이 개발할 때 느끼는 점만큼 중요하다.
    
    

수업 내용 (이호준 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

과제 실습 - vending machine

• th, button은 자동 중앙 정렬이다.
  
  

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

과제 실습 - 위니브 로그인, 모달창

• 부모의 높이는 웬만해서는 지정하지 말 것. 컨텐츠의 높이는 자식의 높이에 종속. 부모의 높이는 자식들의 높이의 합이다.

• a>img 구조에서 img의 위치를 position으로 잡으면 normal-flow에서 벗어나서 앵커 태그는 자식 잃은 부모가 된다. img의 위치는 잡히지만 a는 위치가 없어서 탭 포커싱이 되지 않는다. 위치를 옮길거면 a에다가 position을 줄 것

• inline 요소에 position: absolute나 float을 줘도 block 취급된다.

• 한 줄짜리 짧은 문장에도 p태그 써도 된다. 마침표로 끝나는 문장에는 p태그 써도 된다.

• 의미가 없거나 디자인을 위한 거면 div, span을 사용한다.

• none이라는 id를 가진 요소가 생길 가능성을 고려해서 <a href="#none"> 사용보다는 <a href="javascript:void(0)"> 쓰기.
  href에는 자바스크립트 언어를 쓸 수 있다. void:(0)은 undefined을 반환하여 리로딩없이 현재 페이지가 유지된다.

• 스크린 리더기 이용자 입장에서 "로그인/회원가입" 이라는 문구가 나오고 바로 닫기 버튼이 나오면 어떤 내용인지 짐작할 수 없다.
  제일 마지막에 넣으면 너무 많은 컨텐츠를 듣고 나서야 닫기 버튼이 나와서 불편하다. 그래서 중간쯤에 넣는 것이 좋다.

• 전체가box-sizing: border-box인 상태에서는 button에 padding을 먹여도 button의 영역을 넓혀주지 못한다. box-sizing: content-box;을 따로 주면 padding의 넓이까지 button의 영역이 되서 클릭하기 용이해진다.

• 형제 선택자 예시 - 첫번째 li 제외하고 margin-top 주는 방법
  li+li : li 요소 바로 다음에 오는 li을 선택한다.
  첫번째 li앞에는 li가 없으니까 선택 대상에서 제외된다.

.cont-sns-login .list-sns li+li {
    margin-top: 10px;
}

• 접근성, 인식의 용이성 - 탭 포커싱
  label의 가상요소로 커스텀 이미지를 주고 input태그를 display:none;했기 때문에 tab으로 이동 시에 포커스가 가지 않는다. 그래서 스크린 리더기로 읽히지 않는 문제가 발생한다.
  

  • 해결법
    input에 포커스가 가면 label의 가상요소인 커스텀 이미지에 outline을 준다.

<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="label-hold">로그인 상태 유지</label>

/* 접근성 */
.form-login .inp-hold:focus+.label-hold::before {
    outline: 2px solid black;
    /* outline-offset: outline에서 border까지 5px의 공간이 생김 */
    outline-offset: 5px;
}

CSS 실무 테크닉

• 모바일 기기마다 select 스타일이 너무 다르기 때문에 모바일용은 스타일링 하지 않는 편이다.

• ir-wa : 중요 이미지 로딩에 실패해도 텍스트를 이용해 어떤 정보인지 제공해준다.

.ir_wa{
  display:block;
  overflow:hidden;
  position:relative;
  z-index:-1;
  width:100%;
  height:100%
}

새로 알게 된 내용

• 접근성에서 탭 포커싱도 고려해야 한다.

• 다음주 수요일 특강에 조은님이 오신다! 어떤 이야기를 해주실지 궁금하다. 조은님 글만 읽다가 직접 수업을 들을 날이 오다니 너무 기대된다.

과제

AWS 가입