If you enter "JoCoding" in the search box, you can see the actual search results. Like this, we can easily bring cool CCS. [JoCoding] Hello this is JoCoding, where anyone can learn easy coding. In this video, we will learn about CSS. What is CSS? It's a language that decorates HTML, which we touched on before. [HTML tag]
You can pick a specific HTML element [HTML tag]
and change its position, size, color, etc., [HTML tag]
to give change to the HTML element. In this tutorial, going over the entire contents of CSS from beginning to end can be a bit too much. So for details, please refer to the learning site mentioned in the first HTML tutorial. In this video, I will jump directly to application of CSS. [CSS newbie]
But I will inform the basic principles, so that those who are new to CSS can look at the video and understand. I will also show you how to solve the problem by googling when stuck during practice. Also, I will provide good tips on how to create stylish websites, even if you're a CSS newbie. So please stay tuned. Let's look at the screen together. [Basics and application of CSS]
Starting now, we will briefly learn about CSS, which decorates HTML. [Apple]
As we touched on in the first HTML tutorial, [Apple]
Documents written with HTML tag [Apple]
show up like this on the browser. [Apple]
But if we want to change the color of the word Apple in red, [Apple]
what should we do? [Apple]
What should we do? Now is the time to use CSS. [Apple]
To use CSS, at the front you will type which element to decorate. [Apple]
In between curly brackets, you type what you want to change and how, [Apple]
and put a semicolon at the end. ['h1'Apple'/h1'][Apple]
Here, [Apple]
we said we will change the color of h1 tag into red, [Apple]
so it appears red on the browser. But then, like this, if there are several h1 tags, how do you change each into different colors? By giving class or ID, you can select a specific tag and only change the selected tag. First, a class is used to make the same change to several elements. Here, banana and mango are both yellow, so you can designate a same class to change both. To use this, you can type a period and a class name to select it. On the other hand, ID is used to select one element. Here, only grape is purple, so we can use an ID to change it. To use this, after #, you can type an ID name to select it. [Apple Banana Mango Grape]
Then in the browser, you can see they are expressed in different colors. [Apple Banana Mango Grape]
For your reference, between these selectors, class has priority over tags, [Apple Banana Mango Grape]
and ID has priority over class. [Apple Banana Mango Grape]
So even though it has been changed to red by h1, [Apple Banana Mango Grape]
it's overlayed by different colors. [Midpoint Summary] [Basics and application of CSS]
[Components of CSS 1. Selector 2. Which one 3. How]
[1. h1tag 2. color 3. red] [Q) If there are several h1 tags, how do you select the tag you want to decorate?]
[class: a selector used to select several tags, marked by a period]
[ID: a selector used to select one specific tag, marked by a #] [Order of selectivity ID > class > tag name]
[Ex. If class is red and ID is purple, it will be shown in purple.] [Practice Question: Make Google]
Now that you've got the basics of CSS, let's make Google as an example. [STEP 1. Create the file]
First, lets make the file that we need. If you click "Open Folder" of the file, you can select the folder that you will be working on. If you press the "New File" button here, you can create the file you want. Let's make both HTML and CSS. Let's start with the HTML file. Default templates of HTML such as "head" or "body", can be automatically inserted in a simple way. If you enter ! and press TAB, by the autocomplete tool built into the editor, basic templates are automatically inserted. [Shortcut key for autocomplete of HTML's basic tag: ! + TAB] Since this is a Korean website, let's change the language into Korean. The title will be JoCoding's Google, so let's call it "Joogle". [html lang="language" is where you enter what language the website is in (en=English, ko=Korean, etc.)]
["title" tag that shows the title of the webpage] [STEP 2. HTML markup] [Markup= Typing the HTML that holds the website together]
Now we will get into the markup. [Markup=Typing the HTML that holds the website together]
It's going to take a while to materialize everything on the Google website, so let's work just on the logo and the searchbox. So if we markup based on this, on the HTML "body", let's enter a h1 tag that represents the title. You can also use Tab to autocomplete this to create a tag that opens and closes. Inside, lets type "Joogle". For the search box, we can use input tag. We're going to actually implement search, so let's use the "form" tag, which sends information, to surround it. ["Input" tag that creates the input box]
["form" tag that sends information] So autocomplete can also be used on the "form" tag, and let's enter the "input" tag within it. Now markup is complete. Let's take a look at the screen. If we open the folder and enter, we can see the markup information like this. So now we have to center the text and also the search box. For this, we need CSS that we learned. To utilize CSS, you have to connect CSS with HTML. [STEP3. Connect HTML with CSS]
To do this, let's enter the "link" tag in between the "head" tag. CSS autocomplete also works here. If you press TAB, you can autocomplete the "link" tag which connects HTML according to the format of CSS. In the href part, let's enter the location of the CSS file. They're in the same folder right now, so just the file name will be enough. [href="location" where the file is located- ex) C\My Documents\style.css] Now that the CSS file connection is complete, let's use CSS to center Joogle. Here, I'll show you a good tip that's important in coding. There's no way that the entire content of coding can be memorized. I'm sure that developers from around the world use this method. While coding, you won't know everything that shows up. Let's say that you don't know how to center. Let's google what you want to do. CSS center, for example. If you practice utilizing what you find in google, you can save lots of space in your head. You can see that lots of relevant documents show up. Let's pick a random one from here. If you look at the content, it says that for letters, text-align: center; can be used. Let's copy this to our CSS file and as before, let's apply text-align: center; to the h1 tag. If you refresh, the h1 is successfully centered. Then let's try to bring this title a bit to the bottom-center. There's a good tip here. As the first tutorial on HTML, this can be easily done with the developer tool. Let's open the developer tool by pressing F12. You can see the h1 tag in the HTML code. You can also see how the CSS is applied. The script we entered is here, and you can also find hidden properties of basic h1 tag that has been applied. [box-model: displays space (up,down,left,right) between HTML elements ]
What's convenient is this box-model shown here. You can confirm these elements right away as you enter the numbers. Let's choose about 100 pixels. Now the space at the top is separated by 100 pixels, and you can see how far this is right away. If you double-click and move it up and down, you can control its position by entering the numbers one by one. [TIP! You can use UP and DOWN keys for detailed control]
Let's place it about here. At about 230 pixels, it's at the position we want. Similarly, the font size can also be previewed. Let's type font size here. 30px looks small right? Let's enlarge this to the size that we would like. If you press enter, 90 pixels seem about right. Now that we confirmed the size with our eyes, let's copy these elements. If you copy, and erase, you can find that margin-top and font-size are applied. [1. h1 tag's 2. text alignment 3. to the center] [1.h1 tag's 2.margin-top (upper space) 3. separate it by 230px 2.font-size (size of the font) 3. enlarge by 90px] If you refresh, it has been applied the same as a before. [STEP5. Using CSS to change text color]
Another thing to do is changing the color one by one. Let's give it a go. Currently, Joogle is within one tag. If we change this h1 tag, the color of the entire text will change. Therefore, we have to wrap each text with separate tags. That's going to take a bit, right? So here, it's convenient to use the VScode extension program. If you click the square box on the bottom left, you can install various add-on programs to use in VScode. I suggest you download the htmltagwrap, which easily creates the wrapping tag. If you type htmltagwrap in the search box, you can find the extension. Since it's already installed on mine, it says uninstall. But on yours, there will be an install button. If you look below, there are instructions. If you press Alt + W, you can easily wrap it. Now that the extension is installed, let's quickly wrap it. Let's wrap the tag with span, which shows inline element. [-Inline element: linear HTML element including text (on the contrary=block element elements with volume like images) -span tag: tag that shows text] Let's block select the tag. If you press Alt+W, it will be wrapped by the tag, and you can edit this tag right away. Very convenient, right? Let's repeat quickly. Now each text is wrapped by different tags. Let's give color to each element. If we proceed as we learned, each element requires a class or an ID, and giving each class color will take too much time. In an easier way, as they all have span tags as the child of h1, we can call these first, second, and third of h1's children. So to google this, if you enter css child color in the search box, you can found this information. If you use the nth-child property, you can exclusively change the CSS of a selected child of a certain tag. Let's copy this and apply it to css tag. We are not going to choose p tag. Because we are going to choose among SPAN tags, the descendants of H1, not p tag. Let's change it like this. The space is the descendant of h1 which means Span inside h1 tag. It indicates which descendant it is among span. [Space: The grammar of css indicating the descendant (h span => choose only span tag among all the descendants of h1)]
[nth-child: The grammar of css choosing a specific descendant tag(Don't try to memorize them but find them through search)] [Parent-child tag: The ancestor tag which surrounds is called the "parent tag" and the tag inside the parent tag is called the "child tag"]
[Descendant: A concept which includes all sub tags, including the child of a child of a child.] So you don't start with memorizing all this stuff in the beginning. After you learn what basic css is and then learn how to google things, you can learn more quickly. Just like how we did, let's do the first child. Let's write color blue like this. Let's see what happened on the screen. Then as we intended. You can see that one color of the letter changed But if you look closely, it's deep blue. If you look at the actual Google homepage, it's a little lighter blue. To find this. You can copy the code of the color and make the same color. Let me show you how to do it. If you go to style section in Developer Tools. You can write any color that represents color. Then you have this square box. If you press this, you can select the color you want. [TIP / You can extract accurate color using the spuit of Developer Tools]
If you press spuit. [TIP / You can extract accurate color using the spuit of Developer Tools]
You can extract the color on this web page. I'll extract the blue and get this code value. If you put this code value instead of blue, you can see that it's close to the color we want. Let's quickly apply the rest of the colors. [So quick.] Then color was applied as we wanted. Next, let's create a search box. Of course, you can apply the search box using css and change it. We'll use a more convenient tool. There's a lot of css elements you need to add if you start it from scratch. You may wonder "Is there anyone who already made this on their website?" A lot of people wonder. There is a site that already has ready-made css of these elements. [Step 6. Making a search box using Bootstrap]
It's a site called Bootstrap. [Step 6. Making a search box using Bootstrap]
They provide css that are already complete. If you go to Documentation. Let's go to component section. You have this warning. You have this card type. Or. This document!. You have this e-mail, password, check, and submit button. They made them all in advance. If you apply this css as it is. It's the service that comes out like this. Other than Bootstrap, like Materialize. There are some pre-made buttons. Or like semantic-ui. They have this one and that one. They made them all in advance so you just need to use css. There are these services that they have created. So, let's get the input box from the most famous Bootstrap. If you write input. You can see that you have a variety of input boxes. You can use this one. We're going to bring this column, the most basic form. Then, you have this cool, blue, and lighted button. It's good. This is the second element. You can copy this as it is. Let's put it in our code instead of the default input box. You can press Shift + Tab for this broken one. You can indent like this. Do Shift + Tab to indent this one as well. Let's make a space about one Tab for the child right below. They have one more tab. If you press shift + tab, you can see that it goes backward. Let's save it and see the web page we made. You can see that the thing we thought hasn't come in yet. The reason is. Although we applied css that has been already written. Because it has not connected to the real css file. Although class is defined like this. Because the css file that describes how to decorate this class is not connected. You can see it didn't apply. Click the getting started (the very top one) from Bootstrap homepage. You have this link which can link css. You can link to a css file online. Copy it and paste it inside the head tag. One thing to note is that the css below usually has a higher priority [The lower the code, the higher the priority of css]
[ex h1{Color:Red} / h1{Color:Blue} It is applied as Blue]
so we have to put a higher priority to what we have added than what we applied to bootstrap. I'll paste it on top of our css file. And now we have the css from Bootstrap. If you look at the screen, you can see the search box we want. So, I'll adjust its size. You can click F12 to adjust the size of div that surrounds the input box. Then, add width. 500px would be good enough. And do you want to move this to the center? Of course, you can apply the css to the center like before. Let's try what Bootstrap offers. First of all, let's apply width. Write serach-bar to the div that we want to adjust the size. Give class the attribute we want. Please note that multiple classes [How to apply multiple classes to one tag = You can write multiple classes with spaces]
can be linked with spaces. Copy this. Open the parenthesis after the period representing the class. width, let's apply 500 px we applied earlier. It'll apply the same way. Then you can see how it's actually applied. [Some may be wondering if there are / any pre-made class that moves it to the center]
Some may be wondering if there are / any pre-made class that moves it to the center, Some may be wondering if there are / any pre-made class that moves it to the center, There actually is. If you search for center on Bootstrap Like this, you can find ways to make center and it says that all you need to use is this class. So Copy this and paste it onto a tag we want and without writing our own CSS We can see that it moves to the center like this. Even for putting space in between like this, there's one pre-made with an appropriate size. [*mt-5 = CSS provided by Bootstrap which means the spacing the top by 5]
If you put about 5 for the margin-top, we can see that it has been appropriately spaced. Then, we will apply this. Just apply the function of margin-top 5. Since there are many predefined classes [*TIP It is very convenient to use pre-made classes on Bootstrap*]
There will be a lot of useful tools if you look around Bootstrap. And now, you'll be able to see the shape taking place I'll edit it to look a lot more like Google. Um, first take this button out and it's written 'search Google or type in the URL' [*placeholder: letters in the search box that disappears (ex. enter in your Email)*]
It's called a placeholder when it disappears when you write something [*placeholder: letters in the search box that disappears (ex. enter in your Email)*]
I'll work on this as well. Come back to the HTML and there's a placeholder right here as a default, change this If you refresh the page, we can see that it's become more similar to the Google homepage In addition, it would be nice to make this a bit more round, right? While looking around Bootstrap, I found a pre-made Border-radius as well. What we want is like this, rounded pil. copy this. If you insert what we copied into the class of this input tag, you'll be able to see that it became round even without writing a separate CSS. [STEP 7. Use 'form' to implement actual search function]
Now, decorating is somewhat done. We will implement an actual searching function. [STEP 7. Use 'form' to implement actual search function]
If you look at the principles of Google's search engine Let's say we entered hello as our keyword [You'll see that there's a question mark and ~=~&~=~]
If you look closely to the URL on the top, after 'google search', you'll see that there's a question mark and so on. So if you look closely, 'hello' is behind the letter q right here, The rest is about other information that you searched it on Google and such The important thing is what this keyword is, that's what is important so lose everything that comes after If you actually search with it, you'll see the result is the same. If you change the keyword, let's say you search it with 'hi' like this The search result is exactly the same as if you've entered it into a search box. [The principles of Google search - google.com/search + ?q=keyword]
In other words, if you put something for q with this address You'll be able to do an actual search We'll apply this to the 'form' tag. Copy this and paste it to the action of the 'form' tag We'll have the method in a GET form Then, if you designate the q for name in the 'input' tag, which is our search box It will work exactly the same way as if you typed it into the search box as before. It might be a bit advanced so don't take it so seriously, and you'll get more used to it as you continue to watch. This might be a bit new to those who are not used to the HTML 'form' tag. To briefly explain, this action of 'form' tag is an address of where it's going to go and method is a way of sending the data. There are a few but to put it simple, there is GET and POST, [GET: Information transmission method that transfers the information along with the address]
Get method is when you bring something that corresponds to the name after the question mark from the address and sends out what we made [POST: Information transmission method where you transfer the information internally without showing information on the address]
On the other hand, when you use the POST method It is used to transfer something internally and not to the address. I'll give more detailed explanation as I continue on with the lecture, so for now, just watch it with a light heart. We are going to send it to the address so with the GET method, we will send information to this address under the name of 'q'. And now, back to our Joogle homepage, if we search something we will see that it is actually being searched on Google. Now, our Joogle homepage is finished. In addition to this search box, there is a really useful site where they have a bunch of different CSS. The service is called the 'codepen'. You can search for things that you need at the codepen. For example, CSS search bar. If you search with this, you'll be able to use various types of premade search bars. If we take a look at one, like this, search for something by clicking on it like this, oh, this method seems really nice. So copy this to the HTML and CSS and use it as it is. But make sure to look out for the copyright. [Refer to the YouTube video information for detailed explanation on copyright!] If you copy+paste this as it is to the HTML and CSS You'll be able to make a cool website like this very easily. Did you enjoy the video? If you found it to be helpful, please click like, subscribe and be notified. It's a real big help when making contents. I'll come back with much easier and useful videos. Thank you for watching.
