id 선택자
- 웹 문서안의 특정 부분 스타일을 적용
- #기호를 사용해서 id속성을 가진 요소에 스타일을 적용
- CSS도 덮어쓴다. -> 순서가 중요
CSS
h2 {font-size : 30px;} 1. 2. 둘다 적용
h2#hello {font-size :20px;} 1. 20px로 변함
#hello {color :pink}*1. pink 컬러로 적용
HTML
1. <h2 id="hello">안녕하세요</h2>
2. <h2>반갑습니다</h2>
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>id 선택자</title>
<style>
#container{
background-color: gold;
padding: 20px;
width: 600px;
height: 300px;
text-align: center;
margin: 100px auto;
}
/*header 꾸미기
배경색:deepskyblue
가로 :200px
세로 :200px
글자 -> 가운데 정렬
박스 -> 가운데 정렬
*/
#header{
background-color: deepskyblue;
width: 200px;
height: 200px;
text-align: center;
margin: 100px auto;
line-height: 200px;
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container" >div 첫번째 영역</div>
<div id="header">div 두번째 영역 </div>
</body>
</html>
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_자식,자손,형제 선택자 (0) | 2023.03.28 |
|---|---|
| CSS_class 선택자 (0) | 2023.03.28 |
| CSS_상속 (0) | 2023.03.28 |
| CSS_요소 선택자 (0) | 2023.03.28 |
| CSS_전체 선택자 (0) | 2023.03.28 |
