[웹개발 프로젝트] 1. 프론트엔드 디자인

이번 주제는 대전 맛집 추천 웹사이트에 대한 제작 과정이다.

아래 사이트에 방문하여 마음에 드는 웹사이트 디자인의 템플릿을 다운로드한다.

Foodhut Free Website Template | Free CSS Templates | Free CSS

www.free-css.com

선택한 디자인 ( 테마 : 음식 )

로고가 마음에 들어서 안에 text만 프로젝트 주제와 맞게 변경하였다.

step 1. ctrl + shift + c 키를 눌러 로고에 마우스를 올리면 html코드가 어디있는지 알 수 있고 개발자도구( F12 )를 통해 텍스트를 변경하면서 적용해본다.

step 2. html 코드를 복사하여 vscode에서 ctrl + f에 붙여넣기 해서 코드 위치를 찾아낸다.

step 3. 로고 스타일을 원하는 대로 수정한다.

step 1을 이용하니 img파일로 되어있다는 것을 알 수 있고 src를 보면 이미지 파일의 경로를 알 수 있다.

파일에서 Food Rank를 검색하여 위 코드를 찾을 수 있었고 햐얀색 글씨가 텍스트임을 알 수 있다. 원하는 대로 수정한 뒤 저장하면 된다.