HTML 문서 작성에 자주 이용되는 주요 element 정리한거.
body 영역에서 사용되어 지며,
다양한 element를 이용하여 웹페이지을 만들 수 있음.
1. h
주로 제목을 작성할 때 이용하며, h1 부터 h6까지 있다.
각각 font-size가 지정 되어있는데, h1이 가장 크고 h6이 가장 작다.
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Hello, World!</h1>
<h2>Hello, World!</h2>
<h3>Hello, World!</h3>
<h4>Hello, World!</h4>
<h5>Hello, World!</h5>
<h6>Hello, World!</h6>
</body>
</html>
2.ul , li
얘네는 한쌍으로 같이 움직인다.
li 영역에 표기된 텍스트가 리스트 형식으로 랜더링 된다.
li element는 무조건 ul element의 자식 element로 사용된다.
<html>
<head>
<title>test</title>
</head>
<body>
<ul>
<!-- li는 ul의 자식element로 사용된다 -->
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
</body>
</html>
3.a
a element 영역에 표기된 텍스트를 클릭하면
href에 할당된 주소로 이동한다.
<html>
<head>
<title>test</title>
</head>
<body>
<!-- href에 네이버의 주소를 할당한다. -->
<a href="https://www.naver.com">네이버로 이동</a>
</body>
</html>
링크가 생성되고 링크를 누르면 href에 할당된 주소로 이동하는 것을 확인할 수 있다.
4.div/span
div와 span 모두 영역을 설정하는 element 이다.
하지만 div의 display 속성은 block
span 의 display 속성은 inline 이라는 차이점이 있다.
<html>
<head>
<title>test</title>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
4.1 block 과 inline
block 과 inline의 차이점은
block 콘텐츠의 존재하는 한줄은 다 차지하고
inline은 콘텐츠가 존재하는 영역만 차지한다.
배경색을 넣어주면 좀 더 명시적으로 차이점을 볼 수 있다.
<html>
<head>
<title>test</title>
</head>
<body>
<!-- 배경색 설정 -->
<div style="background-color: tomato">div</div>
<div style="background-color: dodgerblue">div</div>
<!-- 배경색 설정 -->
<span style="background-color: tomato">span</span>
<span style="background-color: dodgerblue">span</span>
</body>
</html>
div 영역은 한줄을 다 차지하고
span 영역은 콘텐츠가 존재하는 영역만 차지하는걸 확인할 수 있다.
5. button
button element를 이용해서 버튼을 만들 수 있다.
button 영역에 표기된 텍스트는 랜더링 된 버튼에 표기된다.
<html>
<head>
<title>test</title>
</head>
<body>
<button>click me!</button>
</body>
</html>
5.1 input을 이용하여 button 만들기
input element를 이용해서 button을 만들 수 있다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="button" value="click me!" />
</body>
</html>다만 이 경우에는 value속성에 할당해준 값이 랜더링 된 버튼 안에 표기된다.
6. input
내용 너무 많아서 따로 정리함.
https://kong-dev.tistory.com/80
HTML 주요 element input
내용 많아서 따로 정리함. 1. input 기본 적으로 텍스트를 입력할 수 있는 입력창을 랜더링한다. 특징으로는 닫는 태그 따로 없이 단일 element로 실행된다. 랜더링된 입력창에 텍스트를 입력할 수
kong-dev.tistory.com
'경일 > HTML & CSS' 카테고리의 다른 글
| html, css 클론코딩 (0) | 2021.12.23 |
|---|---|
| block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 (1) | 2021.12.22 |
| HTML 기초 / CSS기초 (0) | 2021.12.21 |
| HTML 주요 element input (0) | 2021.12.20 |
| HTML 이란 (0) | 2021.12.20 |
댓글