메인 페이지 인덱스 꾸미기

메인 페이지 인덱스 꾸미기

제 공부 메인 페이지 입니다. https://dongjin6539.github.io/web2023/

기존에 공부하기 전에 받았던 페이지를 자신의 것으로 수정해봤습니다!!!

 

 

기존 페이지 색상 바꾸기 

• 먼저 해당 부분에 코드 구성이 어떻게 되어있는지 확인을 해봐야합니다.
• 그러기 위해서 오른쪽 마우스 버튼를 누르면 검사가 나옵니다. 그것을 클릭해봅니다. 단축키는 F12입니다.
• 나오면 위와 같은 순서대로 해봅니다.
• 1번처럼 해당 버튼을 클릭하면 화면의 부분을 클릭할 수 있습니다.
• 2번처럼 화면에 알고 싶은 부분을 클릭을 해봅니다.
• 그러면 해당 부분의 코드가 나오고 밑에 css가 어떻게 되어있는지 나옵니다. 3번처럼 해당 부분의 css를 확인하고 3번의 오른쪽 위에 부분을 보시면 해당 폴더의 몇번째 줄인지 친절하게 나와있습니다.
• 그것을 확인하고 코드 파일을 열고 해당 부분의 css 폴더에 가서 스타일 속성을 바꾸면 스타일이 바뀌게 됩니다.

 

• 색상을 바꿔 보았더니 이러한 형식으로 바뀌게 됩니다.

 

메인 배경 바꾸기

• 첫번째 이미지가 기본 배경 이미지였습니다.
• 배경 이미지를 무료로 얻어서 포토샵으로 해당 페이지의 사이즈에 맞게 변경을 하고 해당하는 코드 부분에 넣었습니다.
• 스타일 속성은 background-image: url( );, background-repeat: no-repeat;, background-size: cover;, background-position: center;를 사용해줬습니다.

 

이렇게 페이지를 바꿔보았습니다.