수업 필기

목차
1. HTML / CSS
2. 개발자 팁
3. QnA

1. HTML / CSS

1. inline 요소에서는 rotate 불가능하기에, block이나 inline-block으로 바꿔야 한다.( CSS )
2. rotate가 되면 width와 height의 기준이 달라질 수 있으니, 실행하면서 수정해야함 ( CSS )
3. button은 inline-block 요소이기 때문에 컨텐츠의 크기만큼 늘리기 위해서는 width: 100%;를 넣어야함 ( CSS )
4. input태그의 min, step은 웹 접근성을 더욱 향상시켜준다.(HTML)

<input id="input-money" min="1000" step="1000" type="number" placeholder="입금액 입력">

5. input태그는 label태그와 거의 함께 사용하며, 이를 통해 웹 접근성을 향상시킬 수 있다. (HTML)

<label for="input-money" class="a11y-hidden">금액 투입(단위:원)</label>
<input id="input-money" min="1000" step="1000" type="number" placeholder="입금액 입력">

6. overflow-y: auto; : y축에 스크롤 생기게 하는 속성 ( CSS )

ul {
  background: #eae8fe;
  border-radius: 5px;
  border: 1px solid #bdbdbd;
  overflow-y: auto;
  padding: 12px;
}

7. max-width: calc(100% - (97px * 2)); : 최소 넓이를 조절하는 속성으로, 해당 예제는 양 옆 마진이 97px은 있도록 고정해준다. ( CSS )
   
   
8. radio태그끼리는 같은 name으로 묶어 사용하는 것이 웹접근성에 이롭다. (HTML)

<input class="custom-radio" id="radio1" name="radio" type="radio"><label for="radio1">라디오1</label>
<input class="custom-radio" id="radio2" name="radio" type="radio"><label for="radio2">라디오2</label>

9. 분기점 : 반응형이 나타나는 지점

2. 개발자 팁

1. 코딩 테스트 볼때 웹접근성까지 고려 할 필요는 없지만, 해서 나쁠건 전혀 없다.(시간 여유가 가능하면)
2. 실제 브라우저 화면(모바일 폰마다) 100%다르기 때문에 테스트 많이 해볼 것을 추천
3. 작업을 하는데 있어 구조를 잡고 천천히 꾸준히 하는 것이 제일 중요

3. QnA

Q. button태그 안에는 왜 span태그만 들어가야 하는가?
A. buttton은 인라인 블록 요소라서 span만 들어간다. p태그가 들어가면 마크업 상에 오류가 발생함