| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- promise
- req.get
- Axios get
- Axios delete
- 웹개발
- res.set
- mongoose find
- mongoose update
- node.js란
- mongoose delete
- CSS
- Axios post
- express 프로젝트 시작하기
- async
- http
- req.queries
- res.render
- res.status
- 프론트엔드
- req.body
- Axios put
- javascript
- req.params
- css 기초
- mongoose populate
- HTML
- 파이썬
- mongoose create
- 자바스크립트
- await
- Today
- Total
모스카토
[html ] 태그 본문
html은 모두 태그와 텍스트로 이루어진다.
< > 이 괄호 하나를 태그라고 한다.
1. 태그는 텍스트를 설명하는 역할을 한다.
<body> </body> 태그는 Hello World!! 라는 텍스트가 body 임을 설명해준다.
시작태그와 끝태그는 어디부터 어디까지가 body인지 나타내기 위해 쓰는 것이다.
대부분의 태그는 끝태그로 닫아줘야 하지만 시작태그만 있는 태그도 있다.
그런 태그를 self-closing tag라고 한다.
html에서는 지켜야할 문법이 거의 없지만 태그는 닫아야 한다.
2. 정해진 태그
html에 정해져 있는 태그를 사용하면 브라우저가 인식할 수 있다.
개발자가 임의로 태그를 생성해서 사용할 수도 있다.
1. 제목 태그
h : head의 h이다.
1부터 6으로 갈수록 글씨가 작아진다.
2. 리스트 태그
순서가 있는 목록과 순서가 없는 목록 태그
ol : ordered list의 줄임말로 순서가 있는 목록을 의미한다.
li : 각 목록을 나타낸다.
위와 같이 번호가 붙여져서 내용이 나온다.
ol을 ul (unordered list) 로 바꾸면 아래와 같이 숫자대신 점으로 목록이 표현된다.
3. 링크 태그, 이미지 태그
a : anchor를 의미하고, 다른 웹페이지로 이동할 때 쓴다.
br : line break할 때 br이고 줄을 바꿔준다.
img : 이미지를 넣을 때 쓴다.
태그명 옆에 하늘색 글씨 href나 target, src등은 html을 구성하는 4가지 중 하나인 속성(attribute) 이다.
텍스트 go google 만 화면에 표시되고, 클릭하면 href 의 주소로 이동한다.
target 어트리뷰트를 _blank로 설정하면 새탭에서 열린다.
img 태그는 self-closing tag 중 하나이다.
인터넷 사진에서 오른쪽 마우스 클릭 + 이미지 주소복사 후,
src 어트리뷰트에 ctrl + v 하면 오른쪽처럼 사진이 나타난다.
4. 본문, 글자
p : paragraph, 내용이 긴 문단
span
strong : 굵은 글씨
i : 기울인 글씨
hr : horizontal rule, 수평선
blockquote : 인용문, 들여쓰기로 나타남
※ 태그 및 어트리뷰트 정리된 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
3. semantic & nonsemantic 태그
semantic 태그 : 웹페이지를 구성하는 부분을 확실하게 지칭하는 태그, 보통 의미 있는 태그라고 한다.
non-semantic 태그 : semantic 태그와 반대로 의미 없는 태그. 구체적으로 페이지의 어떤 부분, 요소가 아니라 그냥 아무 태그이다.
예를들어, 위에서 <p>와 <span>이 나왔는데, <span>에는 설명을 적지 않았다.
p에는 문단이라는 뜻이 있고, 문단을 지칭할 수 있지만,
span은 아무 뜻이 없다.
span이라는 단어에 뜻이 없다는 것이 아니라 span이 페이지에서 정확히 지칭하는 것이 없다는 것이다.
대표적인 non-semantic 태그에 span과 div가 있다.
<div>는 보통 박스를 만들 때 사용한다.
html을 작성할 때 가능하면 semantic 태그를 사용하는 것을 권장한다.
'프런트엔드' 카테고리의 다른 글
| [css] flex (0) | 2020.09.03 |
|---|---|
| [css ] block v.s inline (0) | 2020.09.02 |
| CSS 시작 (0) | 2020.09.01 |
| [html] form 태그 (0) | 2020.08.21 |
| html css 시작 (0) | 2020.08.19 |
