<span> : 내부 contents를 기준으로 영역이 설정됨
두 태그는 자체적으로 display 옵션을 사용한다.
p{
background-color: skyblue;
display: block;
}
span{
background-color: lightpink;
display: block;
}
각 태그에 사용된 display 옵션은 다음과 같다
1. block : 기본 값이 무조건 한 줄을 차지하고 있는 요소 width, height 설정이 가능하다.
2. inline : contents 까지만 크기로 가지는 요소 width, height 설정이 불가능하다.
※실습 스크립트
<style>
/*
p, span 을 그룹으로 묶어 동일 크기로 설정
*/
p,span{
width: 200px;
height: 200px;
}
p{
background-color: skyblue;
display: inline;
}
/* 내부 컨텐츠로 크기가 다시 설정됨 */
span{
background-color: lightpink;
display: block;
}
</style>
. . .
<body>
<p>p태그입니다.</p>
<p>p태그입니다.</p>
<p>p태그입니다.</p>
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
</body>
</html>
※실습 결과
해당 옵션이 적용된 선택자가 사용된 경우, 해당 개체는 보이지 않음
※실습 스크립트
<style>
/* 기본적으로는 보이지 않음 */
.link{
display: none;
}
/* 마우스를 올렸을 경우에만 보이도록 근접 후행 선택자로 지정 */
.link_name:hover+.link{
display: inline;
}
</style>
</head>
<body>
<span class = "link_name">
네이버
</span>
<span class="link">
<a href="www.naver.com">www.naver.com</a>
</span>
<br>
<span class = "link_name">
구글
</span>
<span class="link">
<a href="www.google.com">www.google.com</a>
</span>
</body>
->통상적으로는 보이지 않음
댓글
댓글 쓰기