👉 velog: https://bit.ly/3tRm4Ce
2. padding으로 요소들의 크기를 지정하면 좋다.
소속된 요소들의 크기가 변하거나 추가되어도 유연하게 유지보수가 가능하기 때문이다.
단!! <a>
태그의 크기를 조정할 때 padding은 주의해야 한다. 다른 곳까지 클릭이 될 수 있기 때문이다.
6. [float]
- 가상 요소는 기본적으로 inline 요소라서 너비/높이 지정이 불가함 > 하지만, float 설정을 하게 되면 inline-block으로 바뀌어 높이/너비 지정이 가능해진다.
- float을 사용했을 경우는 margin으로 조정(float은 inline-block이니까)
- float을 부모에게도 주면, 자식들이 다 float이어도 자식을 알아본다.
2. close 닫기 버튼을 position을 주는 이유: 스크린리더가 가장 나중에 읽도록! 모달 맨 위에서 제목 다음으로 바로 닫기가 읽히면 시각장애인분들이 당황할 수 있다. html에서도 가장 마지막 식에 작성한다.
5. input은 항상 label을 사용하고, 숨길 시 hidden으로 설정한다!!!
10. section 꼭 안에 h2 또는 h3을 써서 제목을 달아줘서 영역을 확실하게 구분하고, 눈에 보일 필요가 없다면 display: hidden으로 가리기
- 개인 작업: 모듈식 작성 --> 레이아웃 잡고 디자인 구현
- 팀 단위 작업: 리더가 모듈 작성하고, 나머지 팀원들은 각자의 할당량 작성하고, 추후 모듈을 받으면 활용하여 디자인 구현 완성하기
input은 css만으로 디자인 구현을 하기 어렵다. 특히, firefox를 제외하고 커스텀 효과가 나타지 않는 브라우저가 대다수이기 때문이다. 그래서 button으로 html을 마크업하고 css를 적용하는 방법으로 문제를 해결할 수 있었다. 아직 JS를 배우지 않았기 때문에 디자인 커스텀만 해놓았다.
.txt-ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}