2015.05.07 [HTML] outerrHTML과 innerHTML |
2015.02.10 긴문장을 (...) 처리하여 주는 text-overflow |
오랜만에 포스팅합니다.
포탈 관리자 작업하다가 아래와 같은 에러가 발생하여....
outerHTML 이 뭐지....??????? 하는 궁금증이 생겨 알아보았습니다.
outerHTML을 설명하기위해 innerHTML과 비교하여 설명하겠습니다.
1. outerHTML
* (html element).outerHTML : 현재 요소를 포함한 내부 html 전체를 반환한다.
예제 html 코드 |
<div class="exampleTB">
<table class="useYN">
<tr>
<td>
<input type="radio" value="use">사용<br>
<input type="radio" value="unused">사용 안함
</td>
</tr>
</table>
<table class="job">
<tr>
<td>
<input type="radio" value="use">학생<br>
<input type="radio" value="unused">직장인
</td>
</tr>
</table>
</div>
위의 예제 코드에서 현재 "useYN"을 기준으로 outerHTML을 적용하면,
var $targetHTML = $('div exampleTB table.useYN');
$targetHTML.outerHTML; // outerHTML
<table class="useYN"> <tbody><tr> <td> <input type="radio" value="use">사용<br /> <input type="radio" value="unused">사용 안함 </td> </tr></tbody></table>
결과 useYN 요소를 포함한 html이 모두 반환된다.
2. innerHTML
* (html element).innerHTML : 현재 요소는 제외하고 내부 html 전체를 반환한다.
위의 예제 소스를 이용하여
현재 "useYN"을 기준으로 innerHTML을 적용하면,
var $targetHTML = $('div exampleTB table.useYN');
$targetHTML.innerHTML; // innerHTML
// 결과 |
<tr>
<td>
<input type="radio" value="use">사용<br />
<input type="radio" value="unused">사용 안함
</td>
</tr>
결과 useYN 요소를 제외하고 내부 html이 모두 반환된다.
'개발 > CSS' 카테고리의 다른 글
긴문장을 (...) 처리하여 주는 text-overflow (0) | 2015.02.10 |
---|
아래 그림과 같이 [팀플레이스 이름길이체크용 팀플레이...] < -- 요렇게 긴문장으로 text 가 영역을 벗어 나거나 깨질때.....
text-overflow : clip;
text-overflow : ellipsis;
text-overflow : string;
clip 속성 - 고정폭을 벗어나는 문자를 잘라냄
ellipsis 속성 - 고정폭을 벗어나는 문자를 (...) 처리 해줌
stnirg 속성 - 대체문자를 붙여줌
- 적용 시 주의사항
1 . 위의 css를 적용하는 영역은 width가 고정폭인 조건 이어야 합니다.
2 . ellipsis 사용시 CSS 와 글꼴 및 브라우저 마다 표현되는 방식에 차이가 있습니다.
3. 적용 시에는 아래의 두 속성도 함께 넣어 줍니다.
overflow:hidden; - 고정폭을 넘어가는 text숨김.
white-space:nowrap; - 고정폭이라도 자동으로 줄바꿈되지 않도록 함.
그럼 아래와 같이 고정폭을 넘어가는 경우 (...) 처리가 됩니다.
참고 URL
https://developer.mozilla.org/en-US/docs/CSS/text-overflow
http://quirksmode.org/css/user-interface/textoverflow.html
http://blog.naver.com/PostView.nhn?blogId=goodleedw&logNo=30151600912
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
출처 : http://blog.naver.com/mickeyh21/10163725143
'개발 > CSS' 카테고리의 다른 글
[HTML] outerrHTML과 innerHTML (0) | 2015.05.07 |
---|