html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법

스타일 태그로 각 웹 페이지에 css를 적용할 수 있습니다.

 

body 태그에서 서식을 지정할 부분을 정합니다. head 헤드 태그 안에 style 태그를 엽니다. 선택자를 지정한 후 css 서식을 작성합니다. h1 태그로 제목으로 지정한 "Code is so useful." 부분에 서식을 적용하는 스타일 태그를 보겠습니다. width는 가로, 폭을 의미하는데 border 속성에서는 선 굵기를 의미합니다. 20px 굵기의 초록색 단선으로 만들어진 박스 테두리를 서식으로 만듭니다. display는 block level element로 적용하여 contents 가 있는 행 전부를 채우는 테두리로 둘러싸도록 하겠습니다.

 

<style>

h1 {

border-width:20px;

border-color:green;

border-style: solid;

display:inline;

}

</style>

 

스타일 태그로 웹 페이지에 직접 CSS 적용

 

CSS 파일을 만들고 이 파일을 link 링크 태그로 연결하여 여러 웹 페이지에 CSS를 적용할 수 있습니다.

 

link 링크 태그는 웹 페이지 외부에 있는 문서를 연결하는 태그입니다. css 외부 문서를 불러와서 서식을 적용할 수 있습니다. style.css 파일을 하나 만듭니다. 새로 만든 파일에 스타일 태그에 작성된 CSS 코드를 잘라내어 붙여 넣고 저장합니다. h1 선택자와 { } 내용을 잘라내야 합니다.

 

h1 {

border-width:20px;

border-color:green;

border-style: solid;

display:inline;

}

 

남아 있는 <style> </style> 태그는 삭제합니다. 이제 스타일태그가 있던 자리에 링크 태그를 써서 style.css를 연결하겠습니다. link링크의 속성 rel 은 relationship 즉 외부 문서와의 관계를 의미합니다. stylesheet로 사용할 외부 문서를 가지고 와서 참조하라는 태그를 쓰겠습니다. 참조하는 출처는 조금 전 새로 만들어 놓은 style.css 파일로 지정합니다.

 

<link rel="stylesheet" href="style.css">

 

스타일 태그를 사용해 직접 css를 작성한 것과 동일한 서식 효과를 적용할 수 있습니다. 스타일 태그로 직접 css를 적용하는 방법과 css 파일을 만들고 link 링크 태그로 연결하여 적용하는 방법에는 큰 차이가 있습니다. 수많은 웹 페이지에 스타일 태그를 직접 사용했다면, 똑같은 수정사항이 생겼을 때 모든 웹 페이지를 각각 새로 수정해야 합니다. 그것은 대단히 효율적이지 않습니다.

 

css파일을 외부 문서로서 참조하여 서식을 적용하는 방식은 매우 효율적인 방법입니다.

 

css 파일을 만들어 사용하여 각 웹페이지에 link 태그로 연결을 해 놓았다면 한 번의 수정만으로 모든 웹 페이지에 수정사항을 적용할 수 있습니다. 수정해야 할 웹페이지가 많을수록 효율성은 극대화됩니다.