관리 메뉴

웹개발자의 기지개

[CSS] 네이버 스마트 에디터 이미지 추가시 반응형 이미지 형태로 수정하기 (max-width 값 먹이기) 본문

웹퍼블리싱/CSS

[CSS] 네이버 스마트 에디터 이미지 추가시 반응형 이미지 형태로 수정하기 (max-width 값 먹이기)

http://portfolio.wonpaper.net 2021. 11. 5. 02:25

필자는 에디터로 네이버스마트를 거의 대부분 활용하고 있는데, 반응형 코딩상에서 에디터로 이미지를 추가하면 반응형 형태로 이미지 크기 가변적으로 나오도록 하고 싶었다.

 

원래 에디터가 이미지를 올리면 자연히 그 이미지 자체의 크기 그대로 화면에 표시되기 때문에, 반응형 코딩상에서는 그 이미지 크기가 그대로 고정되어 버려서 문제가 발생된다.

 

결국 네이버 에디터로 올린 이미지에도 css 를 먹여서, max-width:100% 코드를 먹이는 게 관건이다.

 

아래 파일에서  CSS 클래스를 추가해 주도록 하자.

 

/smarteditor2/css/ko_KR/smart_editor2_in.css

 

.se2_inputarea img {max-width:100%;}
Comments