W3Schools 로 html 코드 연습하기
2021. 4. 18. 17:04ㆍ카테고리 없음
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
기본적인 html코드를 공부해볼수 있는 사이트를 찾았습니다!
저도 그랬듯이 주변분들은 html 보기만 해도 어렵다고 하더라고요
하지만 알고보면 그나마 쉬운게 html이예요.
저는 자바나 파이썬보다 html이 더 쉬운 것 같네요^^
우선 사이트에 들어가 주시면
요렇게 아래쪽까지 많은 종류들이 있습니다
html뿐만 아니라 html을 디자인하는 css나 javascript, SQL을 연습해 볼수도 있습니다.
우선 html을 눌러서 들어가 주세요 (LEARN HTML)
다양하게 나오는데 맨 위에 있는 Try it Yourself 를 눌러주시면 됩니다!
눌러주시면
왼쪽은 html을 작성해 넣는 칸이고요
오른쪽은 그 html 코드를 작동시킨 화면입니다.
일단, 코드들을 설명해 드리겠습니다
더보기
맨 위에 있는 <!DOCTYPE html>은 이 문서가 html로 작성되었다는걸 뜻하구요
아래에 <html> </html>로 html이 시작하고 끝나는걸 표시해 줍니다
html은 <head>와 <body>로 나뉘는데요
<head>는 이 웹페이지의 정보나 다른 사이트, css파일, javascript 파일 등을 링크하는 부분입니다
<body>는 html 코드를 작성하는 부분입니다
<p>: 문단 코드이고 글을 쓸 수 있습니다 eg) <p> 첫 번째 문단입니다</p>
<h>: 제목을 쓸 수 있습니다 (heading) h 뒤에 숫자를 붙이면 사이즈 조절이 가능합니다
eg) <h1>This is heading </h1>
<b>: 볼드체로 글을 쓸 수 있습니다 eg) 굵게
<I>: 이텔릭체로 글을 쓸 수 있습니다 eg) 기울임꼴
<u>: 밑줄을 칠 수 있습니다 eg) underline
<s>: 취소선을 칠 수 있습니다 eg) 취소선
<br>: 닫는코드 없이 쓰이고요, 줄바꿈이 가능합니다
아주 기본적인 설명이었고요
이때까지 설명한걸 적용해 보면
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<b>굵게</b> <br>
<i>기울임꼴</i> <br>
<u>underline</u> <br>
<s>취소선</s>
</body>
</html>참고로 html 코드를 작성할 때는 위의 코드보다 한 칸 띄워 주셔야 합니다
안 띄우셔도 작동은 하지만
나중에 엄청 헷갈립니다
이건 제가 예전에 만들었던 페이지입니다
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Forms Review</title>
</head>
<body>
<section id="overlay">
<img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
<hr>
<form action="submission.html" method="POST">
<h1>Create a burger!</h1>
<section class="protein">
<label for="patty">What type of protein would you like?</label>
<input type="text" name="patty" id="patty">
</section>
<hr>
<section class="patties">
<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount">
</section>
<hr>
<section class="cooked">
<label for="doneness">How do you want your patty cooked</label>
<br>
<span>Rare</span>
<input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
<span>Well-Done</span>
</section>
<hr>
<section class="toppings">
<span>What toppings would you like?</span>
<br>
<input type="checkbox" name="topping" id="lettuce" value="lettuce">
<label for="lettuce">Lettuce</label>
<input type="checkbox" name="topping" id="tomato" value="tomato">
<label for="tomato">Tomato</label>
<input type="checkbox" name="topping" id="onion" value="onion">
<label for="onion">Onion</label>
</section>
<hr>
<section class="cheesy">
<span>Would you like to add cheese?</span>
<br>
<input type="radio" name="cheese" id="yes" value="yes">
<label for="yes">Yes</label>
<input type="radio" name="cheese" id="no" value="yes">
<label for="no">No</label>
</section>
<hr>
<section class="bun-type">
<label for="bun">What type of bun would you like?</label>
<select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potatoe">Potato</option>
<option value="pretzel">Pretzel</option>
</select>
</section>
<hr>
<section class="sauce-selection">
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>
<option value="mustard"></option>
</datalist>
</section>
<hr>
<section class="extra-info">
<label for="extra">Anything else you want to add?</label>
<br>
<textarea id="extra" name="extra" rows="3" cols="40"></textarea>
</section>
<hr>
<section class="submission">
<input type="submit" value="Submit">
</section>
</form>
</section>
</body>
</html>
이건 그 코드고요
띄어쓰기가 잘 돼서 보기 좋죠?
띄어쓰기를 하지 않고 한번 보여드리겠습니다
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Forms Review</title>
</head>
<body>
<section id="overlay">
<img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
<hr>
<form action="submission.html" method="POST">
<h1>Create a burger!</h1>
<section class="protein">
<label for="patty">What type of protein would you like?</label>
<input type="text" name="patty" id="patty">
</section>
<hr>
<section class="patties">
<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount">
</section>
<hr>
<section class="cooked">
<label for="doneness">How do you want your patty cooked</label>
<br>
<span>Rare</span>
<input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
<span>Well-Done</span>
</section>
<hr>
<section class="toppings">
<span>What toppings would you like?</span>
<br>
<input type="checkbox" name="topping" id="lettuce" value="lettuce">
<label for="lettuce">Lettuce</label>
<input type="checkbox" name="topping" id="tomato" value="tomato">
<label for="tomato">Tomato</label>
<input type="checkbox" name="topping" id="onion" value="onion">
<label for="onion">Onion</label>
</section>
<hr>
<section class="cheesy">
<span>Would you like to add cheese?</span>
<br>
<input type="radio" name="cheese" id="yes" value="yes">
<label for="yes">Yes</label>
<input type="radio" name="cheese" id="no" value="yes">
<label for="no">No</label>
</section>
<hr>
<section class="bun-type">
<label for="bun">What type of bun would you like?</label>
<select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potatoe">Potato</option>
<option value="pretzel">Pretzel</option>
</select>
</section>
<hr>
<section class="sauce-selection">
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>
<option value="mustard"></option>
</datalist>
</section>
<hr>
<section class="extra-info">
<label for="extra">Anything else you want to add?</label>
<br>
<textarea id="extra" name="extra" rows="3" cols="40"></textarea>
</section>
<hr>
<section class="submission">
<input type="submit" value="Submit">
</section>
</form>
</section>
</body>
</html>
다는 못하겠어서 중간까지만 했습니다
지저분하죠?
html 파일을 꾸미는 css 파일도 있지만
다음에 설명드리겠습니다
다음에는 html 코드에 대해서 더 자세히 알려드리겠습니다
✋🏻