닫기
×

사용설명과 팁

[팁] html 사용법-이미지를 넣을 때

페이지 정보

작성자 최고관리자 댓글 0건 조회 451회 작성일 19-05-09 21:06

본문

cmake는 부트스트랩을 이용한 반응형 사이트 입니다

아래 링크에서 부트스트랩에 대한 이해를 조금이나마 파악해 두시면 편리합니다


https://getbootstrap.com/ 

 

cmake는 좀더 전문적으로 사이트를 꾸밀 수 있도록 

html 를 입력 할수 가 있습니다


이미지를 넣는 방법을 알려드리자면

아래 소스를 복사해서 이미지 경로만 수정해서 등록하시면 됩니다


<div class="d-block">

<a href="링크"><img src="이미지경로" class="w-100"></a>

</div>


만약 모바일 이미지와 pc이미지를 다르게 하고 싶다면


<div class="d-block">

<a href="링크">

<img src="모바일 이미지경로" class="w-100 d-block d-md-none">

<img src="pc 이미지경로" class="w-100 d-none d-md-block">

</a>

</div>

 

위처럼 등록 하시면 됩니다


만약 링크가 필요 없다면 <a href="링크"> </a> 를 제거후 등록하세요



간단하게 요약한다면

위 class 에서 d-block박스 보임 이라고 생각 하시면 될것 같습니다

d-none박스 감추기 라고 생각 하시면 됩니다


위 소스의 모바일 이미지 경로 에서 class 를 보시면

d-block d-md-none  

(부트스트랩은  모바일 우선으로 스타일을 지정 )

모바일사이즈 (가로화면 768px이하) 에서는 보이며 md (가로화면 768px 이상) 에서는 감춘다는 뜻 입니다


반대로

pc 이미지경로 일경우 

d-none d-md-block .. 

모바일사이즈 (가로화면 768px이하) 에서는 보이지 않으며 md(가로화면 768px 이상) 에서는 보인다는 뜻 입니다


w-100 은 이미지 사이즈를 가로 100% 로 보이도록 한다는 뜻이며

그외에 img-fluid 를 쓸 수가 있는데 

이 뜻은 

이미지 가로 사이즈가 768px 인 이미지의 경우 

화면사이즈가 1000px 일때 이미지 사이즈는 768px 를 그대로 유지하며

반대로 화면사이즈가 500px 일 경우 이미지는 화면 사이즈에 맞게 500px 로 보인다는 뜻 입니다


img-fluid

이미지 가로 사이즈 보다 화면 사이즈가 작을 때 이미지는 가로 100%로 보이며

이미지 가로 사이즈 보다 화면 사이즈가 클 때 이미지 원본 유지


w-100

무조건 화면에 이미지 크기 맞춤 (가로 100%)




 

 


 

댓글목록

등록된 댓글이 없습니다.