2021. 1. 27. 00:12ㆍ프론트엔드/HTML
1. HTML 태그 기본 문법
웹의 본질은 정보를 시각적으로 보여주는 것이다.
이때 HTML태그는 정보를 보여주는 역할을 한다.
이미지, 텍스트, 비디오, 입력창 등의 개별 정보는 전부 HTML로부터 만들어진다고 보면 된다.
위 정보들을 HTML 언어로 표시하기 위해서는 태그/속성/콘텐츠를 이해해야 한다.
1. 기본 형식 : <태그>콘텐츠</태그>
<p>Hello</p>2. 속성이 있으면 <태그 속성1="값" 속성2="값">콘텐츠</태그>
<a href="https://www.naver.com">Naver</a>3. 태그 안에 또 태그를 넣는다면
<div>
<p>Hello everyone!</p>
</div>
<br />
<img src="https://.jpg" />
*HTML에서 주석을 사용하려면
<!-- 주석 처리 -->
2. HTML로 웹 기본 구성 짜기
<html>
<head>
</head>
<body>
</body>
</html>html 태그가 가장 밖에서 사용되며 그 안에 head, body 태그가 사용된다.
head태그는 콘텐츠를 보여주는 것이외의 모든 설정 태그를 넣는다.
body태그는 실제로 화면을 구성하는 태그를 넣는다.
3. HTML 주요 태그들 알아보기
- h1, h2, h3, h4, h5, h6
headline의 약자로 일반적으로 제목을 표시할 때 사용하는 태그이다.
<h1>Hello!</h1>
<h2>Hello!</h2>
<h3>Hello!</h3>
<h4>Hello!</h4>
<h5>Hello!</h5>
<h6>Hello!</h6>
- p
일반적으로 문단을 나눌 때 사용하는 태그
일반 텍스트를 표시할 때 주로 사용
- br
줄바꿈을 할 때 사용하는 태그
<br/>
- a
다른 링크로 넘어가도록 돕는 태그
href="넘어갈 주소"를 적어야 한다.
<a href="https://www.naver.com">네이버로 넘어가기</a>
- img
이미지를 보여주는 태그
src="이미지 주소"를 적어야 한다.
alt 속성은 img가 제대로 보여지지 않았을 때 보여지게될 문구이다.
<img src="http://--.jpg" alt="사진" />
- form, input
form태그는 내부에 입력하는 값들을 관리해주는 태그이다.
로그인, 상품 업로드 등 우리가 입력을 해야할 때 form태그가 사용된다.
form의 주요 속성 중 action은 submit(제출하기)가 눌렸을 때 입력된 서버 URL로 정보를 전송한다.
form 태그 안에는 input 태그들이 들어간다. type 속성을 통해 text, password, radio, file, submit 등을 넣을 수 있다.
<form action="">
<label>아이디 입력</label>
<input type="text" />
<br/>
<label>패스워드</label>
<input type="password" />
<br/>
<input type="submit" value="전송" />
</form>
- div
영역을 나누도록 도와주는 태그이다.
하나의 박스라고 생각하고, 박스 안에 다른 콘텐츠들을 넣어서 영역을 관리한다.
<div>
<p>사진입니다</p>
<img src="http://---.jpg"/>
</div>
- span
div와 함께 CSS를 이용해서 영역을 구성할 때 많이 사용한다.
div는 줄바꿈이 되며 기본 너비가 부모의 너비를 차지, span태그는 줄바꿈 x, 자식 콘텐츠의 너비만큼 차지
'프론트엔드 > HTML' 카테고리의 다른 글
| Meta Tag란? (0) | 2021.09.30 |
|---|