카테고리 없음
네이버의 이미지 HTML 소스 분석
Pink
2022. 2. 14. 23:38
BLOG
개별
<!-- 요소, 이미지, 기본 -->
<!-- 내용, 원본 크기 -->
<!-- 위치, 이미지, 기본, 중앙 정렬 -->
<!-- 모듈, 이미지 -->
<!-- 링크 (확대) -->
<!-- 주소, 너비, 높이 -->
<div class="se-component se-image se-l-default" id="SE-65c09edd-cc8c-4e75-a6df-1f28ba287fdc">
<div class="se-component-content se-component-content-normal">
<div class="se-section se-section-image se-l-default se-section-align-center" style="max-width:458px;">
<div class="se-module se-module-image" style="">
<a class="se-module-image-link __se_image_link __se_link" style="" onclick="return false;" data-linktype="img" data-linkdata="{"id" : "SE-65c09edd-cc8c-4e75-a6df-1f28ba287fdc", "src" : "https://postfiles.pstatic.net/MjAyMTA3MDlfMTMx/MDAxNjI1ODM3OTkyNjYx.cNURcGQDNDfcQAVuWL3iDVxP10LNbrAIXdBIu0UVOxEg.mGYQbs7z_ej6KbAUShL9xKqtbOWlUYSgO6st6G67PIcg.JPEG.(NAVER_ID)/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EB%A5%BC_%EC%9C%84%ED%95%9C_%EC%84%A0%ED%98%95%EB%8C%80%EC%88%98.jpg", "originalWidth" : "458", "originalHeight" : "588", "linkUse" : "false", "link" : ""}" area-hidden="true">
<img src="https://postfiles.pstatic.net/MjAyMTA3MDlfMTMx/MDAxNjI1ODM3OTkyNjYx.cNURcGQDNDfcQAVuWL3iDVxP10LNbrAIXdBIu0UVOxEg.mGYQbs7z_ej6KbAUShL9xKqtbOWlUYSgO6st6G67PIcg.JPEG.(NAVER_ID)/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EB%A5%BC_%EC%9C%84%ED%95%9C_%EC%84%A0%ED%98%95%EB%8C%80%EC%88%98.jpg?type=w966" data-lazy-src="" data-width="458" data-height="588" alt="" class="se-image-resource egjs-visible">
</a>
</div>
</div>
</div>
</div>
그룹
<!-- 요소, 그룹 이미지, 콜라주 -->
<!-- 내용, 자동 크기 -->
<!-- 위치, 이미지, 기본, 중앙 정렬 -->
<!-- 그룹 이미지 뷰어 -->
<!-- 그룹 이미지(imageGroup) 컨테이너 -->
<!-- 그룹 이미지 내용, 2장짜리 -->
<!-- 모듈, 이미지 -->
<!-- 링크 (확대), 너비, 높이 -->
<!-- 주소, 너비, 높이 -->
<!-- 모듈, 이미지 -->
<!-- 링크 (확대), 너비, 높이 -->
<!-- 주소 -->
<div class="se-component se-imageGroup se-l-collage">
<div class="se-component-content se-component-content-fit">
<div class="se-section se-section-imageGroup se-l-collage __se-component" id="SE-86b7662b-3d86-4a07-aa13-5a8722e37b02">
<div class="se-imageGroup-viewer">
<div class="se-imageGroup-container">
<div class="se-imageGroup-item se-imageGroup-col-2">
<div class="se-module se-module-image" style="width:50.113104670951124%;">
<a id="SE-8dce08eb-1211-444a-a3c5-821a9e54540e" class="se-module-image-link __se_image_link __se_link" onclick="return false;" data-linktype="img" data-linkdata="{"id" : "SE-8dce08eb-1211-444a-a3c5-821a9e54540e", "src" : "https://postfiles.pstatic.net/MjAyMTA2MjlfMzgg/MDAxNjI0OTc3MzE0MjIw.JecMtky8nIk3ZOPngs_PPhoiKfKaRLxWlYxZ4YAZNAMg.t9pzt6U33BKz_04DGPFk5w_up3TNUSaJIY3TwFbRAvQg.JPEG.(NAVER_ID)/x9791191600018.jpg", "originalWidth" : "799", "originalHeight" : "1042", "linkUse" : "false", "link" : ""}" area-hidden="true">
<img src="https://postfiles.pstatic.net/MjAyMTA2MjlfMzgg/MDAxNjI0OTc3MzE0MjIw.JecMtky8nIk3ZOPngs_PPhoiKfKaRLxWlYxZ4YAZNAMg.t9pzt6U33BKz_04DGPFk5w_up3TNUSaJIY3TwFbRAvQg.JPEG.(NAVER_ID)/x9791191600018.jpg?type=w966" data-lazy-src="" data-width="799" data-height="1042" alt="" class="se-image-resource egjs-visible">
</a>
</div>
<div class="se-module se-module-image" style="width:49.886895329048876%;">
<a id="SE-33e987a4-bdeb-44fa-b719-f0f6236e48e3" class="se-module-image-link __se_image_link __se_link" onclick="return false;" data-linktype="img" data-linkdata="{"id" : "SE-33e987a4-bdeb-44fa-b719-f0f6236e48e3", "src" : "https://postfiles.pstatic.net/MjAyMTA2MjlfNTIg/MDAxNjI0OTc2NjYwNDE4.uWctmGGr-oQ3OtxBVyHIeR26uvkcJQe0ywS6MGOI3_Ug.gA7uxr6-bplFw2icK35d4WzZEf4_BZTxxbyoSz08EXYg.JPEG.(NAVER_ID)/x9788966262151.jpg", "originalWidth" : "458", "originalHeight" : "600", "linkUse" : "false", "link" : ""}" area-hidden="true">
<img src="https://postfiles.pstatic.net/MjAyMTA2MjlfNTIg/MDAxNjI0OTc2NjYwNDE4.uWctmGGr-oQ3OtxBVyHIeR26uvkcJQe0ywS6MGOI3_Ug.gA7uxr6-bplFw2icK35d4WzZEf4_BZTxxbyoSz08EXYg.JPEG.(NAVER_ID)/x9788966262151.jpg?type=w966" data-lazy-src="" data-width="458" data-height="600" alt="" class="se-image-resource egjs-visible">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/data" class="__se_module_data" data-module="{"type":"v2_imageGroup", "id" :"SE-86b7662b-3d86-4a07-aa13-5a8722e37b02", "data": { "layout" : "collage" }}"></script>
</div>
CAFE
개별
그룹
<!-- 요소, 부분 이미지(imageStrip) 1, 부분 이미지 2, 콜라주 -->
<!-- 내용, 별도 크기 -->
<!-- 위치, 이미지, 기본, 중앙 정렬 -->
(그룹 이미지 뷰어 X)
<!-- 그룹 이미지 컨테이너, 2장짜리 -->
(그룹 이미지 내용 X)
<!-- 모듈, 이미지 -->
<!-- 링크 (확대), 너비, 높이 -->
<!-- 주소 -->
<!-- 모듈, 이미지 -->
<!-- 링크 (확대), 너비, 높이 -->
<!-- 주소 -->
<div class="se-component se-imageStrip se-imageStrip2 se-l-default" id="SE-1b28ef6e-b51e-4084-8167-ef42358b5398">
<div class="se-component-content se-component-content-extend">
<div class="se-section se-section-imageStrip se-l-default">
<div class="se-imageStrip-container se-imageStrip-col-2">
<div class="se-module se-module-image" style="width:49.63141555193838%;">
<a class="se-module-image-link __se_image_link __se_link" style="" onclick="return false;" data-linktype="img" data-linkdata="{"id" : "SE-14881ef2-1f57-497b-9b8f-f1c2f961485c", "src" : "https://cafeptthumb-phinf.pstatic.net/MjAyMjAyMTJfMjMg/MDAxNjQ0NjcxODMzODQ4.RwWsfb_gRdaDV96SZRA4mjLEK1cI0AYAQUbtd88u1hIg.T6ediTfmxxC6wfuCBglCybBj1LU3BAJOSpWIJtAmc2Ug.PNG/%EC%8B%A4%EB%B6%81%EA%B0%A4_%EB%A9%94%EC%9D%B8_10.png", "originalWidth" : "308", "originalHeight" : "397", "linkUse" : "false", "link" : ""}" area-hidden="true">
<img src="https://cafeptthumb-phinf.pstatic.net/MjAyMjAyMTJfMjMg/MDAxNjQ0NjcxODMzODQ4.RwWsfb_gRdaDV96SZRA4mjLEK1cI0AYAQUbtd88u1hIg.T6ediTfmxxC6wfuCBglCybBj1LU3BAJOSpWIJtAmc2Ug.PNG/%EC%8B%A4%EB%B6%81%EA%B0%A4_%EB%A9%94%EC%9D%B8_10.png?type=w1600" alt="" class="se-image-resource">
</a>
</div>
<div class="se-module se-module-image" style="width:50.368584448061625%;">
<a class="se-module-image-link __se_image_link __se_link" style="" onclick="return false;" data-linktype="img" data-linkdata="{"id" : "SE-1ae5680d-8740-4032-bbeb-24ec6cf09a72", "src" : "https://cafeptthumb-phinf.pstatic.net/MjAyMjAyMTJfMTE2/MDAxNjQ0NjcxODMzODQ4.JgE0J_lHAVPH7ixLjaSVUVJGwKauhAYCpXg8iwYtQtAg.YCHwI2tV0arpBkHNXbzFjlJxvnSdIfIJKR-s58F85b4g.PNG/%EC%8B%A4%EB%B6%81%EA%B0%A4_%EB%A7%88%EC%9D%B4%EB%84%88_10.png", "originalWidth" : "311", "originalHeight" : "395", "linkUse" : "false", "link" : ""}" area-hidden="true">
<img src="https://cafeptthumb-phinf.pstatic.net/MjAyMjAyMTJfMTE2/MDAxNjQ0NjcxODMzODQ4.JgE0J_lHAVPH7ixLjaSVUVJGwKauhAYCpXg8iwYtQtAg.YCHwI2tV0arpBkHNXbzFjlJxvnSdIfIJKR-s58F85b4g.PNG/%EC%8B%A4%EB%B6%81%EA%B0%A4_%EB%A7%88%EC%9D%B4%EB%84%88_10.png?type=w1600" alt="" class="se-image-resource">
</a>
</div>
</div>
</div>
</div>
</div>