블록(상자) 요소
1) div : 특별한 의미가 없는 구분을 위한 요소 (Division)
2) h1~6 : 제목(목차)을 의미하는 요소 (Heading)
3) p : 문장을 의미하는 요소 (Paragraph)
4) ul : 순서가 필요없는 목록의 집합을 의미. (Unordered List)
2,3 단일 글자가 아니라 글자들이 모여서 만들어진 문장 = 블록요소
인라인(글자) 요소
5) img : 이미지를 삽입하는 요소 (Image) -> 대표적인 예외사항
6) a : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (Hypertext REFer)
7) span : 특별한 의미가 없는 구분을 위한 요소
8) br : 줄바꿈 요소 (Break)
9) input : 입력 요소
9) tr : 표
<div>
<h1>계절</h1>
<p>봄, 여름, 가을, 겨울</p>
<p>
<span>사계절</span> 봄, 여름, 가을, 겨울
</p>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<img src="img/Korean.jpg" alt="계절" />
<a href="https://www.naver.com"NAVER</a>
</div>2) h1~6
<h1></h1>
<h2></h2>
.
.
.
<h6></h6> : 숫자가 작을수록 더 중요한 제목을 정의(더 커짐)
4) ul
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>ul / ol (목록)
: 순서가 필요없는 목록의 집합을 의미 / 순서가 필요한 목록의 집합
li (항목)
: 목록 내 각 항목(List(목록) Item(항목))
(목록 = 각각의 항목들이 모여서 만들어진 전체)
ul 태그는 자식 요소로 한개 이상의 li 태그가 들어가야하고,
li 태그는 항상 ul 태그에 감싸져 있어야 함
5) img
<img src="" alt="" /> (Image)필수 속성
: src(삽입할 이미지의 경로), alt(삽입할 이미지의 이름)
6) a
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.naver.com"target="_표시될 곳">NAVER</a> target
: 링크 URL의 표시(브라우저 웹)위치 -> 즉, 새탭에 해당하는 페이지를 열음
7) span
<head>
<style>
span{color:red;}
</style>
</head>
<body>
<p>
<span>사계절</span> 봄, 여름, 가을, 겨울
</p>
</body> 
8) br
<body>
<p>
사계절<br>봄, 여름, 가을, 겨울
</p>
</body>
9) input
1) <input type="text" />
2) <input type="text" value="han" />
3) <input type="text" value="han"
placeholder="텍스트를 입력하세요"/>
4) <input type="text" value="han"
placeholder="텍스트를 입력하세요" disabled/> 1) 사용자에게 텍스트를 입력받는 구조
2) 입력된 값을 ("han") 언제든지 지우고 수정할 수 있음
3) 받은 입력 값이 없으면 "텍스트를 입력하세요" 가 힌트 처럼 나타남
4) 더이상 수정이 불가능한 상태
5) <input type="checkbox" />
6) <input type="checkbox" checked />
7) <lavel>
<input type="checkbox" checked />
one
</label>
8) <lavel>
<input type="radio" name="num" />
one
</label>
<lavel>
<input type="radio" name="num" />
tow
</label> 5) 체크 하면 선택되는 구조
6) 이미 체크가 되어 있는 구조
7) 텍스트를 클릭해도 체크가 되는 구조
8) 같은 name 을 통해 최소 2개 이상의 목록 중 하나만 선택할 수 있는 구조
9) tr
: 행이먼저 열이 다음
- colspan(Column Span)
: 열을 몇 칸 확장할 것인지를 의미함, 표가 필요한 경우가 아니라면 시도하지 x
-> 그리드 같은 다른 CSS 기능으로 레이아웃을 작업해야함
프론트엔드 공부중!