웹 페이지 따라 만들기 1

목표

웹 개발 종합반 과제에서 나온 웹 페이지를 지금까지 배운 내용을 토대로 처음부터 만들어보기

개발 진행 내용 기록

1. GitHub Repositories에 연결
   스파르타 푸드파이터 github

2. 상단의 foodcourt부터 양식까지 버튼 만들기

• <button> 내부에 문자를 넣은 뒤 style = backround = transparent; border = none;을 하여 문자로 보이는 버튼을 만들었다.

• 버튼들이 블록 요소가 되어 줄바꿈이 되지 않게 style = display: inline-flex;을 사용하여 인라인 요소로 묶었다.
  만약 반대로 블록 요소로 만들어야 한다면 style = display: flex;를 사용하면 된다.

• 이미지와 foodcourt가 세로 정렬이 하단으로 되어 목표와 다르게 표시되었다.
  이를 style = align-items: center;로 정렬하였다.
  align-items는 Flexbox 속성으로, Flex 컨테이너 내부의 자식 요소들을 세로 중앙 정렬한다.

값	설명	예시
stretch	기본값으로 자식 요소가 부모 높이만큼 늘어남	<img> 같은 태그에 적용 시 세로로 늘어남
flex-start	위쪽 정렬. 자식 요소가 위쪽에 붙음	위쪽에 정렬
flex-end	아래쪽 정렬. 자식 요소가 아래쪽에 붙음	아래쪽에 정렬
center	세로 가운데 정렬. 자식 요소가 중앙에 배치	가운데에 정렬
baseline	텍스트 기준선에 맞춰서 정렬	텍스트가 여러 줄일 때, 기준선을 맞춤

• hover문을 사용하여 마우스 커서가 버튼 위로 올라가면 색상이 바뀌게 하였다.
  hover는 마우스를 올렸을 때 발생하는 상태를 다룬다.
  .home_K:hover .home_text {color: blue;} 이 코드를 풀어쓰면
  home_K에 마우스를 올렸을 때 home_text의 상태가 파란색으로 변한 것이다.
  
  선택자:hover { 마우스를 올렸을 때 적용할 스타일 }

      /* 버튼의 기본 상태 */
      .home_text {
          color: coral;
          font-size: 18px;
          transition: color 0.3s ease;
      }
  
      /* 버튼 위에 마우스를 올린 경우의 상태 */
      .home_K:hover .home_text,
      .home_J:hover .home_text,
      .home_C:hover .home_text,
      .home_Y:hover .home_text {
          color: blue;
      }

• 텍스트 색상이 변경될 때 transition: color 0.3s ease;을 사용하여 디자인을 자연스럽게 만들었다.
  transition은 hover등으로 상태가 변경될 때 부드럽게 애니메이션을 준다.

• style = cursor:pointer;을 통해 버튼에 마우스를 올렸을 때 커서의 모양을 바꾸었다.
  이를 통해 '버튼을 조작할 수 있다'는 것을 시각적으로 인지할 수 있다.

값	설명
default	기본 화살표 모양
pointer	손가락 모양 (클릭 가능)
text	텍스트 입력 (I자 모양)
move	이동 아이콘 (네 방향 화살표)
not-allowed	금지 표시
wait	대기 중 (모래시계 모양)
help	도움말 (물음표 모양)

• 버튼을 클릭 시 정해진 주소로 이동할 수 있게 하였다.
  location.href를 통해 지정된 주소로 이동한다.
  JavaScript의 경우 위에서 아래로 읽기 때문에 html 요소가 생성되기 전에 동작하여 오류가 발생한다. 이것을 $(function () { }으로 감싸 html 요소가 모두 로드된 후에 코드가 동작할 수 있게 한다.