목차
1. style 속성을 이용해서 css 사용하기
2. css 선택자
1. style 속성
바꾸고 싶은 태그에 style속성을 넣기
ex)
[설명]
style이 html의 문법이다
즉, html의 문법인 style을 통해서 웹브라우저에게 저 코드가 javascript라는 것을 알려주는 것이고
저 javascript코드가 위치해있는 태그에 적용되어야한다는 것을 알려주는 것이다.
style="css라는 언어의 문법 중에서 속성(property) "
만약 저 'javascript' 제목에 백그라운드를 주고 싶으면 검색해보자
검색 tip css background color property
style이라는 태그에 css라는 속성을 넣게 되면 디자인을 할 수 있으며 속성이라는 문법을 파악하고 있다면
이제부터 검색을 통해 문제를 해결할 수 있다.
style이라는 태그에 css라는 속성을 넣게 되면 디자인을 할 수 있으며 속성이라는 문법을 파악하고 있다면
이제부터 검색을 통해 문제를 해결할 수 있다.
2. CSS 선택자
2-1. 선택자
선택자
<div></div> : 어떠한 기능 X, 다만 css/javascipt를 통해서 제어하고 싶을때 감싸는 역할을 하는 태그이다.
또한 줄바꿈이 된다.
<span></span> : div태그와 기능은 같으나 줄바꿈 X
선택자
<div></div> : 어떠한 기능 X, 다만 css/javascipt를 통해서 제어하고 싶을때 감싸는 역할을 하는 태그이다.
또한 줄바꿈이 된다.
<span></span> : div태그와 기능은 같으나 줄바꿈 X
ex)
그런데 만약 이러한게 많아지면 하나하나 바꾸기에 가독성이 떨어진다.
그에 맞는 해결 방법은 ?
<head>
<style>
</style>
...
</head> 마치 스크립트 태그처럼 웹브라우저에게 style로 감싸져있는 이 부분이 css다 라고 웹 브라우저에게 알려주는 구분자
2-2. 선택자 잘 사용하기
첫 문장인 단어만 강조하고 싶을때
여기서 잠깐!
현재의 span태그는
red/ green의 영향을 받고 있는데 왜 green의 영향만 받을까 ?
class : 무언가를 그룹핑하는 것 ex) 반 , 반의 역할 1반 2반
id : 어떤 한가지를 식별하는 것 ex) 학번, 절대로 중복X
★우선순위 : id > class > 태그★