CSS display
1. display : block
- 무조건 가로로 한 줄의 영역을 차지하는 속성
- width, height 값 설정이 가능
- 기본값 block : div, p, ...
2. display : inline
- 내가 담은 컨텐츠까지만 크기로 삼는 속성
- width, height 값 설정이 불가능
- 기본값 inline : span, a, ...
3. display : none
- 화면에 보이지 않게 지정
- 반응 선택자 hover와 조합 가능
▶ 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,span{
width: 200px;
}
p{
background-color: lightblue;
display: inline;
}
span{
background-color: lightgoldenrodyellow;
display: block;
}
</style>
</head>
<body>
<p>p태그</p>
<p>p태그</p>
<p>p태그</p>
<span>span태그</span>
<span>span태그</span>
<span>span태그</span>
</body그
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.answer{
display: none;
}
.question:hover+.answer{
display: inline;
}
</style>
</head>
<body>
<span class="question">Q. 무슨 노래 들으세요?</span>
<span class="answer">A. 김동률의 기억의습작이요</span>
<br>
<span class="question">Q. 오늘 점심 뭐드세요?</span>
<span class="answer">A. 짜장면이요</span>
</body>
</html>Q. 오늘 점심 뭐드세요? A. 짜장면이요
'HTML CSS JS' 카테고리의 다른 글
| CSS Flex (0) | 2023.01.09 |
|---|---|
| CSS margin, padding, box-sizing, border (0) | 2023.01.08 |
| CSS 선택자 (0) | 2023.01.05 |
| CSS 기본, 폰트(font) (0) | 2023.01.05 |
| HTML 폼 태그 (form tag) (0) | 2023.01.05 |
댓글