멋쟁이사자처럼 프론트엔드스쿨 TIL (0404)📖

예제 페이지 마크업 구조 과제 피드백

나는 재현님께 직접적으로 피드백을 받지 못했지만 다른 분들 과제 보고 피드백 해주시는 것 + 질문한 것을 토대로 내 과제를 피드백 했다.
(굿노트로 너무 지저분하게 해서 컴퓨터로 다시 깔끔하게 정리했음. 그냥 처음부터 깔끔하게 할걸....😭 + 내일 추가)

HTML tag 알맞은 사용법

• nav 여러번 들어가도 됨. (다만, 너무 작은 것에는 쓰지 않는 것이 좋음)
• 주제가 있다면 section 사용하는 것이 좋다
• 의미 없이 디자인적으로 나눌 땐 div
• section 태그 안에는 heading tag가 되도록 들어가야 함
  (heading tag를 사용하고 UI에서 안보이게 설정하는 경우도 많음 -> 접근성과 웹 표준을 위해서)
• ul, ol의 자식 요소로는 li만
• 따로 노는 버튼 (ex.클릭하면 메뉴 펼쳐지는 것)은 article로 감싸기.
  (주로 footer 다음이나 main 다음에 작성)
• ul > li는 적어도 3개 이상일 때 사용
• 광고는 aside > a

form

• 필수로 작성하게 하고 싶을 때 required 속성 추가
• fieldset 은 form 안에서 section 처럼 그룹화 구획화 할 때 사용
• legend는 반드시 fieldset의 첫번째 자식으로.
• type은 올바른 데이터 입력을 요구하기 위해 id는 label과 연결하기 위해 name은 서버 전송할 때 key 값으로 주기 위해서
• input type="submit"과 button type="submit"의 기능적 차이는 없다.
  (CSS로 원활하게 꾸미고 싶다면 button type="submit" 선택)
• radio를 선택하지 않으면 제출 안되게 하는 법은 첫번째 input에 required 입력
• 예외적으로 dl > dt > dd 는 div를 허용

실습

google form 형식을 만들어 보자!

막힌 부분

• header 부분 보라색 띠 부분. (✅해결)
  ✅ 처음에 border을 사용해서 했으나 내가 원하는대로 모양이 나오지 않아 고민하다가 가상 클래스를 넣어 absolute로 상위에 위치시킨 후 header에 overflow: hidden;을 적용해 해결
• 다음 중 기술 면접 때 듣고 싶은 질문이 아닌 것은? 파트에서 datalist가 제대로 적용이 되지않았다. 밤이 늦어서 내일 다시 확인 하기로...