반응형
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>
반응형
'Etc2' 카테고리의 다른 글
| 구글 따라다니는 광고(배너) 없애는 방법(광고 끄기) (4) | 2020.03.22 |
|---|---|
| 나만의 크롬! 크롬 첫화면, 크롬 메인화면 설정 및 삭제하기 (0) | 2020.03.09 |
| [애드센스 승인] 티스토리 애드센스 신청에서 승인까지의 과정 (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 |