나중에 HTML/CSS를 다시 검색하는 수고로움을 줄이고자 아래와 같이 HTML/CSS의 기초들을 정리하였다.
HTML의 기본 구조
HTML의 기본 구조는 아래와 같음
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>HTML 태그들
<!DOCTYPE html>HTML5버전을 사용한다는 의미
<html></html>HTML 요소들의 최상위에 존재
브라우저는 이를 통해 html이 시작되었다는 것을 인지
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>페이지 이름</title>
</head>사이트의 제목, 설명, 부가정보등을 표기
<meta charset="utf-8">한글, 일본어, 중국어가 포함된 페이지는 utf-8이라는 값으로 문자인코딩을 추가하여야 함.
<meta name="viewport" content="width=device-width">모바일 환경에서 웹을 위해 추가
디바이스의 가로크기가 웹페이지의 가로와 같다는 말
<title>페이지 이름</title>페이지 상단에 페이지 이름이 표기
HTML의 주요 태그들
<h1></h1>...<h5></h5>제목과 같은 텍스트에서 사용, 1->5 글자 크기가 작아짐.
<span></span>줄이 바뀌지 않고 한줄로 이어 나와게 됨. 포트란의 &와 유사한 기능
<p></p>주로 텍스트를 넣음
<a></a>클릭하면 화면이 이동, href="링크", target="_blank"<<새창으로 뜨게 함.
<div></div>섹션을 나눌 때 사용
ul {
list-style: none;
}
<ol>
<li> list </li>
<li> set </li>
</ol>
<ul>
<li> list </li>
<li> set </li>
</ul>- li 태그는 목록을 작성할 수 있도록 함
- ol은 리스트의 앞에 숫자를 작성함
- ul은 숫자가 작성되지 않음
- list-style: none;을 적용하면 리스트 앞에 아무 숫자도 나타나지 않음
<table>
<tr>
<th>목록 1</th>
<th>목록 2</th>
</tr>
<tr>
<td>값 1</td>
<td>값 2</td>
</tr>
<tr>
<td>값 3</td>
<td>값 4</td>
</tr>
</table>- table은 위와 같은 코드로 구성이 가능.
(tr: table row, th: table header, td: table data) - colspan, rowspan 등으로 열병합, 행병합이 가능.
<input type="text" placeholder="ID">
<input type="password" placeholder="비밀번호">
<input type="number" placeholder="학번">
<textarea>소개</textarea>
<button>제출완료</button>- input 태그로 input box를 생성할 수 있음
- type을 text, password, number 등으로 지정하여 상황에 따른 입력값을 지정할 수 있음
- textarea 태그로 방명록과 같이 긴 텍스트를 입력받을 수 있음
HTML Attribute
<div id="profile">id는 해당 요소에만 css등을 적용할 때 사용
id를 가진 태그는 유일하게 하나만 존재하여야 함
<div class="profile">
<p class="profile">id와 유사하나 여러 태그에 부여가 가능
<div id="profile" class="img">이와 같이 여러 속성을 추가할 수도 있음
'html,css' 카테고리의 다른 글
| CSS 기초 문법들 (0) | 2021.12.06 |
|---|