front-end/HTMI CSS
CSS 크기 단위, 디스플레이, selector
Hoon0211
2023. 6. 7. 11:02
728x90
1. 크기 단위
- em : 부모의 크기를 기준으로 하는 상대 배수 단위
- 2em : 부모의 2배 크기
- rem : 문서 폰트 크기에 따른 상대 배수 단위
<body>
<span id="px">
px로 조절
</span>
<P>
<span id="em">
em으로 조절
</span>
</P>
<br>
<span id = "rem">
rem으로 조절
</span> <style>
#px {
font-size: 10px;
}
p{
font-size: 10px;
}
#em{
font-size: 2em;
}
#rem {
font-size: 3rem;
}
</style>
2. display
| block | 웹페이지의 가로 공간을 모두 차지하는 속성 ex) div, p, h1, ul, ol, table... |
| inline | 내용만큼만 너비를 가지는 속성 ex) span, a, strong, texttarea... |
| none | 해당 요소를 보이지 않게 지정 |
- block
- width, height 값 설정이 가능
span {
background-color: brown;
}
span {
background-color: brown;
display: block;
}
- inline
- width, height 값 설정이 불가능
- 이미 '컨텐츠 만큼!!'으로 크기 설정 한것
p{
background-color: blueviolet;
}
p{
background-color: blueviolet;
display: inline;
}
- none
- 해당 하는 요소를 보이지 않게 지정
<body>
<h1 id="question">오늘 점심 뭐드세요?</h1>
<h1 id="answer">뉴진스의 하입보이요</h1>
<h1>네?</h1>
</body>#answer{
display: none;
background-color: pink;
}
3. CSS selector
- 클래스 selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일을 적용
- 아이디 selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일을 적용
- 태그 selector는 p { 스타일~~ } 이렇게 적을 수 있고 모든 <p> 태그에 스타일을 적용
- CSS selector의 우선 순위
- style="" (1000점)
- #id (100점)
- .class (10점)
- p (1점)
728x90