~ 프론트엔드 개발 가이드!
~ 내용
Basics of the basics!
Basic tags
~ 환영합니다
Hey everyone!
Welcome to this little introduction to front-end development! This guide is supposed to be aimed at beginners who don't have any or only very few experiences in programming, so there won't be any unnecesary technical terms that nobody really understands and also I have tried my best to make each part as well suited (for the current experience level) as possible!
Anyway, enough talking, lets get it on and start creating our first html project!
~ 기본의 기본!
Before you can get started with html you might want to know how you even can get started in the first place! The best thing about html is that you dont have to addiontally install anything! You can actually just create a file with the .html extension and you are almost ready to go!
As you may have noticed, I said almost ready to go! Thats because you still need to add the default html layout to your file! The default layout must be in place to tell the browser what file type it should expect and to tell it what it should be displaying to a user!
This is the default layout which you will use in most html projects:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
As you can see, I used a head and a body tag. Inbetween these two tags there will be indicators for headings, paragraphs, lists and so on and so forth. So what are these indicators or tags?
What are tags and how to use them
So html tags (or html elements) are certain indicators for elements of a website. To open a new tag you will always use < + [tag name] + > ! If you have finished writing what you wanted, you will have to close the tag again. You can do that by simply typing </ + [tag name] + > . A quite neat thing about html is that you can store multiple tags in just one line as long as you close them before you create a new one, in fact, you could write everything in one line (if you wanted that for whatever reason)!
We will start coding soon, dont worry! But before we start, I want to tell you how to test your html file on errors etc... The easiest way to do so is by simply locating the file you created and opening it in your browser! Lets say you just used the basic layout I have shown you above and opened it to your browser. Right now you will see nothing, which is exactly what is supposed to happen as soon as you include tags 텍스트를 사용하면 상황이 변경되는 것을 볼 수 있습니다.
또한 대부분의 태그는 html 파일의
body 요소로 이동합니다! 이 요소의 유일한 목적은 작성한 내용을 다른 방식으로 표시하는 것입니다!물론 다른 방법으로 테스트할 수도 있지만 현재로서는 이것이 오류를 확인하는 가장 좋은 방법입니다!
~ 기본 태그
The first thing you will need to learn when it comes to creating a website are some of the most common tags that are being frequently used in each website!
The ones I will cover in this guide are all sorts of headings, paragraphs, links and lists!
So lets get started with:
The first thing you want to do when creating a website is adding a heading that will inform or welcome the visitor. Its probably the first thing they will see and therefore its important on every kind of website!
Headings in html vary in sizes ranging from 1 to 6! 1 being the largest heading and 6 being the smallest! The output of a heading will always be larger than normal text and it will be bold! To use a heading tag make sure you already use the default layout and learned how to use tags!
If you added a heading your code should look somewhat like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a large heading</h1>
<h2>This is a quite large heading</h2>
<h3>This is a middle sized heading</h3>
<h4>This is a rather small heading</h4>
<h5>This is a small heading</h5>
<h6>This is a tiny heading</h6>
</body>
</html>
So if your file looks like that, your output should like this:
Now that you have learned about headings that can catch the visitors attention you might want to add some text to introduce yourself or tell people what your buisness is all about! You can do that by using the <p> tag! This tag is basically just the normal text you will see on any website. Compared to headings it's just a lot smaller and not bold (obviously). The paragraph tags can be used in the same way as the heading tags, you will first open the tag, type anything you want, and then close the tag again, kinda like this: <p> + [some text] + </p> ! You can include as much text as you like, there is no limit as to how much text can be stored in one <p> tag!
So if you wanted to include a little welcome message below your larger "Welcome!" header, you would do this by using this tag.
So to add it, we want to do the usual, simply open the current html file, and add the tag. In the end, it should look like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
</body>
</html>
<p> tags can also include (just like headings) custom text symbols like emojis!
Next up I want to cover links! Links are quite important on any website since it allows you to refer to different websites or maybe some other files within your website!
Now, links are quite different from the tags you have learned till now. They are combining 2 different tags so to speak. To start creating a new link you want to add a new <a> tag to your file! But before you enter a link to a website and close it again, make sure to read on, because that's not how to do it! You will have to add the href element in the first <a> !
Also, before you go on, you might want to know that you can show some alternative text for the link! So you can do that by adding some text inbetween the opening and closure tag of a !
The basic structure of the <a> tag is <a href="[link]">[some text]</a> !
If we now want to include a link to our GitHub page (or whereever the hell you want to send the user, could even be a rick roll) we will add the structure mentioned above to our current file! Once added and modified it should look somewhat like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
</body>
</html>
Once you have refreshed your website it should have added the new link to your GitHub profile!
일반적으로 스타일이 지정되지 않은 모든 새 링크는 파란색(또는 이와 유사한 것)을 가집니다. 마우스를 올리면 커서가 포인터로 변경되어야 하며 클릭하면 색상이 자주색 또는 빨간색과 유사한 것으로 바뀝니다!
A neat feature of html is that you can include images without much effort! Similarly to links 이미지용 태그도 여러 요소를 하나의 태그로 결합합니다! 이미지의 기본 태그는
<img 입니다. 내가 >를 포함하지 않은 점에 주목하세요! 이는 실제로 이미지를 표시하기 위해 몇 가지 태그를 더 포함하고 로드되지 않고 크기가 조정되지 않는 경우 텍스트를 표시하기 때문입니다!따라서 이미지를 표시하려면
src="" 요소가 필요합니다! 이 태그는 이미지의 경로를 정의합니다! 이미지가 현재 작업 중인 html 파일과 동일한 폴더에 없는 경우 C:\Users\[user]\... 와 같은 전체 경로를 포함할 수도 있습니다!다음으로 이미지를 로드할 수 없는 경우에 사용할 텍스트를 추가하려고 합니다!
alt="" 요소를 추가하여 그렇게 할 수 있습니다! alt 요소는 길이가 정의되지 않은 일부 텍스트를 저장할 수 있습니다! 즉, 원하는 대로 입력할 수 있습니다!height=""와 width=""도 있습니다! 그들이 실제로 하는 일은 이미지의 크기를 조정하는 것뿐이므로 스스로 설명할 수 있습니다!이제 이러한 각 요소가 하는 일을 알았으므로 기본 레이아웃에 익숙해지도록 하겠습니다.
<img src="[path]" alt="[text]" width="[size]px" height="[size]px">따라서 이제 이전에 포함된 링크 옆에 GitHub 프로필 사진을 추가하려는 경우 일반적인 방식으로 진행합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
<img src="pfp.jpg" alt="pfp" width="80px" height="80px">
</body>
</html>
출력은 다음과 유사해야 합니다.
웹사이트에 이미지가 있는 만큼 빠르고 쉽게!
Lists. You might think lists aren't really the thing to include in the first part of a tutorial but in my opinion they are super important on every website!
There are 2 different types of lists in html! The first one is an ordered list ( <ol> ). It's basically just a numbered list and each list item ( <li> ) will have its own number from 1 to ∞! The other list type is the unordered list (< ul >! The main difference between the 2 of them is that the one is numbered, and the other one, well, isnt numbered. quite simple!
Once again, lists in html consist of multiple tags! To start a new list we will use either <ol> or <ul> ! But this will not be able to display any text. Therefore we will use the <li> tag! Note that all of these have to be closed again, not like the image tag!
So if we wanted to include an ordered list that displays all the possible options of getting in contact with us we would go for something like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
<img src="pfp.jpg" alt="pfp" width="80px" height="80px">
<ol>
<li>Email</li>
<li>Discord</li>
<li>Twitter</li>
</ol>
</body>
</html>
Once you have added that to your file and refreshed the website, it should look kinda like this:
너무 좋아 보이지 않지만 우리는 거기에 갈 것입니다!
따라서 숫자가 있다는 사실이 싫다면 목록을 순서가 없는 목록으로 변경하는 것이 좋습니다! 2글자만 바꾸시면 됩니다! 다시 한 번 우리는 가능한 방문자에게 연락 옵션을 제시하고 싶습니다!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
<img src="pfp.jpg" alt="pfp" width="80px" height="80px">
<ul>
<li>Email</li>
<li>Discord</li>
<li>Twitter</li>
</ul>
</body>
</html>
그렇게 간단하게 목록을 표시할 수 있습니다!
목록에는 많은 가능성이 있습니다!
<li> 태그 사이의 텍스트를 link ! 그렇게 하려면 지금 있는 텍스트를 교체하고 <a> 태그의 기본 구조로 교체하기만 하면 됩니다! 링크가 <li> 태그 사이에 있는지 확인하십시오!out 파일에 추가되면 다음과 같아야 합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
<img src="pfp.jpg" alt="pfp" width="80px" height="80px">
<ul>
<li><a href="gmail.com">Email</a></li>
<li>Discord</li>
<li><a href="https://twitter.com/_j5mm_">Twitter</li>
</ul>
</body>
</html>
산출:
그리고 이를 통해 다양한 웹사이트로 이동할 수 있는 클릭 가능한 목록이 있습니다!
Another feature of html is comments! You can comment your code so you don't forget what tag does what or in case you want to test some stuff!
A comment is very different to the other tags you learned about so far! To start a comment you want to type <!-- then you want to add some text and close it again by typing --> !
So if we include this in our code it should look like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--my website-->
<h1>Welcome!</h1>
<p>Welcome to my website!</p> <!--my paragraph-->
<a href="https://github.com/Just5MoreMinutes">GitHub</a>
<img src="pfp.jpg" alt="pfp" width="80px" height="80px">
<ul>
<li><a href="gmail.com">Email</a></li>
<!--<li>Discord</li> thats gone now!-->
<li><a href="https://twitter.com/_j5mm_">Twitter</li>
</ul>
</body>
</html>
Once you added something similar to this, your output should look somewhat like this:
보시다시피 방금 입력한 텍스트가 웹사이트에 표시되지 않습니다!
<li>도 사라졌다!~ 아웃트로
Thanks for reading this awfully long first part of this full html & css guide! I hope I managed to make the text as easily understandable for everyone as possible! If I did (or did not) feel free to tell me, any feedback is welcome!
In the next few parts I will slowly include more and more css until I feel like we are ready to have some more advanced html & css and the build a small website!
As said, this guide is supposed to be directed towards newbies to html and css, and thats why I take so much time to talk about the usage of each and every tag I presented! This might change throughout the future parts but since this also is mjust my second post I don't really know what to do and what I rather shouldn't do, I'm sure I will learn eventually!
With that being said, I hope I was able to help out :)
Have a great day!
Reference
이 문제에 관하여(~ 프론트엔드 개발 가이드!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/just5moreminutes/-a-guide-to-front-end-development-3lb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
