[HTML & CSS] HTML과 CSS의 링크

 

 

 

 

HTML과 CSS가 서로 연동되야 내가 작성한 내용과 스타일을 화면에서 확인 할  수 있다.

그렇다면 어떻게 두 언어를 연동할 수 있을까?

 

HTML과 CSS의 링크 

 

우선 HTML의 파일명과 확장자가 index.html, CSS의 파일명과 확장자가 index.css라고 가정 할 때

index.html에 다음과 같은 코드를 입력한다.

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

<link> 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.

<link> 태그의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.

href에는 파일의 위치를 작성한다. (작성한 두 파일은 하나의 폴더에 함께 놓아야 한다.)

• 다른 경로에 있는 경우 경로를 입력하여 파일을 찾아야 한다. 

 

 

HTML에 CSS스타일을 적용하는 3가지 방법.

 

• 인라인 스타일 : 같은 줄에서 스타일을 적용
• 내부 시트 스타일: style 태그 안에서 작성
• 외부 시트 스타일: <link>태그를 활용한 방법