[HTML] html구조, element의 구성요소, Text, Link , Media, Table

23. Front-end/23. html css javascript

[HTML] html구조, element의 구성요소, Text, Link , Media, Table

keemzeehae 2022. 2. 4. 22:11

html 구조

<!DOCTYPE html> 현재 html의 버전 명시(html5)

<html

<head>

title , 외부파일참조, meta data등, 브라우저에 표시가 되지 않음

</head>

<body>

브라우저에 출력되는 모든 것들

</body>

</html>

2. Element(요소)의 구성요소

1) <tagname attribute="속성값" attribute2 = "속성값2" ...> Contents </tagname>

2) <tagname attribute="속성값" attribute2 = "속성값2" ...>

- HTML은 Element(요소들)의 집합

- Element 는 중첩이 가능

- tagname은 대소문자를 구별하지 않지만 소문자를 권장

3) attribute

- 해당 Element에 추가적인 정보를 제공( 이미지 경로, 파일의 경로, 크기...)

- 모든 Element가 동일한 속성을 가지진 않음

- 모든 Element가 동일한 속성이 있는 것도 있는데 그걸 Global Attribute 라고함

-- id, class, data-*, lang, ...

**한페이지 내에 같은 클래스명 사용가능

**한 Element에 클래스명은 여러개 가능, 구분은 띄어쓰기로 한다!

<h2 class = "t1 c1 c2" id="p1">VSCODE H2</h2>

**한페이지 내에 같은 id명은 사용불가능! 금지!

왜냐하면 그 기능을 사용하려는 목적에 어긋나기 때문!

1. Text

1. Heading 태그

- display : block

- 제목을 표현, 글자의 크기를 조정하고 볼드체

<h숫자>Contents </h숫자>

- 숫자 : 1-6

- 숫자가 높을 수록 크기가 작아짐

- 검색엔진에서 Heading 태그를 중요한 의미로 받아들일 가능성이 큼

2. hr

- display : block

- 수평선 아래와 같은 선이 생김!

3. p

- display : block

- 문단태그

4. br

- 엔터키 같은 역할

2. Link

- display : inline

1. 태그명 : a

2. 주속성 : href

- 요청하고자 하는 자원의 위치(경로, path)를 작성

3. 경로(path)

-Root directory 더이상 올라갈 수 없는 최상위에 있는 directory를 root directory 라고 부름

-Root directory 기준으로 절대경로와 상대경로로 나눠진다.

1) 절대경로

- Root Directory부터 시작

- IP : PORT 까지를 Root라 함 표시는 ' / '

- / : root

- Web에서 Root 를 Context(Context Name) 라고 부름

- Spring (Servlet) Legacy 에서는 프로젝트명이 Context Name임

- /ContextName/경로명/.....

2) 상대경로

- 현재 위치 기준(현재 Directory 기준)

- 한 Directory 위로 이동 : ../

- 현재 Directory 에서 : ./ 또는 생략

- 현재 Directory에서 하위 Directory로 이동 : 이동할 Directory명(폴더명)

3) 절대경로와 상대경로 구분

3. Media

1. Image

display : inline

a. 태그명 : img

b. 속성

1) src: 이미지 파일의 경로

2) alt: 이미지가 없는 경우 표시되는 문장, 접근성으로 사용

3) width: 이미지의 가로크기 조정 (CSS에서 조정)

4) height: 이미지의 세로크기 조정(CSS에서 조정하는것 추천)

2. Video

3. Audio

4. Table

1. 표를 만들 때 사용

<table> :표를 감싸는 태그 (테이블 만든다~)

<tr> : 표의 행(row)

<td></td> : 표의 열(column)table data 셀을 만드는 역할

</tr>

</table>

2. 표 생성시 제목과 내용을 분리

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td>foot 1</td> <td>foot 2 필요없으면 안써</td>

</tr>

</tfoot>

</table>

3. row나 column을 하나로 합칠때

기준은 top, left

1) Column 확장 (가로로 확장, 옆으로)

2) Row 확장 (세로로 확장, 위아래)

*틀리거나 문제가 있을 시 바로 수정하겠습니다!

댓글로 남겨주시면 감사하겠습니다 :)

'23. Front-end > 23. html css javascript' 카테고리의 다른 글

[HTML] Form 사용자로부터 입력받거나 선택할때, 입력태그, Button (0)	2022.02.15
[HTML] 그룹태그, List, Semantic (0)	2022.02.10
[CSS] 정렬, size 단위, color, reset (0)	2022.02.10
[CSS] 선택자, 가상클래스, Text, Font, Box model (0)	2022.02.04
[Front End]주요 기본 개념과 참고할만한 사이트 (0)	2022.02.04

현재글[HTML] html구조, element의 구성요소, Text, Link , Media, Table

best part🖤

개발블로그

CSS, 프로그래밍, SQL, 자바, legacy, javascript, DDL, Error, DML, spring, Database, 공부, 자바공부, Java, Display, jsp, library, annotation, html, STS,

Today :
Yesterday :

일	월	화	수	목	금	토
		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

best part🖤