본문 바로가기

HTML_CSS

3.CSS_id와class

1. id 속성 이용 하기 

<h1 id = "hello" > Hello world </h1>
<h1 id = "code"> code </h1>

//firstStyle.css
#hello{color : pink;}
#code{color : blue;}

태그 안에 id = "아이디명" 을 지정하고 스타일시트 에서 id를 불러 오기 위해선 앞에 #을 붙이고 아이디명을 쓴뒤 중괄호{} 안에서 코드작성

id명을 겹치면 안되다 각각의 태그들은 아이디명이 다 다르다 

2. class 속성 이용 하기 

<h1 class = "hello code" > Hello world </h1>
<h1 class = "code"> code </h1>

//firstStyle.css
.hello{color : pink;}
.code{color : font-size = 3px;}

태그 안에 class ="클래스명"을 지정하고 스타일시트에서 class를 불러오기 위해서 앞에 .을 붙이고 클래스명을 쓴뒤 중괄호 안에서 코드작성

class 명은 겹칠수 있다. 같은 요소를 주고 싶은 태그에는 같은 클래스를 붙인다. 

한 태그 안에 여러개의 클래스를 넣을수도 있다. 해당되는 클래스 요소 다 지정받음 

 

 

'HTML_CSS' 카테고리의 다른 글

6. DOM 응용  (0) 2020.09.26
5. DOM  (0) 2020.09.22
4.CSS_레이아웃  (0) 2020.09.21
2. CSS_스타일지정 3가지  (0) 2020.09.21
1. HTML  (0) 2020.09.21