웹 개발 시 다른 폴더의 외부 CSS 및 글꼴 파일을 연결하는 방법은 무엇입니까?

파일 디렉터리의 외부 자산 연결

웹 개발의 일반적인 과제는 스타일시트, 글꼴 등의 위치가 다른 외부 리소스를 연결하는 것입니다. 주요 HTML 문서. 이 기사에서는 이러한 자산이 별도의 폴더에 있는 시나리오에서 이러한 자산을 연결하는 기술을 살펴보겠습니다.

다른 폴더에서 CSS 파일 연결

연결하려면 다른 폴더의 스타일시트를 복사하려면 다음 구문을 사용하세요.

<link href="filepath/stylesheet.css" rel="stylesheet">

"filepath"를 CSS 파일의 상대 경로로 바꾸세요. 예를 들어 CSS 파일이 "assets" 폴더 내의 "styles" 폴더에 있는 경우 경로는 다음과 같습니다.

<link href="assets/styles/stylesheet.css" rel="stylesheet">

Font-Face CSS 파일 연결

다른 폴더의 글꼴 CSS 파일을 링크하려면 비슷한 방법을 따르세요. 접근 방식:

<link href="filepath/font-face.css" rel="stylesheet">

예를 들어 글꼴 CSS 파일이 "assets" 폴더 내의 "fonts" 폴더에 있는 경우 경로는 다음과 같습니다.

<link href="assets/fonts/font-face.css" rel="stylesheet">

src 속성을 사용하여 글꼴 연결

font-face CSS 파일 내에서 다음을 지정해야 합니다. src 속성을 사용하는 글꼴 파일. 파일 경로는 글꼴 CSS 파일의 위치를 ​​기준으로 해야 합니다. 예를 들어 글꼴 파일이 "fonts" 폴더 내의 "font1" 폴더에 있는 경우 src 속성은 다음과 같습니다.

@font-face {
  font-family: 'Font1';
  src: url('font1/font1.ttf') format('truetype');
}

이 접근 방식을 사용하면 스타일시트와 글꼴이 다음과 관계없이 올바르게 연결됩니다. 파일 구조 내의 위치입니다.

위 내용은 웹 개발 시 다른 폴더의 외부 CSS 및 글꼴 파일을 연결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!