파일 경로는 HTML에서 해당 웹사이트의 폴더 구조에 대한 파일 경로를 정의하는 데 사용되는 개념입니다. 이는 원하는 폴더에서 파일의 정확한 위치를 찾는 데 특별히 사용됩니다. 이는 웹 브라우저가 호출할 특정 파일의 지침이나 주소로 정확히 작동한다는 것을 의미합니다. HTML의 이 개념은 주로 이미지, 웹 페이지 및 파일, CSS 파일, 스크립트 파일, 비디오와 같은 미디어 파일 등의 파일 경로를 감지하는 데 사용됩니다. src 또는 href라는 두 가지 속성을 사용하여 파일 경로를 찾을 수 있습니다. 이러한 속성은 HTML 문서에 외부 파일이나 소스를 첨부하는 데 도움이 됩니다.
구문
웹페이지에 포함될 파일의 경로를 아는 것이 중요합니다.
웹페이지에 이러한 파일을 포함하는 구문은 다음과 같습니다.
구문:
<img src="" alt="">
로그인 후 복사
웹페이지에 이미지를 삽입하는 데 사용됩니다.
다음은 설명이 포함된 일부 경로 목록입니다.
-
: 현재 페이지로 취급되는 동일한 폴더의 이미지를 사용할 때 사용됩니다.
-
: 해당 이미지가 동일한 웹사이트 폴더의 이미지 폴더에 저장되어 있음을 나타내는 데 사용됩니다.
-
: 현재 웹 폴더가 위치한 루트의 이미지 폴더에 각각 저장되도록 정의하는 데 사용됩니다.
-
: 이 유형은 사용자에게 주어진 이미지가 웹사이트의 현재 폴더에서 정확히 한 레벨 위에 저장되어 있음을 알려줍니다.
해당 파일 경로는 웹페이지, 이미지, 스타일 파일, 스크립트 파일 등과 같은 일부 외부 파일을 추가해야 할 때마다 코드에서 사용됩니다.
파일 경로를 정의할 때 항상 정확한 URL, 적절한 파일 이름, 적절한 확장자와 함께 정확한 이미지 이름을 포함해야 합니다. 이 모든 것이 제대로 포함되어 있으면 포함된 파일이나 이미지가 웹페이지에 제대로 표시됩니다.
위 구문은 두 가지 유형으로 나누어집니다. 하나는 URL 주소를 기반으로 하는 절대 파일 경로용입니다. 또 다른 방법은 상대 파일 경로에 대한 것으로, 콘텐츠에 액세스할 수 있는 이름이나 폴더 경로를 간단히 제공하여 파일과 이미지의 주소를 정의할 수 있습니다.
다음 섹션에서 두 가지 파일 경로 유형을 자세히 살펴보고 실제로 어떻게 작동하는지 보여드리겠습니다.
HTML에서 파일 경로는 어떻게 작동하나요?
파일 경로에는 절대 파일 경로와 상대 파일 경로의 두 가지 유형이 있습니다.
파일 경로를 정의하기 위해 전체 URL 주소를 사용할 때마다 절대 파일 경로가 사용됩니다.
구문: src=”url”;
예: 웹사이트 구조에서 절대 파일 경로 코드가 작동하는 방식을 정의하는 실제 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Absolute file path</title>
</head>
<body>
<img src="https://www.BeautyofNatur /image.png"
alt="My Image" style="width:400px">
</body>
</html>
로그인 후 복사
상대 파일 경로는 현재 폴더를 기준으로 실제로 모든 이미지가 있는 파일의 특정 경로를 정의하는 데 사용됩니다.
구문:
src="img_folder/img_name" or
src="/img_folder/img_name" or
src=""../img_folder/img_name or
로그인 후 복사
여기에는 다음과 같이 상대 파일 경로를 사용하여 파일 경로를 표시하는 가능한 모든 방법을 포함하는 예가 포함됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h4>Example showing file in same folder </h4>
<img src="images/Candle.jpg" alt="Image demo
"style="width:80px; height:80px; ">
<h4>Example showing file present in a folder above its
current folder </h4>
<img src="../images/Candle.jpg" alt="Image demo
"style="width:80px; height:80px; ">
<h4>Example showing file available in a folder, which is exactly located at root position of its current sub folder
</h4>
<img src="https://cdn.educba.com/images/Candle.jpg" alt="Image demo
"style="width:80px; height:80px; ">
</body>
</html>
로그인 후 복사
절대 파일 경로 개념보다는 상대 파일 경로를 사용하는 것이 항상 좋은 습관으로 간주됩니다.
HTML의 파일 경로 예
아래에 언급된 예시는 다음과 같습니다
예시 #1
절대 파일 경로가 어떻게 작동하는지 보여주는 예입니다. 다음과 같이 코드화하세요.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Absolute file path</title>
</head>
<h2>Absolute File Path</h2>
<p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p>
<body>
<img src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain">
</body>
</html>
로그인 후 복사
출력:
예시 #2
코드:
<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h2>Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p>
<h4>Relative File path with image in same folder </h4>
<img src="images/flag.png" style="width:100px; height:100px; ">
<h4>Relative File path with image present in a folder above its current folder </h4>
<img src="../images/flag.png" alt="Image demo "style="width:100px; height:100px; ">
<h4>Relative File path with image available in a folder, which is exactly located at root position of its current sub folder</h4>
<img src="https://cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; ">
</body>
</html>
로그인 후 복사
출력:
예시 #3
코드:
<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h2>Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p>
<h4>Relative File path with image in same folder </h4>
<img src="images/EDUCBA.png" style="width:250px; height:150px; ">
<h4>Relative File path with HTML file present in the folder </h4>
<a href="index.html"> HTML file </a>
<h4>One can give Style path through Absolute or Relative position. Here we are using relative file path</h4>
<a href="main.css"> CSS file </a>
</body>
</html>
로그인 후 복사
출력:
결론
위의 모든 정보를 통해 우리는 HTML 파일이 웹사이트 구조에서 실제로 저장되는 파일이나 이미지의 주소나 경로를 정의하는 데 사용된다는 것을 깨달았습니다.
해당 파일 경로는 두 가지 가능한 방법으로 표시됩니다. 위의 정보에서 본 것처럼 절대 파일 경로와 상대 파일 경로가 있습니다.
위 내용은 HTML의 파일 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
