1. HTML 들어가기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Hello world
<a href="naver.com">네이버로 갑니다.</a>
</body>
</html>
2. HTML 태그
tag는 그 의미에 맞춰서 사용해야 한다. (https://www.w3schools.com/tags/ref_byfunc.asp)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Hello world
<div>
<h1> 반갑습니다.</h1>
<ul>
<li><a href="naver.com">사과</a></li>
<li>바나나</li>
<li>메론</li>
</ul>
</div>
</body>
</html>3. 레이아웃을 위한 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header><h1>header</h1></header>
<div id="container">
<nav><ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul></nav>
<aside>
<li>오늘의 날씨</li>
<li>운세</li>
</aside>
</div>
<footer>footer?</footer>
</body>
</html>4. HTML 구조와 설계
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>company name</h1>
<img scr = ...>
</header>
<section>
<nav><ul>
<li>home</li>
<li>About</li>
<li>Map</li>
</ul></nav>
<section>
<button></button>
<div><img src=":"></div>
<button></button>
</section>
<section>
<ul>
<li>About us</li>
<li>
<h3>What we do?</h3>
<div>Loerm ipsum dolor sit amet, d..</div>
</li>
</ul>
</section>
</section>
<footer>
<sapn>Copyright @codesquad</sapn>
</footer>
</body>
</html>ul : unordered list
ol : ordered list
dl : definition list
(5) ID와 Class
ID : 하나만있음. 고유한 이름
Class : 여러개. 같은 스타일을 공유하길 원할 때 사용
<div id="a" class="b">
text...
</div>
#a 아이디 호출
.b 클래스 호출
(6)크롬 개발자 도구(Elements tab)사용하기
ref
https://www.edwith.org/htmlcss/joinLectures/12826
초보자를 위한 HTML & CSS 동작과 원리 강좌소개 : edwith
- 윤지수
www.edwith.org
'오늘의 코딩 > 웹프로그래밍' 카테고리의 다른 글
| [PHP] 생활코딩(7.5~) (0) | 2020.07.05 |
|---|---|
| 6. (0) | 2020.07.02 |
| 4. (0) | 2020.07.02 |
| 2. CSS 스타일 시트 언어 (0) | 2020.07.01 |