In the previous chapter, as a way to insert CSS to web pages, we learned about property in HTML syntax. In this chapter, we will learn about a more efficient way, which is Selector. First, look at this web page. How does this text JavaScript look to you? To me, it looks quite important. So let's say I want to make it displayed in bold. How can I do that? If you look at the code here, currently the JavaScript is not surrounded by any tag. Then we can add a tag. For example, <span>. And if we reload the page, it's now changed. But the thing is, this JavaScript is not a title or anything. You can't just add any random tag like this. So here's our problem: I want to decorate this JavaScript with CSS, but in order to do that, I need a tag to enclose the text but has no particular meaning or function. Then how can we solve this problem? We can use a tag named

has no particular meaning or function. It's a colorless tag whose only purpose is to enclose the information that you want to control through CSS or JavaScript. And let's reload the page. But <br> uses the entire screen just like <div> or <p>. So a line break is added like this. Then we might need a colorless tag that doesn't come with a line break, which is <span>. The purposes of <div> and <span> are the same. The only difference between them is whether they use the entire screen or not. Now that we have enclosed the information to control, we can control the it. First, type in style. And when I think about what to do about it, I want to highlight it in bold. And this time, I want you to do a search. You can use keywords such as css, text, bold. And you'd probably found this as a solution. I'm going to set the weight of the font to bold. Alright, let's reload the page. Ta-da! The text JavaScript is now highlighted in bold.

Now, then, can we search for JavaScript in this page and replace them all like this? No, we can't, unfortunately! So I'm going to replace this one here and here, here, and here. And then let me refresh. Now all the JavaScript in this page are highlighted. But we have another problem. When you learn coding, and especially if you are learning a new concept, you should always be able to imagine an extreme case. Imagine that there are not 5 locations of JavaScript but 100 million locations. And they are scattered in a really complicated way. And let's suppose we also want to underline them or change the color. If we are going to do that, we will need to change 100 million locations. Would it be easy? Nope. Could even be impossible. Then what should we do? Actually, to help us resolve this particular problem, CSS has a fantastic feature. Let me first add a tag. It doesn't have to be a tag, though. And then, I'm adding a tag, which is HTML code.

A tag is similar to a tag. It tells the web browser that This part, where the cursor is blinking, enclosed with a tag, is CSS. That serves kind of as a delimiter. And for all the locations of JavaScript in this page, what I'm going to do is to change them all at once using a feature in my editor. But you can also do it manually. I'm typing in class=js. Do you get what that means? And to the web browser, I want to say: For all the tags whose class value is js, I want to set their font-weight to bold. Then we can do that this way: Type in js and then... font font-weight: font-weight: bold; like this. Then let's reload the page. But it's not working. Why? What we just did by adding js here is indicating all the tags in this page whose name is js. However, what we want is all the tags whose class value is js.

Then how can we fix this? You can add a period. And reload the page. Ta-da! As you see, for all the tags whose class value is js, their font-weight is now set to bold. Now, even if this line of code repeats 100 million times, if you want to change the font color to red, for example, you can simply do this. And the 100 million locations of JavaScript will turn red just like magic! Amazing, isn't it? So, this is CSS. So, in this chapter, we've learned how to insert CSS to your web pages, in other words, how to mix CSS with HTML. First, by using style as an attribute. And second, by using a tag. And we also learned how to use a selector to select more than one tag.

WEB2 JavaScript - 10.CSS 기초 (style 태그)

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

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


WEB2 JavaScript - 10.CSS 기초 (style 태그)

WEB2 JavaScript - 10.CSS 기초 (style 태그)

Scripts