[CSS] display속성 - block과 inline
- Etc
- 2020. 2. 25. 00:21
반응형
반응형
block과 inline
<html>
<head>
<style>
h1{
display:inline;
background-color:blue;
color:white;
}
a{
display:block;
backgroud-color:yellow;
color:red;
}
</style>
</head>
<body>
<h1>display속성을 알아봅시다</h1>
<h2>웹언어 공부</h2>
<a href="#">구글</a>
</body>
</html>html은 두 개의 요소로 구분됩니다. block요소와 inline요소.
h1태그는 block요소이므로 inline요소로 지정하고 싶으면 display:inline; 으로 지정해주면 됩니다.
a태그는 inline요소이므로 block요소로 지정하고 싶으면 display:block; 으로 지정해주면 됩니다.
<html>
<head>
<style>
p{
text-align:center;
}
p a{
width:20px
height:20px
background-color:blue;
color:white;
}
</style>
</head>
<body>
<p>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</p>
</body>
</html>
반응형
'Etc' 카테고리의 다른 글
| 필라델피아반도체지수 추종 SOXX ETF 보유종목, 배당일, 배당금액(3,6,9,12월) (0) | 2020.03.08 |
|---|---|
| ISA계좌 ETF 운용, 세제혜택, 주의사항 (15) | 2020.03.06 |
| [애드센스 승인] 티스토리 애드센스 신청에서 승인까지의 과정 (14) | 2020.03.05 |
| [애드센스 승인] 티스토리 애드센스 승인 후기(무한반복신청) (5) | 2020.03.05 |
| [CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0) | 2020.02.23 |