In this chapter, we are going to learn some basic rules of a computer language called CSS. But remember, these basic rules are revolutionary at the same time as they define how CSS works as a whole. So what we are going to learn now is really important but easy to understand. Also, before we start, I'd like to emphasize that since this course is not about CSS but JavaScript, it's okay if you don't get everything in this chapter. As long as you get the general idea, that's sufficient. In addition, if you are already familiar with CSS, and know what style tag or style attribute is, and if you also know what selector is, and even id selector or class selector, you can skip the three CSS series including this one. You can ignore them all and move to the next JavaScript chapter. I don't want you to waste time. Now I'm going to copy the existing 3.html file. Select Duplicate. So I have a file named ex3.html with the same content. In this file, I'm going to delete the HTML tags we don't need.

so that we can make the code simple. And then we can change the file name from 3 to ex3. Now we're all set. Let's start doing the exercise. Okay, let's imagine you want to improve the style of this tag, in other words, the style of the text JavaScript here. Then what you can do is add style attribute to the tag. Just like JavaScript is used in onclick, HTML tutorial also says that CSS is used in style attribute. So, for example, I can change the font color of the web page. Type in color... and then let's make it powder blue. That's a color name. And if you reload the page, you can see that the font color has changed to a soft color called powder blue. The code right here is CSS, which is a computer language completely different from HTML or JavaScript. And style here is part of HTML syntax. In other words, we use an HTML attribute called style to let the web browser know that this code right here is JavaScript.

and therefore the JS code should be applied to where the style tag is located. And this code right here - that is property in CSS syntax. So, for example, to set a background color for this text JavaScript, what should we do? Right, search first. Let's search using css... Type in css, background, and color, and maybe property - that'll be better. Now we've got many search results. Let's click this one. As you see, it seems that we can set the background color using this code. Then, after reading this page, I'll probably think, 'Okay, I'm going to set the background color here.' 'By the way, what's coral?' And then add a semicolon. Oh, I just looked up the word and according to the dictionary, it is a reddish or pinkish shade of orange. Anyway, let's go back to the page and reload it. 1, 2, 3. Ta-da! Now we see the background color.

So, if you know the fact that you can style a page by applying CSS code to the style attribute, and also understand the syntax of this attribute, you are now ready to solve a problem through search. This is a groundbreaking moment for you! Anyway, what I'm saying is you can find a solution by yourself this way. Let's sum up what we've learned: You can style a certain tag with the CSS language by using a style attribute and then using a CSS property in it. Alright, this is it. Let's continue in the next chapter!

WEB2 JavaScript - 9. CSS 기초 : style 속성

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB


WEB2 JavaScript - 9. CSS 기초 : style 속성

Scripts