CSS_id선택자

diary100 2023. 3. 28. 17:25

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>