뮁이의 개발새발
[HTML] 기본 개념 / 간단 입력 예제 본문
<웹 페이지 작동원리>
사용 툴: VS Code
추천 확장프로그램:
- prettier(줄바꿈, 자동완성)
- bracket pair Colorizer(괄호 위치에 맞춰서 색깔기둥)
- Material Theme icons
- Material Theme
- Auto Rename Tag(태그 이름 변경시 닫힘태그 이름 자동 변경)
- CSS peek (CSS 찾기 편리)
- HTML CSS support (css 자동완성)
- vetur( vue 입력시 자동완성)
<여러 단축키들>
- 문서 템플릿: !
- 자식: >
- 형제: +
- 부모: ^
- 여러개: *
- 그룹: ()
- 아이디, 클래스: #, .(dot)
- 문자열: {}
- 넘버링: {$}*
(단축키 예제)
table>(tr>td*3>{00$})*2
<table>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
</tr>
</table>
<html 기본 구성>
<!DOCTYPE html> <!--가장 처음에는 doc타입을 알려줘야함-->
<html lang="en"> <!--root element start-->
<head>
<meta charset="UTF-8"> <!--UTF-8 설정.. 꼭 써주기-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html> <!--root element finish-->[element 요소]
<head></head> => style, java, metadata 등등 : 설정영역
<body></body> => 우리 눈에 보이는 영역
보통 시작태그+닫힘태그와 함께 있지만, 안에 contents가 없는 경우 닫는 태그가 없을수도 있음. (ex: <br>: 줄바꿈 태그)
시작+닫힘 사이에 문서 내용 작성
[태그&속성]
<a href="muengx2.tistory.com/"> go tistory</a>
<a></a>: 시작태그, 종료태그
href : 속성 이름
"muengx2.tistory.com": 속성값
[글로벌 속성]
- class: 스타일의 이름을 지정
- id: 자바스크립트에서 주로 사용, html에서의 변수같은 느낌
- style: css에서 보통 처리,,,, 색, 위치 등 꾸미기
[주석]
<!-- 주석입니다 -->
[Root 요소]
<html>: html 문서 전체
<head> + <body>
보통 head에는 초기 설정, script, css 등 설정.. body가 우리 눈에 보이는 영역
[head]
title, meta, style, script, link 등
meta: 작성자, 날짜, charset 등 정보 설정
[body]
보여지는 부분
<h1~6>: 문단의 제목을 표현
[목록형 요소]
<ul>: 번호가 없는 목록
<ol>: 번호가 있는 목록
<li>: 목록항목 하위에서 사용
<dl>: li의 하위에서 용어 정의와 설명에 대한 부분을 목록화
<dt>: 용어목록의 정의부분
<dd>: 용어 목록의 설명 부분
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Lanuage</dd>
</dl>
[테이블 모델]
<thead>, <tbody>, <tfoot>으로 행들을 그룹화
<tr>: 행
<th>: 상단행의 열 내용 (머리글) / 일반적으로 중앙 정렬
<td>: 일반 열 내용 (셀) / 일반적으로 좌측 정렬
<col>: 열 요소를 묶음.
[셀병합]
colspan: 두개 이상의 열을 합침
rowspan: 두개 이상의 행을 하나로 합침
<tr>
<td colspan="2"
class="view">1</td>
</tr>(결과)
[이미지 태그]
<img src="파일경로" width="가로" height="높이" alt="이미지를 표시할 수 없을때 출력되는 부분">
*이미지태그는 닫는 태그가 없다.
[하이퍼링크(Anchor)]
<a>태그 이용
<a href="http://www.naver.com" target="_self">네이버</a><br>
(현재 사이트 네이버로 바꿈)
새창: _blank
[link]
<link rel="stylesheet" href="./css/main.css" />
보통 css를 연결할 때 사용
[Iframe]
사이트 안에 사이트 (프레임 안)
<h3>iframe 요소</h3>
<a href="spring.html" target="javacontent">
spring/springboot</a>
<a href="android.html" target="javacontent">
android</a>
<br><br>
<iframe src="java.html" name="javacontent"
width="500" height="300"></iframe>
[form]
사용자로부터 데이터를 입력받아 서버에 전송(submit)하기 위함
fieldset: form 요소를 그룹으로 묶음
[checkbox & radio]
<--- checkbox
다중 선택 가능
<--- radio
단일 선택
<-- label을 사용한 경우 텍스트 부분을 클릭하여도 선택 가능
[dropdown box]
<select> 셀렉트 박스 표시
<option> 셀렉트 박스에 포함될 항목들 정의
<optgroup> 옵션들을 그룹화
[textarea]
<textarea> : rows,cols로 크기 속성 지정
[button]
기본 type은 submit
[공간 분할 태그]
1. <div>: block 형식으로 분할 / 줄바꿈 있음
2. <span>: inline 형식으로 공간 분할 / 줄바꿈 없음
'Front-end > HTML' 카테고리의 다른 글
| [HTML] semantic & multimedia (0) | 2021.09.05 |
|---|