포럼
이 문제좀 풀어 주세요.
2013.04.12 21:16
<p style="background:green;display:inline-block">
<span style="height:100px;width:100px;background:yellow;display:block">
텍스트<br /> 텍스트
</span>
</p>
</div>
html5에서
div로 span을 감싸면서 노란색만 보이게 하기...
div와 p쪽 style은 수정하셔도 됩니다만...
span이 가변일 수 있기에 div와 p쪽 넓이와 높이 입력으로 하는건 무효입니다.
댓글 24
-
저기 span 닫는 태그는 있는데 여는 태그가 없네요 .. :D
-
ForHanbi
2013.04.12 21:33
예로 hhtml을 올려두고 싶은데 안걸리네요.
그러다 보니 지우고 또 적고하다 빼먹은 듯 ^^
-
송동우
2013.04.12 21:43
<div style="background:blue;display:inline-block">
<p style="background:green;display:inline-block">
<span style="height:100px;width:100px;background:yellow;display:block">
</span>
</p>
</div>붉은 색 부분 제거........
-
그렇게 해버리면 p태그가 붕떠버리지 않나요..?
-
ForHanbi
2013.04.12 21:53
헉 감사합니다.
그런데 송동우님 답변이 먹히니까 더 혼란스러움 휴...
뭐가 이상한거 같은데 정리는 안되고....
하여튼 답변 감사합니다.
-
block 속성안엔 inline 속성을 가진 요소가 있을순 있지만,
inline 속성내에 block 속성을 가진 요소가 있을 수 없습니다.
개발자 도구로 확인해보시면, p태그의 크기가 0x0으로 사라져있습니당..
-
ForHanbi
2013.04.12 21:59
네 inline 안에 block이 못들어가죠.
-
ForHanbi
2013.04.12 22:02
참 이 부분은 저도 정확하게 파악이 안되어서
inline 테그안에 block 테그가 들어가는건 비표준이 맞지만
block 테그의 style을 inline으로 바꾼후에 block을 넣는것도 비표준인가요??
이 부분은 찾아보지 못해서 저도 긴가민가 하더군요.
-
block 태그의 속성을 inline으로 바꾸면 block 속성에서 inline속성으로 바뀌는 거기에..
해당 태그 내에 block 속성을 가진 요소를 가지는건 비표준인걸로 알고는 있습니다 :D
-
ForHanbi
2013.04.12 22:07
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div style="background:blue;display:inline-block">
<p style="background:green;display:inline">
<span style="height:100px;width:100px;background:yellow;display:block">
</span>
</p>
</div>
</body>
</html>이걸로 http://validator.kldp.org/check 에서는 오류없음이...
-
아래 문구를 잘보세요.
RSS/Atom 피드, CSS 스타일 시트, MobileOK 컨텐츠, 또는 깨진 링크 찾기와 같은 특정 컨텐츠를 검사하기를 원한다면, 다른 유효성 검사와 도구 문서를 참고 하십시오.
css 스타일시트의 유효성 검사는 다른 도구를 참고하라고 하네용 ^^;;
-
마크업상으론 블럭 요소인 div 내에 인라인요소인 p와 span이 있으니.. 문제없다고 나올듯싶어요
-
에고 p도 블럭요소에용 ^^;
-
ForHanbi
2013.04.12 23:54
사실 지금까지 block계열에 display:inline 을 사용할거라고는 생각도 못해봤습니다. ^^
그리고 css와 html은 완전 분리되어서 표준 테스트가 되지 않나 싶습니다.
html안에 style가 들어가 있어도 그 부분에 대한 테스트는 하지 않을거 같고
css 테스트도 html과 연결해서 테스트는 되지 않을거 같습니다.
-
div에 float 속성을 주는것도 block 을 inline 요소로 바꾸는 거에요 ^^
-
ForHanbi
2013.04.13 00:42
다를겁니다.
-
<div style="background:blue;display:inline-block;"><p style="background:green;display:inline-block;margin:0;"><span style="height:100px;width:100px;background:yellow;display:block;">텍스트<br /> 텍스트</span></p></div>
-
ForHanbi
2013.04.12 21:58
스비라님도 감사합니다.
-
ForHanbi
2013.04.12 22:00
이게 처음엔 이 부분에서 고민한 부분인데 쉽게 보여드린다는게
<div style="background:blue;display:inline-block">
<div style="background:green;display:inline-block">
<img src="http://www.xpressengine.com/files/member_extra_info/profile_image/214/076/019/19076214.gif" alt="Profile" class="pf" style="height:100px;width:100px;background:yellow;display:block">
</div>
</div> -
송동우
2013.04.12 22:29
<div style="background:blue;display:inline-block">
<div style="background:green;display:inline-block"><img src="http://www.xpressengine.com/files/member_extra_info/profile_image/214/076/019/19076214.gif" alt="Profile" class="pf" style="height:100px;width:100px;background:yellow;vertical-align:middle">
</div>
</div>vertical-align 사용해서 이미지 밑에 여백 안나오게 했습니다.......
값을 bottom 으로 해도 같은 결과로 나오네요.......
-
ForHanbi
2013.04.12 22:35
이리 되어 버리니까
왜 여백이 추가 되었나 하는 의구심이....
-
마래바
2013.04.13 00:00
와~~ 별로 어려운 구문 아닌 것 같았는데, 굉장히 복잡하네요.
그저 간단한 html 문법 밖에 모르는 입장에서는 이런 저런 표준 상황까지 고려하기 참 힘들겠다는 생각 밖에 안드네요.
코딩 하시는 분들 존경,. 존경..
-
ForHanbi
2013.04.13 13:11
어차피 마래바님이나 저나
거기서 거깁니다 ㅋㅋㅋ
css는 너무 어려버요... z-index? <span>은 어디있죠?