| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- vuex
- Vue
- ES6
- CSS
- sass
- scss
- 댓글달기
- webpack
- MySQL
- input
- State
- Wecode
- nodejs
- express
- event
- 리액트
- Vue transition
- TypeScript
- App.vue
- mapGetters
- Vue.js
- 자료구조
- react
- JavaScript
- HOC
- jsx
- 자바스크립트
- storybook
- v-html
- 쉬운설명
- Today
- Total
익명의 개발노트
[HTML] Tag의 종류 본문
HTML 컨텐츠 관련 Tag
1. <head> : 웹 브라우져를 열때 이부분은 표시가 안됨. 사용자에게 안보이는 부분임.
2. <body> : 실질적인 html 을 작성하는 부분
3. <style> : css를 html에 적용시키고자 할때 사용
4. <script> : 실행가능한 코드를 문서에 포함시키거나 참조하기 위한 것.
5. <meta> : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그.
6. <div> vs <span> : 영역을 설정할 때 사용함.
1) 차이점 : div는 줄바꿈이 되지만 span은 옆으로 붙어버림, 텍스트 표현시 div는 사각형 박스로 구역을
정하지만, span은 문장단위로 지정이 됨. div은 폭, 넓이 지정 가능하지만, span은 지정 불가.
※ table 태그대신 div와 span이용해서 간결한 표 만들 수 있음.
7. <a href="url"> : 문서를 연결하는 Tag, 앵커 태그라고함. 하이퍼텍스트 reference를 속성으로 사용함.
8. <ul>,<li> : <ul>는 순서가 없는 리스트를 만드는데 사용. 순서있는 리스트는 <ol>, <dl>은 사전처럼 용어를 설명하는 목록을 만듦.
내부에 <li> 리스트 아이템 tag를 사용가능함.
9. <img> : 이미지 삽입하는 Tag, 속성 중에 alt 는 이미지를 표시할 수 없을 때 출력할 내용을 적는다.
10. <iframe> : html 문서안에 창을 만들어서 그 안에 문서, 동영상 등을 넣을 수 있음.
ex) <iframe src="URL"> 대체내용</iframe> iframe은 태그를 지원하지 않는 브라우져를 위해 대체내용을 넣어주는 것이 좋음.
11. <br> : 줄바꿈시 사용.
12. <table> : 테이블은 표를 만들어주는 Tag임.
→ 구성요소로 <tr>,<th>,<td> 가있음
1) <th> : 테이블 헤더
2) <td> : 테이블 바디
3) <tr> : 테이블 열
13. <code>, <pre>
1) <code> : 컴퓨터 코드의 일부를 쓸수 있음.
2) <pre> : 입력한 내용 그대로 화면에 출력해줌. 본문영역이 고정이 아닌경우 텍스트 깨짐 현상 발생할 수
있는 단점이 있음.
※ white-space:pre-wrap; 과 word-break:break-all; 을 css에 적용해주면 해결 된다.
HTML 폼관련 Tag
1. <form> : 정보를 전달할때 사용 action은 폼을 전송할 URL, method는 GET, POST 방식 설정할 수 있음.
2. <input> : 주로 form안에 들어가며, 텍스트 입력, 전송버튼, 라디오버튼, 체크 박스 등으로 나타남.
3. <button> : 버튼을 생성함.
4. <textarea> : 긴문장을 입력하기 위해서 필요
5. <select>,<option> : 콤보박스라고도 함. select 내부에 option으로 속성 설정함.
6. <b>, <font>, <center> 등의 태그를 권장하지 않는지..
1) <b> : text 굵게 표시하는 tag → <strong> 태그를 권고하고 있음.
※ <b>는 단순히 텍스트를 진하게 표시하는 역할만 함.
<strong>은 단순히 보여지는 강조가 아닌 실제 페이지 내의 중요한 부분을 브라우져에게 알려주는
역할 을 함.
2) <font>.<center> 등 css에서 구현가능한 태그들은 css에서 구현하는게 낫다.
<center>는 html5에서 이미 도태..
'프로그래밍 > html, css' 카테고리의 다른 글
| [CSS] font-family, indent, box-sizing (0) | 2019.06.03 |
|---|---|
| [CSS] z-index (0) | 2019.03.02 |
| [CSS] 정렬방법 (0) | 2019.03.02 |
| [CSS] position (0) | 2019.03.02 |
| [CSS] 레이아웃 & Box Model (0) | 2019.03.02 |
