[HTML/CSS] 컴알못의 도전기 9일차

 

 

 

태그 선택자_ Id, class

 

 

같은 태그 다른 속성 적용하기

기존 태그 선택자로는 해당 태그 전체가 자동으로 동일한 설정이 적용된다. 이를 분리 적용시켜주기 위해서는 id나 class 속성을 활용할 수 있다.

 

 

ID 속성

활용 가능한 태그 목록: input, button, body, html, head 등 (즉 어느 태그에서나 사용 가능)

 

ID 선택자는 #을 적어준다.

 

예시) # top { color: black; } = top id 가진 div 태그만 '검은색'으로 설정

 

buttom(X), bottom(O)

 

 

📌 java script에서 개개인이 만든 태그에 접근할 때 id를 통해 태그를 불러오는데 이 id가 여러 개일 경우 어떤 태그를 가져와야 할지 혼란이 생기므로 id 속성을 여러 개 사용할 수 없다. 대안으로는 class 속성이 가능하다.

 

 

응용) 여러 a 태그와 결합하여 해당 페이지에서 버튼 클릭 시, 설정한 위치로 자동 이동하는 것도 적용 가능

 

 

 

class 속성

하나의 스타일을 여러 태그에 적용 가능(id 속성과 같이 어느 태그에서는 가능)

 

class  선택자는. 을 적어준다.

 

예시).(class 이름)->. top

 

 

 

 

 

 div class 안에 div와 span이 존재하는 경우

css에서 입력할 때 -> .bottom div (buttom 클래스 아래 속하는 div를 의미) 

 

 

 

 

🤔 span, div에 쓴 bottom class 구분은 어떻게 하는가?

 

예시)

 

div. bottom { color: brown; } -> div의 bottom에 해당되면 갈색

 

. bottom span { background-color: yellow } -> bottom 그 아래 span에 속해 있어서 배경색은 노란색으로 출력

 

 

 

 

✍ id는 한 번만, class는 여러 번 가능