[HTML][CSS][그누보드]홈페이지 index 상단 이미지 적용 시 고려할 사항

어떤 이미지를 홈페이지 index 상단 사진으로 적용하려고 한다.

그러면 전체 이미지를 전부 쓰는 것은 불가능.

이미지를 넣는 크기(보통 가로길이를 1920에 맞추는게 시각적으로 이쁨) 를 미리 정하고 그만큼만 잘라내서 써야한다. 그래야 해상도도 안 깨지면서 예쁘게 구성됨

 

 

1. pixabay에서 가로길이 1920 이미지다운

2. 알씨로이미지 자르기 (가로길이: 1920, 확장자는 jpg안 먹으니 png나 gif를 사용해야한다.)

3. 이미지파일은 filezilla로 서버에 올려야함

4. wrapper로 감싸서 1200px로 맞추지 말고, 가로길이가 화면에 꽉차게 구성

 

ex)

#img-banner{width: 100%; max-width: 1920px; margin: 0 auto;}

 

 

 

 

이미지 집어 넣을 때 상대경로 적지말고, 절대 경로를 적어주자. 그렇지 않고 상대경로 ./를 적으면 head나 tail 같은 경우 서브페이지로 들어갔을 때 경로가 달라져버려 액박이 뜨기 때문!

 

ex)

<img src ="https://oopshug.cafe24.com/test/img/android-main.png" style="width:233px">