코딩 공부
<JavaScript> 웹브라우저 제어 / CSS 기초 본문
웹브라우저 제어
<body> 태그의 속성으로 style 뒤에는 CSS가 오게 되어있고 디자인을 담당합니다.
html로 이런 디자인을 사용하면 한번 출력되었을 때 바꿀 수가 없습니다. 동적으로 디자인을 바꾸기 위해서는 JavaScript를 사용합니다. JavaScript를 이용해 바꾸고자 하는 태그를 선택하는 방법을 이제부터 배웁니다.
CSS 기초
style 속성을 이용해서 CSS 사용하기
바꾸고 싶은 태그안에 style속성을 넣으면 디자인을 변경시킬 수 있습니다.
e.g. <h2 style="color:powderblue">
html문법인 style을 이용해 CSS가 사용될 것을 알려줍니다.
"color:powderblue"는 CSS의 property (속성)이라고 하는 것입니다.
e.g. <h2 style="background-color:coral;color:powderblue">
style 태그를 이용해서 CSS 사용하기
특정한 태그로 감싸지지않은 문자의 디자인을 변경하려면 <div> 태그를 사용합니다. 이 태그는 어떠한 의미도 없습니다. 다만 CSS를 사용할 수 있게 해 줍니다. 이 <div> 태그는 줄 바꿈을 하지만 <span>은 전체를 쓰지 않고 따라서 줄 바꿈을 하지 않습니다.
e.g. <span style="font-weight:bold;">
<style> 테그는 그 안에 있는 코드가 CSS라는 걸 알려주기 위해 쓰입니다.
e.g.
<style>
.js{ //class가 js인 것들을
font-weight: bold; //더 진하고
color:red; //빨간색으로 표시한다
}
<style>
CSS 선택자
.은 클래스 = 무언가를 그루핑 한다 = 광범위
#은 아이디 = 어떤 한가지 대상을 식별한다 = 예외적으로 디자인 바꿈
아이디는 식별을 위해 사용되므로 같은 아이디는 한 번만 사용할 수 있습니다.
앞에 . 또는 #가 붙지 않으면
e.g. span
{
color:blue;
}
로 되면 span태그로 감싸진 모든 태그를 파란색으로 바꿉니다.
우선순위
아이디 > 클라스 > 태그
'web' 카테고리의 다른 글
| <JavaScript> 조건문 (0) | 2019.12.09 |
|---|---|
| <JavaScript> 제어할 태그 선택하기 / 프로그램, 프로그래밍, 프로그래머 (0) | 2019.12.09 |
| <JavaScript> 문자열과 숫자 / 변수와 대입 연산자 (0) | 2019.12.09 |
| <JavaScript> html과의 관계 (0) | 2019.12.09 |
| <html> 검색엔진 최적화 03 (0) | 2019.12.06 |
