[국비지원] 6일차 수업 - 개인 작업

 

오늘의 수업

 

오늘 수업 내용과 과제는 그동안 배운 것을 바탕으로 직접 웹페이지를 만들어보는 것이었다.

 

나는 프레드 피자(https://www.fredpizza.co.kr/) 사이트의 디자인을 바탕으로 클론 코딩을 해보려고 한다.

 

총 5가지의 메뉴를 만드려는데,

 

1. 메인 화면의 자동 슬라이드 바

2. 피자의 이미지를 선택하면 이름과 큰 사진을 출력하고, 이전/다음피자로 움직일 수 있는 버튼

3. Select의 값을 받아와 해당 value에 맞는 사진을 출력하는 메뉴

4. 게시판 형식을 띈 메뉴

5. jquery를 사용한 클릭 시 애니메이션이 동작하는 메뉴

 

이 중 2번은 배운 내용으로 구현하였으나 피자의 이미지를 클릭하면 index()로 index를 알아낸 후 바로 이전/다음 버튼을 누르게 되면 그 이후의 숫자가 순차적으로 1씩 증감하는 게 아니라 튀어버리는 문제가 있어서 수정이 필요하다.

 

4,5 번은 디자인적으로 개선이 더 필요하다고 느끼고

 

1,3 번은 아직 배우지 않은 부분이기 때문에 검색을 통해서 구현해보려고 한다,

 

 

새로 배운 내용 정리

 

property : css의 속성값을 의미한다.

div { width : 100% } 에서 속성은 width이다.

 

atttribute : html 태그의 속성값을 의미한다.

<image src ="" alt=""> 에서 src와 alt가 속성값이다.

 

가상클래스 :  별도의 class를 지정하지 않고도 지정한 것처럼 선택할 수 있는 것

(:first-child)

 

가상요소 : 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능한 것

(::first-letter , ::after)