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에 관한 건 다음 글을 참고해 주세요.
2019/10/15 - [웹코딩 어려워/· HTML] - HTML id=""
HTML id=""
id는 이전 과정에서 배웠던 class와 사용 방법은 동일하다. 다른 점은 id는 한 번만 쓸 수 있다는 거다. htnl문서에서 중복되지 않게 잘 확인하고 써야 한다. 특히 티스토리 스킨 편집 때는 더 조심해야 한다. 이..
nilgi.tistory.com
class > .
<div class="ng_top">
html에 ng_top이라는 이름을 가진 class의 div 블록 구조가 있다면 css에서
.ng_top {display: block;}
이름 앞에 ".(점)" 을 쓴다.
class에 관한 조금 더 알고 싶으시면 다음 글을 참고해주세요.
2019/10/15 - [웹코딩 어려워/· HTML] - HTML 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값을 받을 수 있다.
<div class="ng1 ng2">
.ng1 {float: right;}
.ng2 {font-dize: 200%: color: tomato;}
이렇게 하나의 class에 두 가지 css 속성 값을 줄 수 있다. 이때 html 이름은 띄어쓰기를 해야 한다.