CSS 요소 선택

CSS · HTML

혜원21 2019. 10. 26. 04:15

css를 html의 요소를 선택해서 꾸미는 게 기본이다.

이전 과정에서

.nilgi {color: gold; font-size: 20px;} 이렇게 쓰는 거다라고 배웠다.

여기에서 앞 ".nilgi" 이 부분에 대해서 알아보자.

html 요소를 선택하는 방법에는 5가지가 있다. 많기도 하다. 그러나 결국 1가지다. =-=?

id > #

html에서 id 요소를 선택한다.

<div id="nilgi"> html에 nilgi라는 id를 가진 div 블록이 있다.

id 이름은 자기 마음대로다.

#nilgi {display: block;}

이렇게 id를 선택할 때는 이름 앞에 "#" 을 쓴다.

id에 관한 건 다음 글을 참고해 주세요.

HTML id=""

id는 이전 과정에서 배웠던 class와 사용 방법은 동일하다. 다른 점은 id는 한 번만 쓸 수 있다는 거다. htnl문서에서 중복되지 않게 잘 확인하고 써야 한다. 특히 티스토리 스킨 편집 때는 더 조심해야 한다. 이..

nilgi.tistory.com

class > .

html에 ng_top이라는 이름을 가진 class의 div 블록 구조가 있다면 css에서

.ng_top {display: block;}

이름 앞에 ".(점)" 을 쓴다.

class에 관한 조금 더 알고 싶으시면 다음 글을 참고해주세요.

HTML class=""

class는 요소에 이름을 부여해 스타일을 적용하는 태그다. 이름이 같은 class를 부여한 요소는 똑같은 스타일을 받는다. 이 말은 class는 반복 사용할 수 있다는 말. ok! 근데 나 이거 알고 있었다능. 정리만 하..

nilgi.tistory.com

*

* 는 html의 모든 요소를 선택한다.

* {font-size: 16px; color: lightgray;}

이렇게 쓰면 html의 모든 글자 크기는 16px가 되고 글자 색은 밝은 회색이 된다. 이렇게 설정해도 따로 또 요소를 지정해서 속성: 값; 을 주면 변화된다.

요소의 그룹화

속성: 값; 이 동일하다면 html 요소를 그룹화할 수 있다.

h1 {color: gild;}

h2 {color: gild;}

h3 {color: gild;} 이렇게 3가지 html 요소 모든 똑같은 값을 가진다면

h1, h2, h3 {color: gild;} 이렇게 묶어서 쓰면 된다.

요소는 두 가지 이상의 css값을 받을 수 있다.

.ng1 {float: right;}

.ng2 {font-dize: 200%: color: tomato;}

이렇게 하나의 class에 두 가지 css 속성 값을 줄 수 있다. 이때 html 이름은 띄어쓰기를 해야 한다.

티스토리툴바