서비스를 박스로 세분화 하는게 중요하다 !!
세부적으로 나누어서 작은 함수, class로 만들어서 후에 편하게.
HTML의 태그
태그는 BOX, ITEM으로 분류됨.
box : 보이지 않음. sectioning을 도와줌. item정리 도와줌
item : 사용자에게 보여짐
html에서 추천하는 섹션
main의 구분
아티클 : 여러 아이템들을 구룹화해서 재사용 가능한 것들
div : 흔하게 아무곳에나 쓰임. 묶어서 스타일링 해야할 때 (텍스트와 버튼 묶기 등)
item : 사용자에게 보여지는 것들
item : block, inline으로 나뉨.
블록 : 한줄에 하나 배치
인라인 : 공간이 허용하면 옆에 배치
tag 와 element
element : 시작하고 끝나는 태그 하나 = node 라고도 함.
tag 안에는 attribute (속성) 이 있음.
-------
실습
box와 item
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Box vs Item -->
<!--BOX-->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<!-- Item -->
<h1>H1</h1>
<button>Button</button>
</body>
</html>
<a> (anchor tag)
a태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- a -->
<!-- href : hyper reference
target : 어디에 이 페이지를 열건지 (mdn홈페이지 참고)
target _self는 이전창, _blank는 다음창 -->
<a href="https://google.com" target=_blank>Click</a>
</body>
</html>
<p> <b> <span> <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <p> (paragraph) : 문단 정의 -->
<!-- <b> (bold) : 볼드체. Inline 레벨이다. -->
<!-- <span> : Inline
<div> : Box -->
<p>This is a sentence. <b>That</b> is..</p>
<p>This is a sentence. <span>That</span> is..</p>
<p>This is a sentence. <div>That</div> is..</p>
</body>
</html>
List : ol (order list - 정리된) , ul (unorder list) , li (list item-list안에 들어감)
ol에 li이 3개 있다. 단축키
ol>li*3 치고 tab 누르면 자동완성 !
ol의 속성값
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- ol, ul, li -->
<!-- ol의 속성값(attribute) 적용 -->
<ol type="i" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- mdn 사이트 봐서 ul의 속성값 적용 -->
<ul >
<li>Hello</li>
<li></li>
<li></li>
</ul>
</body>
</html>
Input 과 type
input : 사용자에게 입력받음. 대부분 label과 함께 사용.
-> id를 통해 고유한 식별자를 줌.
*input, label은 둘 다 inline
input의 type
<input id="input_name" type="text">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Input -->
<!-- "input_name"을 통해 그룹화 -->
<label for="input_name">Name : </label>
<input id="input_name" type="text">
</body>
</html>
참고 강의 : https://www.youtube.com/watch?v=OoA70D2TE0A&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=6
': ) Web' 카테고리의 다른 글
| [Maven] DependencyResolutionException 오류 (0) | 2022.12.14 |
|---|---|
| HTML 기초 1 (0) | 2022.08.09 |
