아래 사이트에서 글을 정독하면서 글을 정리해보도록 하겠다.
webberstudy.com/html-css/html-1/basic-knowledge/
HTML 기초 지식
HTML 기초 과정을 시작하기 위해 필요한 기본 지식을 다룹니다. 기본적인 태그의 명칭 요소(엘리먼트)와 속성(어트리뷰트)를 소개하고, 절대 주소와 상대 주소를 통해서 어떻게 URL 주소를 표현하
webberstudy.com
1. <tag>ABC</tag>'와 같이 '열리는 태그', '닫히는 태그'로 이루어진 태그가 있고, '<br />'와 같이 '스스로 닫는 태그'가 있다.
2. 태그의 호칭
<img src="http://webberstudy.com/attach/html-1/sample.png" alt="샘플 이미지" />
<a href="http://webberstudy.com">웨버스터디 홈으로 가기</a>이러한 형식은 아래처럼 호칭을 부릅니다.
<요소 속성="속성값" /> 또는
<요소 속성="속성값">요소 내용</요소>
3. a 요소에서 href 속성에 원하는 주소를 적어주면 a 요소가 감싸는 텍스트를 클릭 시에 해당 주소로 이동합니다. 여기서 'href' 속성은 'Hyper Reference'를 줄여 만든 것입니다.
<a href="http://webberstudy.com">웨버스터디 홈으로 가기</a>
4, 주소 표현방식
- 절대 주소는 'http://' 부터 시작하여 URL 주소 전체로 표현
<a href="http://webberstudy.com">웨버스터디 홈으로 가기</a>- 상대 주소는 현재의 문서의 위치를 기준으로 '../'과 같은 방식으로 URL 주소를 표현
<link href="abc.css" type="text/css" rel="stylesheet" />
<link href="/test/style.css" type="text/css" rel="stylesheet" />
<head>
<head>
<title>웹페이지 제목</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<body>
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h4>안녕하세요</h5>
<h6>안녕하세요</h6>
</body>
<body>
<b>굵은글씨</b>
<i>기울인 글씨</i>
<p>글의 한 문단을 나타내는 <p> 태그</p>
</body>
<!--참고로 < 와 > 는 꺽쇠모양-->
<body>
<!--미디어 관련 태그-->
<img src="주소" alt="엑박 대체 텍스트입니다.">
<video src="주소 적으면됨" controls />
</body>alt속성은 "alternate" 즉, 해당 주소에서 불러올수없을때 출력되는 문구를 입력하는곳이다.
video태그에서 controls를 적어주어야 재생관련 버튼이 나온다.
<body>
<!--링크태그-->
<a href="https://google.com">구글</a>
<a href="https://www.naver.com" target="_blank">새창 네이버</a>
</body>target="_blank"를 입력하면 새창으로 들어가진다.
<body>
<table border="1">
<thead>
<tr>
<tr>이름</tr>
<tr>나이</tr>
</tr>
</thead>
<tbody >
<tr>
<td>청하</td>
<td>26</td>
</tr>
<tr>
<td>제니</td>
<td>26</td>
</tr>
<tr>
<td>승현</td>
<td>26</td>
</tr>
<tr>
<td>승기</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>table 태그 안에 thead, tbody로 나누어지고,
각각의 태그 안에 tr로 값을 할당해준다.
<body>
<!--숫자-->
<ol>
<li>ㅎㅇ</li>
<li>ㅂㅇ</li>
</ol>
<!--검정-->
<ul>
<li>ㅎㅇㄹ</li>
<li>ㅂㅇㄹ</li>
</ul>
</body>=> 구역별로 list 색을 나누어서 칠할 수 있다.
<body>
<div>한줄전체</div>
<div>block element <br></br> </div>
<span>내용물의만큼만</span>
<span>=span element</span>
</body>div는 한줄 단위로 감싸는것이고
span은 내용만을 감싸는것이니 참고하자.
<body>
<!-- 인풋태그-->
텍스트 <input type="text">
체크박스 <input type="checkbox"/>
라디오 <input type="radio"/>
색깔<input type="color">
여러문장<textarea>이게머야ssssssssssssssssssssssssss</textarea>
드랍다운 <select name="name">
<option value="제니">제니니</option>
<option value="청하">청하니</option>
</select>
</body>
<body>
<form action="">
<input type="email" placeholder="이메일">
<input type="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
</body>type을 email로 하면 이메일형식 입력을 요구한다.
password형식으로 하면 위와같이 패스워드 형식으로 출력이된다.
위처럼 로그인 형식을 만들어서 활용하면 된다.
'웹(Web) > 프론트엔드(Frontend)' 카테고리의 다른 글
| CSS 정리(선택자, Flexbox, 속성값 등) (0) | 2021.02.21 |
|---|---|
| css 색 디자인color tool (0) | 2021.02.21 |
| HTML Box/Item & Block/Inline 정리 (0) | 2021.02.21 |
| 프론트엔드 로드맵 (0) | 2021.01.04 |
| 웹사이트 제작시 무료 제작툴 사이트 (0) | 2020.12.06 |