day 14 -15

 

 

* itronics 과제

1. fixed버튼 만들기 (스크롤 연동 fade-in, fade-out, 사라졌을 때 링크도 먹지 않아야 함)

2. 헤더 li hover시, 개별로 down (layout02.css별도로!) 

   만들기는 했지만 아직 이해 X, 이해할 때까지 확인할 것

 

 

 

---

 

 

* device resolution

>> 사용자 디바이스 환경에 따른 제작 고려

 

 

• 웹서버 연결 관련

- 개인이 웹서버를 사용하기 위해서는 고정ip를 가지고 있어야 함.

- ip 는 고정/유동

 

- 웹서버 대여 

    - (국내) cafe24, gabia, dothome

    - (해외) aws(amazon web service)

 

- 웹서버 종류

 - apache, php, mysql (전통방식, 무료)

 - MERN, js 연동 사용

 - 현재 실무에서는 php. spring(jsp) 등을 주로 사용

 

 

• php 사용하기

     - 처음 main page 주소는 127.0.0.1 / http://localhost/

     - visual studio에서 사용하기

 

★

open with live server로 창을 확인하면 다 깨진 화면이 나옴, 그럴땐 

http://127.0.0.1:5501/... >> :80 으로 변경하거나 아예 생략해도 ok (기본값으로 설정)

live server에서 작업할 때 저장하면 바로 바뀌는 건 안되고 따로 새로고침해서 변경사항 확인해야 함!

 

★

php언어 <? ?> 서버프로그램에서 html 수정, 추가

>> 작성 시 띄어쓰기 동일하게 주의! 띄어쓰기 안맞으면 경로 에러남!

 

★

폴더생성시 경로 변경 ../ + ../

header.html 이나 index.html 파일에 연결시킨 경로도 모두 수정해줘야 함! ctrl+D로 한꺼번에 수정!

파일정리를 좋게 할 수는 있지만, 링크경로를 일일히 지정할 때 번거로움이 있음~

 

 

 

 

* 페이지 연결 과제

 - 헤더에 연결된 링크페이지 샘플 만들기 + 페이지 연결 제대로 작동하는지 확인하기

 

 

 

 

* 참고 사이트

 

- http://fff.cmiscm.com/#!/main

Form Follows Function

>> canvus 기반의 웹사이트

 

 

- https://michalsnik.github.io/aos/

AOS - Animate on scroll library

>> scroll animation 적용하기