반응형에 대한 몇가지 질문입니다.
1. mustoryart.com 의 sub 메뉴의 body-header 부분에 들어가는 이미지의 사이즈
: 백그라운드 이미지로 넣어 사이즈별로 조절하고자했으나 background-size의 cover로 조정할 경우 잘려나가는 부분이 없었으면 합니다.
현재 들어간 이미지의 원 사이즈는 1200*300px 이고 sub_wide에서는 이 비율을 유지하고있으나 900px이하가 되면 이마저도 잘리는 상황입니다.
또 narrow에서도 width:100% 여도 한참 잘립니다. 되도록이면 이미지의 가로는 100%로 출력하고싶습니다. 이럴경우 background의 방법 이 맞는 것인지, 다른방법이 나을지 고민입니다. 그래서 제가 생각한 방법은
- body-header의 박스사이즈를 반응형으로 변형 (display:flex..?)
- 이미지 변형을 자바로 하는경우
<script src="picturefill.js"></script>
<script src="matchmedia.js"></script>
이 두가지를 생각해 봤는데 제가 display :flex를 해봤을땐 효과가 나타나지않습니다 ㅠ
2. 검색포털에 등록하기위해 포털 검색 로봇코드를 인덱스에 등록했습니다.
그랬더니 카카오톡등 링크에뜨는 썸네일이 마음대로 되지않습니다.
<!--네이버 로봇 메타-->
<meta name="robots" content="index">
<meta property="og:type" content="website">
<meta property="og:title" content="뮤스토리 미술학원 MUSTORY ART">
<meta property="og:description" content="뮤스토리 미술학원입니다. 뮤스토리아트, 뮤스토리 미술학원, mustory">
<meta property="og:image" content="http://www.mustoryart.com/_images/step1-1.jpg">
<meta property="og:url" content="http://www.mustoryart.com/">
<!--네이버 로봇 메타-->
이렇게 적용할경우 어떤 문제때문에 제가 원하는 이미지가 안뜨는 것인가요?
-