본문 바로가기
생활코딩 HTML + CSS + 자바스크립트/자바스크립트 이론

09 CSS 기초 : style 속성

by Hwanii_ 2023. 7. 11.
728x90

1.

자바스크립트 이론을 다루는 중이기에,

 

아래의 것들만 알고 있다면, 사용하는데 전혀 문제 없다.

 

1) <style> 태그

 

2) style 속성

 

3) 선택자

(id 선택자 / class 선택자)

 

2.

 

style 속성 알아보기.

 

 

위의 이미지에서, <h2> 태그로 둘러쌓여 있는,

JavaScript란 무엇인가 ?

를 디자인적으로 바꾸고 싶으면 어떻게 해야할까 ?

 

바꾸고 싶은 태그에 style 속성을 사용 하면 된다.

 

HTML 사용 설명서에는, 다음과 같이 기술 되어 있다.

 

onclick 안에 자바스크립트 코드가 오는 것처럼,

 

style 속성 안에는 CSS가 온다.

 

<h2 style = "color : powderblue;">JavaScript란 무엇인가 ?</h2>

 

위와 같이, 태그 내부에 style 속성을 사용해서 CSS를 부여하면,

 

 

이렇게 CSS가 적용 되게 된다.

 

"color : powderblue;" 는 CSS 코드 이며,

 

HTML과 자바스크립트와는 완전히 다른 언어의 코드 이다.

 

<h2 style =

 

할때, style은 HTML의 문법이다.

 

style 이라는 속성을 통해 웹 브라우저에 "color : powderblue;" 코드가,

 

CSS 코드 라는것을 알려 주는 것이다.

 

3.

 

<h2 style = "color : powderblue;">JavaScript란 무엇인가 ?</h2>

 

글씨색이 아닌, 텍스트에 배경색을 주고 싶다면 어떻게 해야할까 ?

 

<h2 style = "background-color : coral; color : powderblue;">JavaScript란 무엇인가 ?</h2>

 

 

위와 같이, background-color 이라는 CSS 문법을 사용 하면 된다.

 

문법을 모르겠으면, 검색 엔진에서 검색을 통해 해결 하면 된다.

 

4.

[정리]

 

특정한 태그를 CSS 언어 (문법) 으로 디자인 하고 싶다면 ?

 

style 이라는 속성을 사용하고, 그 안에 CSS 문법을 사용 !

 

 

반응형