멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

📚 float / flex 복습

• 카드UI 만들기 실습 → 프로필 영역 추가 → '새소식' 카드 리스트 실습
  • 피그마 참고해서 실습해보기

👆🏻 button 더 알아보기

• 사용자가 클릭할 수 있는 요소
• form 내부 뿐 아니라, 버튼이 필요한 곳에 배치 가능(더보기, 좋아요 등)

button 타입

• button: 기본 행동 없음. 클릭했을 때 아무것도 하지 않으며, JavaScript와 연결하여 사용함
  • 양식 제출용이 아니라면 타입을 꼭 button으로 지정해야 함
• submit: 서버로 양식 데이터 제출
• reset: <input type="reset">과 동일하게 초깃값으로 되돌림
• disabled: 누르거나 클릭하는 것을 막음(비활성화)
  • 필수 입력정보를 다 입력하지 않았을 땐 disabled, 입력한 후 해제 처리

<a> 와 <button>의 차이는?

	a	button
역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본 동작 없음 JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
키보드	엔터	스페이스, 엔터
주의	href 값 없이 JS로 동작하게 하면 안됨	JS로 동작

• 오른쪽 마우스 클릭했을 때 나오는 메뉴가 다름
• 마우스 오버, 포커스 되었을 때 <a>태그는 브라우저 창 하단에 url이 노출됨
• 태그에 따라 UX(user experience)가 다르며, 역할을 제대로 알고 사용해야함

💡 알고 넘어가기!

• 마우스 커서의 모양 변경을 위해 <a>태그를 사용해선 안됨
  • CSS의 cursor:pointer로 처리
• button focus가 예쁘지 않아서 outline을 숨기면 안됨
  • 스크린리더에서 읽히지 못하기 때문에 사용자에게 불편함을 줄 수 있음
• 누르는 효과를 주기 위해 button을 사용해선 안됨
  • CSS로 스타일링 하기
• li, img, span 등 다른 태그에 JS 기능으로 버튼처럼 만들면 안됨
  • 각 태그는 각자의 역할이 있으며 역할에 맞게, 시맨틱하게 사용해야 함

✨ Figma 특강

• 개발자를 위한 피그마 기초
• 실습
  • 기본 도형 만들기
  • 도형의 색상
  • 본격 도형 만들기
  • 안내선과 정렬
  • 텍스트 만들기
  • 이미지
  • 레이어와 그룹
  • 캐릭터 옷 입히기