Want
2017-12-04 02:06
조회: 1,318
추천: 3
답변입니다 (개행되지 않는 경우 / 개행되는 경우)*개행되지 않고 옆으로 나열되는 경우 <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"> <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"> <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"> 2. <span> 태그 사이에 이미지를 넣는 경우 <span><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></span> <span><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></span> <span><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></span> 3. <div> 태그 혹은 <span> 태그의 style 내부 속성으로 display:inline-block 으로 설정하는 경우 <div style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></div> <div style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></div> <div style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></div> <span style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></span> <span style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></span> <span style="display:inline-block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></span> 4. <div> 태그 혹은 <span> 태그의 style 내부 속성으로 display:table-cell 로 설정하는 경우 <div style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></div> <div style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></div> <div style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></div> <span style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></span> <span style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></span> <span style="display:table-cell;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></span> *~ -------------------------------------------------- ~* *개행되어 밑으로 넘어가는 경우 1. <br> 태그가 껴있는 경우 <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"><br> <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"><br> <img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"><br> 2. <div> 태그 사이에 이미지를 넣는 경우 <div><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></div> <div><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></div> <div><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></div> 3. <div> 태그 혹은 <span> 태그의 style 내부 속성으로 display:block 으로 설정하는 경우 <div style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></div> <div style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></div> <div style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></div> <span style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg" style="width:100px; height:100px;"></span> <span style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg" style="width:100px; height:100px;"></span> <span style="display:block;"><img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i13720578439.jpg" style="width:100px; height:100px;"></span> *~ -------------------------------------------------- ~* *개행되지 않는 경우, 개행되는 경우는 대표적으로 이런 경우들이 있습니다. 규칙은 이렇습니다. 1. 상위태그로 감싸지 않고 <img> 태그만 사용할 경우, 강제로 개행되지 않는다. 2. <span>태그로 감싸기만 할 경우, inline-block일 경우, table-cell일 경우 강제로 개행되지 않는다. 3. <br> 태그는 한 줄을 개행시킨다. 4. <div> 태그로 감싸기만 할 경우, 강제로 개행된다. 5. block일 경우, 강제로 개행된다. 그 외에도 많은 규칙들이 있지만, 대표적인 경우들입니다. 인장 html 소스 코드를 확인해보시고, 이에 해당되지 않거나 추가적인 질문이 있으시다면 글이나 댓글로 남겨주시기 바랍니다:) |