7/14(목)🌥 HTML/CSS 고정형

⭐️ HTML

⚡️ 논리적 마크업 설계

• 보여지는 것만을 생각해 table 등 레이아웃만을 고민한 마크업 순서는 접근성에 문제가 생김
• table을 데이터 테이블의 의미로 사용하는 것은 괜찮음

⚡️ form

• fieldset는 폼 태그 안의 여러 컨트롤과 label을 묶어주는 태그
• legend 태그로 부모인 fieldset를 설명해줌
• html5는 항상 위 태그들이 세트로!!!

⚡️ label

• 태그 내부에 input을 넣어 암묵적으로 연결할 수 있지만 for,id로 연결짓는게 좋다.

⚡️ placeholder 속성

• label과 달리 입력값에 대한 힌트를 알려주는 속성
• 해당 내용의 제목 보단 예시를 알려주는 느낌

⚡️ a 태그 새창열기 시 rel 속성

• noopener, noreferrer 지정하는 이유 찾아보기

⚡️ dl태그 정의형 목록 (discription list)

• dt, dd를 사용하여 1:1, 1:n, n:1 목록
• 다만 스크린리더에 혼란을 야기하므로 1:1 매칭으로 사용하는 것 권장
• div로 dt,dd 전체를 감싸는 것은 가능하다.

⚡️ img 태그 등 인라인 요소의 디폴트 갭 영역 발생

• img 태그에 display를 조정하거나 vertical-align : top 속성을 주어도 사라짐

---

⭐️ CSS

⚡️ text-indent 속성

• 패딩과 달리 박스 사이즈에 영향을 주지 않는다 (1줄 이상일 때 차이 발생)

⚡️ button 태그

• 박스 사이징의 디폴트 값이 border-box이다.
• 기본 스타일링의 차이가 심해 크로스 브라우징이 발생할 수 있다. (🔥form 관련요소)

⚡️ inline 요소인데 width가 적용되는 태그?

• input이나 button 등 인라인 요소지만 너비나 높이 지정이 되는 태그와 이유 알아보기

⚡️ margin 병합

• 마진 병합현상은 방해하는 요소가 있을 경우 발생하지 않는다.
• padding 이나 border 1px로 막는 경우가 있다.

⚡️ padding이 유리한 경우

• 고정 높이 값을 주어야 하는 경우가 아니면 padding이나 line-height로 지정하는 것이 좋다.

⚡️ background

• 다중 속성으로 선언 시 background-color 속성은 가장 마지막에 지정해주어야 함.
• 🔥 position 속성 값을 px로 주었을 때와 백분율로 지정했을 때의 결과가 다르다.
• size 속성을 사용해 배경 이미지의 크기를 조정할 수 있다.
• background : color image repeat position / size(숫자 값 연속 / 구분)

---

⭐️ Git

⚡️ 커밋 메세지는 상세하게 작성할 것

• enter를 이용해 추가적인 상세 내용을 작성할 수 있다. (본문)
• 상세 작성을 통해 다른 개발자도 이해할 수 있어야 한다.