CSS

선택자-id

가장먼저 id선택자에 대해서 알아보도록 하겠습니다. ID 선택자는 특정한 하나의 코드에만 효과를 줄 수 있습니다. 다음과 같이 코드를 따라 써봅시다.

<HTML 코드>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="자신의 파일 이름을 넣어주세요.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h1 id="abc"> CSS </h1>
        <h1 id="def"> 좋아요와 공동공부 한번씩 부탁드립니다 </h1>
    </body>
</html>

<CSS 코드>

#abc{
    color:red;
}
h1{
    font-size:50px;
}
#def{
    color:blue;
}

html 파일에는 html코드만, CSS 코드에는 CSS 코드만 넣어주시길 바랍니다. Visual Studio Code 에디터를 추천합니다. 에디터에 이 코드를 넣었으면 한번 실행시켜 보세요. 파일에 있는 글씨들 중 CSS라는 글씨는 빨간색, 좋아요와 공동공부 한번씩 부탁드립니다 부분은 파란색인 것을 확인할 수 있습니다. HTML 코드에있는 <h1 id="abc"> 부분은 abc라는 이름과 같은 선택자가 있고, CSS코드에는 #abc라고 표현되어있어 abc에게만 color:red;라는 효과를 주는 것입니다. 그리고 h1이라는 부분은 잘 티가 안나지만 h1태그라고 써져있는 모든 녀석에게만 효과를 주는 것입니다.

 이번에는 선택자 중에서도 id 선택자를 저와 같이 알아봤는데요. 다음시간에는 더 재밌고 유익한 CSS 강의가 되도록 노력하겠습니다. 감사합니다!

댓글

댓글 본문
  1. 만약 어려운 점이 있다면 댓글로 알려주시면 설명해드리겠습니다.
버전 관리
(INT) 전설
현재 버전
선택 버전
graphittie 자세히 보기