dev._.note

[HTML] 요소(Elemnet)의 구조 본문

Dev/HTML

[HTML] 요소(Elemnet)의 구조

Laena 2023. 3. 1. 23:45

Html 요소(Element)의 구조

  1. 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작.
  2. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같음. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게 됨.
  3. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트.
  4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(Element)라고 함.

요소(Element)의 종류

✓ 블록 레벨 요소(block-level elements)

  • 웹페이지 상에 블록(Block)을 만드는 요소.
  • 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타나 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿈.
  • 일반적으로 페이지의 구조적 요소를 나타낼 때 사용.
  • 예) 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현.
  • 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없음. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에는 중첩.

✓ 인라인 요소(inline elements)

  • 항상 블록 레벨 요소 내에 포함
  • 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용.
  • 새로운 줄(Line)을 만들지 않음. 즉 인라인 요소를 작성하면 그것을 작성한 단락 내에 나타남.
  • 예) 하이퍼링크를 정의하는 요소인 <a> , 텍스트(Text)를 강조하는 요소인 <em>,<strong> 등

 

웹에서 경로표기법

1. 상대경로

    - 기준 : 현재 웹페이지의 소속 폴더가 기준점

           ./ : 현재 웹페이지가 소속된 폴더 (./생략가능)

          ../ : 현재 웹페이지의 부모 폴더

    - 자식폴더명 : 현재 소속된 폴더의 자식 폴더

    - 현재 위치를 '나'로 기준을 삼고 상대를 찾는 표현

    - 작업 중인 공간을 기준으로 상대적인 위치를 가리키는 경로

    - 이미지의 파일이 같은 폴더에 저장되어있을 경우 파일명만 적어주면되고

       하위 폴더에 저장되어 있는 경우에는 "폴더명/이미지파일" 처럼 사용

    - 상위 폴더에 저장되어 있는 경우에는 "../폴더명/이미지파일" 처럼 사용

<img src="image.jpg"> -같은 폴더안의 image사용
<img src="file/image.jpg"> -하위폴더 file안의 image 사용
<img src="../file/image.jpg"> -상위폴더 file안의 image 사용

2. 절대경로

    - 어떠한 웹 페이지나 파일이 가지고 있는 고유한 경로

    - 웹페이지에서 이미지의 URL을 가지고 오거나 내 컴퓨터 안의 이미지 경로를 가져올 때 절대경로를 사용

    - 기준 : 누구나 다 알고있는 동일한 위치를 기준으로 상대를 찾는 표현

<img src="http;//www......../image.jpg"> - 웹페이지 이미지 주소를 불러오는경우
<img src="C:\\user\\...\\image.jpg"> -내 컴퓨터 안의 이미지 경로를 불러오는 경우

3. 로컬경로

    - 사용 안함

    - 웹서버가 아니라 브라우저가 동작 중인 로컬 컴퓨터의 경로를 탐색

4. 외부경로

    - http:// 시작

    - 남의 사이트 주소

    - WebContent 폴더

       : 외부에서(클라이언트) 브라우저로 접근할 수 있는 가장 상위 폴더

       : 웹 루트 폴더

    - 웹 서버

C:\ > Class > WebClientTest > WebContent > ex01.htm

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
     <h1>상대 경로</h1>
     <div><a href ="./ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="./Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="./Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
     <div><a href ="../필기.txt">프로젝트 루트 폴더의 자원으로 이동</a></div>
     <br>
     <h1>절대 경로</h1>
     <div><a href ="/WebClientTest/ex01.htm">절대경로</a></div>
     <div><a href ="/WebClientTest/Member/list.htm">절대경로</a></div>
     <div><a href ="/WebClientTest/Member/private/private.htm">절대경로</a></div>
     <div><a href ="/WebClientTest/Member/list.htm">부모폴더의 다른 페이지 이동하기</a></div>
     <br>
     
     <h1>로컬 경로</h1>
     <div><a href ="ex01.htm">1번예제 (상대)</a></div>
     <div><a href ="/WebClientTest/ex01.htm">1번예제 (절대)</a></div>
     <div><a href ="C:\Users\user\Desktop\Class\WebClient\WebClientTest\WebContent\ex01.htm">1번예제 (로컬)</a></div>
     <br>
     <h1>외부 경로</h1>
     <div><a href = "http://naver.com">네이버 이동하기</a></div>
     <div><a href = "http://www.naver.com">네이버 이동하기</a></div>
     <hr>
</body>
</html>
<div>내용</div> : 영역태그, 태그들을 그룹핑해줌
<h1> ~ <h6>내용</h1> ~ <h6> : head태그 1~6까지 폰트크기가다름
<br> : 개행문자(enter)
<hr> : 수평선(줄긋기)

 

저작자표시 비영리 변경금지

'Dev > HTML' 카테고리의 다른 글

[HTML] HTML(Hyper Text Markup Language)이란?  (1) 2023.03.21
[HTML] media  (0) 2023.02.25
[HTML] ifram 관련 태그  (0) 2023.02.25
[HTML] Link(링크)  (0) 2023.02.25
[HTML] Image(이미지)  (0) 2023.02.25
'Dev/HTML' Related Articles more